Robimo template for WordPress with psd. Creation of simple themes for WordPress. Select functionality template

Hello, today I decided to publish an article about the creation of the site’s layout, which we then uploaded and pulled onto wordpress engine. Therefore, if you do not want to miss the release of these articles, then be sure to subscribe to the latest blog and after the publication of the article you will immediately be informed about it. Creating a psd layout for a website, the same as creating a wordpress template, is actually a very simple process and I remember that you can download everything according to my instructions and get your own unique template.

To create a template, we need a lot of knowledge, knowledge of HTMLі CSS, Just read the articles in the topics on your blog. Particular attention should be paid to the use of DIV tags and SPAN tags.

Now let's figure out what we need to create a PSD layout and create a template for the site. In fact, you don’t need a Photoshop program, which can be downloaded on the Internet, I bet that it won’t be a problem for you to obtain output materials for this.

Also, soon I will publish articles in which I will tell you about how to create textures and backgrounds for the site, so subscribe to the new blog.

Creation of the document.

Now it’s time to create the layout and create a new document. Select a file - create. Sizes for the document are selectable 960 on 1600 pixels

Two directions are displayed, the left one and the right one. For this, simply click on the lines and display the lines.

Now we need to change the size of the canvas. For whom choose Image-Rozmir canvas and select the size for the canvas 1200 by 1600 pixels. After this, fill this area with a white color, leaving the “Fill” tool at rest.

Groupy for the template.

Now let's create a group for the site. We can create standard groups on all templates: header, menu, content, side column and footer of the site. It’s very simple to do so, in the share menu we click on the folder images, to rename the created group you just need to click on the name of the sub-clicks and enter the required name.

Website header.

Now let's finish creating the header for the site. The first thing you need to do is to open the texture with the name "Texture 1". And now we need to crop the black background, it’s even easier to select a tool "Charming stick" and click on the black background, now click on the light area right button And select the item “Inversion of the visible area”.

Next, we will determine the accuracy of our borders by selecting the right mouse button and the item to specify the edge. І set all settings as shown in the image.

Now select " share - new - copy to new share" Now we take the ball with the bear and drag it onto our little one.

Once we step on the ground, we need to turn the baby over. For which we select Edit-transform-rotate 90 degrees against the year arrow. After pressing the left mouse button, you will need to move your ball, as shown in the little one below.

Now we need to increase the intensity of our image and for this we go to the tab Image - Correction - Tone / saturation. Now we need to change the brightness of the picture to -100. I axis that we are guilty of entering:

Now let's write our logo for the site. For this we need to install a new font. I think you have already downloaded the file with the output materials and there is also a font file in the archive. We need to unpack the font first. Now we need to go to the folder (most often Drive C: / windows - Fonts).
And copy all the font files there. Now restart the program and this font will be available to you.
Now select the Text tool and select our font, color white and create a logo along the left guide. What did I get?

Now let's create a menu on the right side. It consists of three main points: Head, Contacts and about the author. Select the Text tool again and press them in the required place. The color is white and the font is Wide Latin and the size is 18 pixels.

Let's create a new ball. Now we take the “straight-line laser” tool and see a button next to one of the entries.

I fill the visible area with the color 2A2A2A. Now we change the order of the balls, moving the ball with the letter above the ball with the fill.

Main content of the site.

And now we have a menu button after we clicked on it. Now we need to go to the Content folder and create a new ball in it.

open baby 3 And we place him below all faiths. With additional transformation, the size of the image increases until you fill the entire space.

Now we can adjust the brightness and contrast of the texture. For whom do we press the buttons? Ctrl + Shift + U. Select Image - correction - Curves.

We set the settings for the baby.

We create a new ball, and now you can see the content area. Our content area will be white in color and will have dimensions of 660 by 1200 pixels. For which we select the “straight area and style - set proportions” tool, you must enter the field dimensions. And then you need to fill the field with the “Fill” tool.

Now we need to set the outline for our field. We select the ball on which our picture is and click on the “Add style to the ball” button, and select Stroke from the drop-down menu.

І set the current settings - thickness 1 pixel and color c8c7c7.

now open it picture 4,Additional scaling changes the size due to the fact that there are ten pixels more in the white field of the right-handed and left-handed. At the top and bottom it is necessary to create indents of 50-60 pixels.

Now we press the combination of buttons Ctrl + Shift + U to soften the texture and adjust the brightness using curves. Adjusted like in the picture.

Select the ball with our white canvas, press the right button and select the item “ see pixels».

Now we select a ball with gray and push vision - modification - squeeze, And set it to shrink by three pixels. Therefore, it is necessary to invert our vision, which we have already created, and it is easy to do so, we choose Vision-inversion, Press the button Del. The axis that we are guilty of entering:

Now we create a mask for the same gray ball.

Select a black and white gradient and press the left button from the middle to the bottom of the side and thereby smooth the transition.

Now let's create side navigation buttons. For this we just need to paint a rectangle in a black color, you can choose the size at your discretion. You also need to write the name of the pages into the button. For writing, the vikorystmo font Times New Roman and size 18 pixels

Now let's open the picture with the icons and add them to the front side of the main menu. Now we need content to have access from two sides of twenty pixels each. Now we need to add a title to our first article, coloring the text black. For the date and number of comments, I used color cb8154.

Now, in order to add a title to the main one instead of the site, you need to draw a line. In order to draw a straight line, you need to select the Olive tool and hold down the Shift key and draw a line by pressing on the cob and drawing until the end of the line.

Now we need to create a place for the preview. To create a rectangle with the dimensions we need, I chose to work with 165 by 165 pixels, and always with a black color. You can set the following settings: outline and shadow.

Circled.

Shade.

Now I'll add more text. The axis that we are guilty of entering:

Now, after finishing the articles, you need to increase 30 pixels and gray color (ssssss). Then we paint squares measuring 32 by 32 pixels and fill them with the red color 8E0A13.

Painting the Shukov form.

To do this, we just need to paint a straight area with a white color, before which the inner shadow is placed.

Now we paint the red button of the same size 32 by 32 in a red color and write the word “in a white color” Search».

Side menu.

The new ball is painted with a rectangle 270 pixels wide and filled with the color 1F1F1F. We also add a header with a width of 270 pixels and a height of 25 pixels, filled with a black color.

Now we need to write categories for the blog. The text is in Times New Roman font and 16 pixels in size. To each menu item you need to add a picture. select " pretty figure"I select the shape of the raster dot" ornament 4»Filled with color 818181.

Footer of the site.

We won’t bother too much with the basement, we’ll just fill the entire field with a black color and add a menu, in Times New Roman font, 18 pixels in size and color E6E6E6.

If you want to download a template, which is yours, then click on the button and you will be able to download it. This article is over and I think that you now know that the first step for creating a WordPress template is to create a PSD layout for the site.

This article will tell you about how to create the simplest theme for WordPress. While the Codex does provide a lot of documentation on this food, it seems a bit overwhelming for a beginner. In this tutorial, I will explain the principles of WordPress themes and show you how to adapt a simple HTML template to them. In this case, you do not need knowledge of PHP, but rather you will use Photoshop and CSS to create the design.

1. Frontend blog

Before that, let's take a look at a standard WordPress theme and see what it's all about. Important elements (header, post title, search form, navigation, footer, etc.).

Standard Frontpage ( index.php)

Standard Single ( single.php)

2. Photoshop layouts

Prime on external view standard topics, develop Photoshop layouts for your blog. For the butt, I’ll use the vikorist GlossyBlue - one of my cat-free themes. Download demo.zip to download the finished Photoshop file.

3. HTML and CSS

Once the PSD design is ready, create an HTML + CSS template for the skin side. By following these instructions, you can edit my GlossyBlue HTML files from demo.zip. Once you have unpacked the archives, you will learn index.html, single.htmlі page.html. Next I will use them to turn them into a template.

Should I start creating static HTML? The head rank is formed for these reasons, which is important to simplify the process of development. So I create an HTML file for each template, check its validity (HTML and CSS layout) in all browsers. After this you will no longer need to edit and insert the WordPress code. So you don’t have to worry about changes in HTML or CSS anymore.

4. How the WordPress theme works

Once you go to the standard themes folder ( wp-content/themes/default), Then you will have a lot of php files (called template files) and one file style.css. To create a WordPress page, download the vikoryst file of template files ( index.php , Header.php, sidebar.php,і footer.php).

More details in the Codex: “Site Architecture” and “Hierarchy of Templates”.

5. Dubbing template files

Copy the HTML folder from GlossyBlue to the folder wp-content/themes. After which go to the default directory, copy comments.phpі searchform.php to a folder glossyblue.

6. Style.css

Go to the default folder, open the file style.css. Copy the commented text to the top of the file and paste it into style.css those GlossyBlue. If you want, you can change the title and information about the author.

7. File subsection

Now we need to understand how to split the HTML files into parts: header.php, sidebar.php, and footer.php. In the screenshot below you can see a simplified version of the index file, as well as the principle of this subsection.

8.Header.php

Open up index.html. You need to edit the section from the top to the place where it ends, paste it into a new php file and save it header.php.
Go to the default themes folder, open a new one header.php. Copy and replace the tags that are included in the php code: title, link, style sheets, h1 and div class = description.

Navigation menu (wp_list_pages) Replace tags li V ul id = nav on the;

9. Sidebar.php

Turn to index.html, Write the code from the place where it starts form id = searchform and until the tag is closed div id = sidebar, Place it in a new php file and save it sidebar.php.

• replace form id = searchform with everything together on.
• replace tags li categories on
• replace tags li archives on

10. Footer.php

Turn to index.html. Remember to enter code div id = footer inclusive with tag div id = footer and to the end /html then place it in a new one footer.php.

recent posts Here I have selected query_post to display the 5 remaining blog posts.

"Remaining comments"“Remaining comments” generated by the plugin (included in the topics folder)

11. Index.php

Now your index.html guilty to lose only div id = content. Save file as index.php. Enter rows: get_header, get_sidebar, і get_footer in the order in which the stench clusters in the pattern.

12. Analysis of the cycle

The loop sequentially displays all the blog entries in the state as you tune them. The screenshot below illustrates his robot. Initially, the cycle checks the availability of records and if such are not found, then it appears as a notification "Not Found".

13. Copying the cycle

Go to the default directory, open index.php. Copy the cycle from the standard one index.php in your - between div id = content ../ div. After this, replace the static text with WordPress template tags: post date, title, category, comments, next and previous link.

14. Preview topics

I'm flying! You created a public part (the main part of the template). Now go to the administration panel, go to the tab Design, It's your fault to edit the GlossyBlue theme. Activate it and go to the public part to see the results in the action.

15. Single.php

It's time to create a template single.php. If you want, you can repeat the steps, transferring the code from the standard ones. It would seem better to forgive the vikorism of the creations index.php, Save your money single.php. Open up single.php From the standard themes and copy the template tags to the required location. let's connect comments_template. In the following screenshot of the image, I made changes:

16.Page.php

now new single.php save by name page.php. Select the recording date, comment form, and previous/previous details. Axis, power, and everything is your template page.php ready.

17. Viewing HTML files

Delete all HTML files from a folder glossyblue(We don't need the stink anymore). Technically, this is sufficient for creating basic WordPress themes. You, melodiously, noted that there are more PHP files in the standard theme. Well, in truth, you don’t need the stink so much as you need a simple topic. For example, I guess search.php or else 404.php not being in the papa's list, WordPress will automatically vikorist index.php to display the page. Read Template Hierarchy for more information.

18. WordPress Sidebar Template

And now the last butt - I will show you how to create a vikorist Page Template for the Archive page, which will contain a list of all posts on your blog (manually for the site map). Copy archives.php from the standard themes folder. Remove unnecessary code and click here:

It’s no secret that Merezha has a wealth of ready-made templates for WordPress. Starting with cost-free ones and ending with expensive premium templates with powerful frameworks.

Why the difference? What is the best design for your website?

This article is intended for those who are planning their website based on WordPress and are faced with choosing a template.

Let's go with the catless ones. The advantage is obvious - the price, or rather the cost. The main drawback of public templates is that while the template is fairly decent, it already takes into account the large number of sites. And the likelihood that you or your clients will come across a site that is identical in terms of design is even higher. Therefore, opt for public templates only if your budget is really limited and you are not particularly bothered by the image functions of the site. So, of course, with a small amount of effort or cost invested, you can uniquely (adapt) a public template to the point of unknown. And all the same, you will be one of the cheapest solutions.

Subscribe to my telegram and be the first to watch new materials, including those that are not on the site.

Free PSD website templates are useful for setting up business, portfolio, and other types of websites. They can be found everywhere on the Internet. Not to say that most of them are ugly, but rarely will you actually find anything that would surpass your standards. Since Adobe Photoshop is one of those "easy to use, hard to master" programs, many beginners and professionals choose to go with PSD templates for their first website. That is because PSD web templates are easy to set up, edit, and use. However, you need to get those web templates from reliable sources. It's easy to fall in love with a web template design, download it with excitement, and unpack it on Photoshop, only to realize that it's an utter mess and you can not find your way around it.

Good web templates are aesthetically pleasing, soothing to the eyes. Great web templates, on the other hand, combine that kind of beauty with usability to create the best eye-catching and easy-to-use templates.

Whether you want a portfolio web template, a personal blog template, an e-commerce template, or a restaurant template, you'll find this list of the best free PSD templates really helpful.

UNLIMITED DOWNLOADS: 500,000+ Website Templates & Design Assets

All the Website Templates you need, and many other design elements, are available for a monthly subscription to Envato Elements. The subscription costs $29 per month, and will give you unlimited access to a massive and growing library of 500,000+ items that can be downloaded as often as you need (Stock photos, too)!

DOWNLOAD NOW

When you have the design ready, the time comes to showcase it in a way that will inspire everyone. While you can use a simple screenshot, you can also take things to an entirely new degree with a PSD website template. This particular bundle includes seven different styles for you to take to your benefit. From iMac, Macbook and single page to two iPhones and cropped Macbook, the options are there, at your fingertips. You can also edit the background by keeping it transparent or add color or even image. Make things the way you fancy and showcase your works in the best possible light.

Super minimal, clean and striking device mockups which you can use for displaying the flexibility of your website. In the kit, there are twelve different variations, each original, creative and attention-grabbing. Moreover, you can choose between Macbook, iPad and iPhone. Simply drag and drop your creatives and let the desired template display them instantly. Other goodies include eleven shadow overlays, customizable background and six main color options. You now have a complete solution to make a presentation that will turn heads. If keeping things simple and minimal is your cup of tea, this mockup package is perfect for you.

A stunning, modern and user-friendly website mockup template with six different isometric views. In case this is the style of presentation that you would like to sport for your online presence, make it happen in close to no time. No need to spend countless hours on how you would like to showcase your work when a template can make it happen in a snap of a finger. Just slide in your designs and that is pretty much it. You can add multiple page layouts to showcase your entire website, as well as edit the background. In short, the final product will be a real masterpiece, helping you win over new clients.

A complete collection of various website mockups featuring different devices. You can now push the flexibility of your page on iPhones, iMacs, Macbooks and iPads. Also, you will find fourteen different PSD scenes of 4000 x 2500 px dimension. You can employ these for all sorts of different presentations that go beyond website design showcase. Other features include shadows and light adjustment, smart objects (just drag and drop), 50% zoom and more. You can also change the background color and enjoy very detailed customization. With super swift editing and improving, you can have multiple different presentations readily available in a matter of minutes.

Another fantastic alternative to all the other website mockup templates, where you look for a device to display your design. In this case, you get twelve different PSD files included in the kit, dimensions 4000 x 2500 px. Objects and shadows are separated for flawless editing. Have in mind, this bundle of mockups comes with instructions which will help you on your journey to realizing the striking and photo-realistic display of your page design. Thanks to the smart object layers, you do not really need to invest much time and energy into activating these mockup layouts. Just slide in your image and see it in action in an instant.

Avire

Avire is a highly customizable one-page template that features a flat style design. It is simple to use and modify to fit your needs. With a few tweaks here and there, it can definitely meet all your requirements.

Hexal

Hexal is a unique portfolio template that is guaranteed to leave lasting impressions to your website visitors. It is definitely perfect for web designers, graphic designers, and anyone with a creative mind.

Textured Design

You can use this free PSD file for both personal and commercial purposes. It is a one-page portfolio web template that caters to creative people.

Switch

Switch is a bootstrap 3D multipurpose web template, which means it can become whatever you want it to be! It serves as a great one-page template that offers various solutions for all your needs.

Kappe

Kappe is a creative multipurpose web template. With its grid-based design, you can convert into a personal blog or a business web page with a few mouse clicks.

Notify

Notify is the best app landing page around the web. Its sleek and modern design will make sure that your message is conveyed just as you've imagined it.