Creating a simple WordPress theme. Creating a Simple WordPress Theme Groups for Template

To make your site with WordPress, you will definitely need to add a theme. They are also called templates. This is the foundation of any web resource.

This article will cover the stages of creating a template, and describe the layout of psd files.

You will also learn about the basic technical requirements for WordPress themes, what a template must be in order for it to work on the WordPress core. As a result, you can create a website with your own theme that exactly matches your requirements.

Please note that this tutorial does not include a description of adding a ready-made theme - this is a manual for generating your own template. If you downloaded the theme and do not know how to install it, then go to the WordPress admin panel, in the "Appearance" section and add one of the available designs there. Now let's take a closer look at what a theme is, what it is for and how to create it yourself.

For what purposes a theme is created manually

A theme (template) is a collection of functional and style files that together define the design of a resource. The theme depends on how the site will look, therefore it is very important to correctly approach the process of creating a template. Many people are now asking the question: "Why create your own theme if you can download a ready-made one on the Internet, and for free?" This is a logical question and there is quite a comprehensive answer to it: "To make the perfect template that fully meets your requirements."

When you buy or download a design from a directory of free WordPress templates, you usually sacrifice quality. As a rule, these templates do not suit everything for you. But you resign yourself, I think that one or two nuances are not the whole picture, and that later you will edit the topic. But in fact, it turns out that the site remains with an unfinished theme that you don't like. Therefore, it is better to immediately do your own thing. And although the layout may seem complicated at first, but then, when you learn, you can even create custom templates.

In addition, after creating a template, you will feel like a WordPress “medic” - you will know what the site has inside. Understand which elements are responsible for what. Then the site and you will talk to you. Get familiar with WordPress tags, structure, and loops. Or maybe you want to do it professionally and start making a living creating templates.

So, here are the main reasons why you should make your own website template:

• learn all about HTML, CSS and a thing or two about PHP;
• you will be able to create, because web design is also an art;
• it will be possible to earn money by selling themes;
• discover a new skill;
• create a design that will be 100% suitable for your future site.

What standards does the theme meet?

It is very important to follow the official guidelines when writing your template. Breaking the code, inserting a tag in the wrong place and skipping it - this can damage the design and completely ruin its appearance. You should be familiar with the rules for writing PHP code, as well as HTML if you are not already familiar with these languages. You also have to deal with cascading CSS stylesheets, so remember the basics as well - there is a lot of information on the Internet about this. Well, and the last least important requirement is to create a website like a designer, not like a schoolboy, so that you get a serious project. Otherwise, it makes no sense to take on this business.

All WordPress themes are hosted in the wp-content / themes / folder. Inside this folder there are other folders with separate themes, a file with additional functions (functions.php), style files and images. To find data on a particular topic, you need to go to the corresponding directory. This will place the "Western" theme in the wp-content / themes / vestern / folder.

Before you start, you should at least take a few look at the structure of the pre-built themes. The default WordPress site contains two standard templates that you can browse. This is the Default and Classic template. Open their files in the required directory on the server and compare their differences.

You will notice that the template usually consists of three file formats:

1. Style.css - a style file responsible for the external design of the site.
2. Functions.php is a functional file that adds various features to pages.
3. Other php files that are responsible for the features of the template display on the site, integration of the theme with WordPress. It is these files that allow you to translate the psd layout into a full-fledged template.

Let's take a closer look at each of these files in order to understand how the layout of the WordPress theme goes.

Rules for creating the style.css file

First, it must meet all the specifics of CSS markup. This file determines how your site will look. But it won't work if you don't add a description of the created template to it. This is the first WordPress feature to keep in mind when porting a psd layout to the WordPress engine. You have to specify the following parameters:

1. The name of the template.
2. The URL that leads to the topic.
3. Description indicating the main features of the template. Briefly.
4. Author's name. In this case, enter your name.
5. Link to the author, that is, to you. You can provide a link to your profile on social networks.
6. The name of the parent theme is optional.
7. Theme version. If only created, then v. 1.0.
8. Full description of the template. You can write in detail.

To create the most basic WordPress theme, you just need to add an edited version with one style.css file. In this file, next to the “template” line, specify the name of the parent theme. For example, Classic if you are editing a standard template. Now the created theme will fully match the Classic template. Therefore, you will need to upload the files to the wp-content / themes / classic directory.

Thus, you can create your first, the simplest theme, which will be a "descendant" of an already prepared template. But this will not be a full-fledged website design, but only an attempt to make it up, so you should continue to research.

Features of the additional functionality file functions.php

The templates do not always use the functions.php file, but in most cases it is necessary. It must be placed in the directory with the corresponding theme. Please note that if this file is in the template folder, then it will be taken into account when initializing the theme. It works like a plugin. And it will perform such functions as you give it.

The main purpose of the functions.php file is to define the available customization functions in the admin for a given theme. That is, all the functions that you enter in functions.php will be displayed in the admin panel, or on the page for the user. Typically, this is changing the color scheme for the WordPress site, changing the font, and more. But there are many uses for this file. However, this is a completely different story ...

Features of php template files

The php files will be responsible for individual parts of the site. They define both the constituent pages and the headings, categories and other sections that will be displayed to the user. Since you are the creator of the theme now, you alone will determine which and how many template files to select. After selecting them, new functions will appear in your admin panel. The fewer files you select, the faster the site will work, but the less functionality it will have. Think carefully about which files you need, and which you can do without.

If you want to add a minimal theme to your site, or try your psd layout, then you only need two files in the template directory:

1. Style.css.
2. Index.php.

Experienced webmasters manage to modify the index.php file in such a way that only it is enough to make settings for the footer, sidebar, search, archive, categories, pages, etc. But you better try to make a WordPress template in which each file will be perform the corresponding function.

Even if you don't include any template file by accident, WordPress will automatically add its own default settings to the site. For example, if you do not add a file responsible for comments, the engine will find its variants of this function in the directories - for example, wp-comments.php. Then “alien” comments will be cut into the structure of your site and will not meet the template requirements. To prevent this from happening, you need to add all the main files to display the different components of the page:

• header.php - responsible for the site header;
• sidebar.php - sidebars;
• footer.php - resource footer (bottom part);
• comments.php and comments-popup.php are comments.

After generating each of these files, for the site to start displaying them, you need to enter data on them in the main template file index.php. To do this, specify in index.php the tags that lead to the named files. For instance:

• to add a site header file (header.php) write the tag

  get_header () tamplate tag;

• for the footer it is the same, but instead of header specify footer, etc.

An example of including one of the template files in index.php will look like this:. You will have to search for separate information for each of the specified key template files. Find manuals for each of the files, as well as samples so that you understand all the functions written in the templates.

Choice of template functionality

Over time, you will face a dilemma of which type of template to choose. The engine provides a choice. Either you can choose a template with a Template Hierarchy attached, or a layout with Conditional Tags.

The first option has already been considered. All php template files are the Template Hierarchy. That is, by following the rules of this hierarchy, you gradually generate separate layout files. Thus, you will create a full-fledged template from a number of functional php components. The hierarchy in this case works on the principle of loading on demand. For example, if you have a category file (category.php) and the user requested it, then this particular part of the site will be loaded in the browser. If not, then the index.php template key file will be loaded.

Thus, you can change the appearance for individual parts of the site using the Template Hierarchy principle. Each page has its own specific ID. Add the file category-6.php to the directory with the theme and when you request a category with an ID of 6, this particular design will open. If it is not there, then the settings will remain standard - index.php will expand.

Sometimes the Template Hierarchy principle is not enough to provide the most comfortable template display. In this case, programmers resort to using the second principle - they introduce Conditional Tags. These tags check a site for certain conditions, and if they are not, they change its appearance. That is, these tags work on the if / else (if / then) principle. So you don't have to add a sea of \u200b\u200bphp files with the number of each category, but you can write conditions for each ID once.

How is the layout of a psd layout in WordPress

Some people like to first create a layout of the future design using various programs, and only then transfer it to a certain engine. This is really convenient, because some applications allow you to generate great designs without any skills. If you already have a psd file, and you want to make it up for the WordPress engine without using code, then you can use the help of one of the popular services.

Please note that this is a paid service, so the template will only be half yours. Order this service only as a last resort, if the layout seems good to you, but you no longer have the strength to typeset it. There are many programmers who are ready to transfer psd to WordPress for a low price and literally overnight.

PSD is a file from Photoshop. It's like a graphic representation of your design. To make it up, you need to add html markup in a text editor. Gradually, you will change each of the points of this markup, achieving the final result, which is shown on the layout. Immediately specify the centering of your template, as well as the sizes of its different parts.

The next step is to add background images. You can also make them yourself using the same Photoshop application. The easiest option is to create gradient background images. Next, start creating your logo. Gradually solve all the requests that have arisen - adjust the site header, footer, sidebar and all its parts, according to the made layout. Do not forget to add important template files to its directory so that the site loads according to your requirements.

Only in this way, gradually learning the basics of different programming languages, you can independently learn how to make a website. Nobody says that you can do it today or tomorrow. Perhaps it will take you months to understand all the features of the layout process. But don't worry - some take years. Now you know the approximate procedure for creating a template from scratch, as well as transferring the psd layout to a ready-made theme for an Internet resource on the WordPress engine.

Hello, today I decided to publish an article on creating a website layout, and which we will then layout and pull on wordpress engine... Therefore, if you do not want to miss the release of these articles, then by all means subscribe to blog updates and after the release of the article you will immediately find out about it. Creating a psd site layout, and creating a wordpress template, is actually a very simple process and I am sure that you can follow my instructions and get yourself a completely unique template.

To create a template, we do not need a lot of knowledge, knowledge of Html and CSS, just read the articles in the topics on this blog. Pay particular attention to the use of DIV tags and SPAN tags.

Now let's figure out what we need in order to create a PSD layout and then make this template for the site. In fact, you do not need much for this, a photoshop program that can be downloaded on the Internet, I hope that this will not be a problem for you and download the source materials for this.

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

Document creation.

Now let's start creating the layout and create a new document. Select the file - create. Select dimensions for the document 960 on 1600 pixels.

We display two guides, left and right. To do this, simply click on the rulers and draw lines.

Now we need to resize the canvas. For this we choose Image-Size canvas and set the canvas size to 1200 x 1600 pixels. After that, fill this area with white using the Paint Bucket Tool.

Groups for the template.

Now let's create groups for the site. Let's create standard groups as in all templates: header, menu, content, side column and footer of the site. To do this is very simple, in the layers menu, click on the folder image, to rename the created group, you just need to double-click on the name and enter the desired name.

Site header.

Now let's start by creating a header for the site. The first thing to do is open a texture named "Texture 1"... And now we need to crop the black background, it's very easy to do this, select the tool "Magic wand" and click on the black background, now right-click on the light area and select the item "Invert the selection".

The next step is to set the accuracy of our boundaries, select the right mouse button, and the item to refine the edge. And set all the settings as shown in the picture.

Now we choose “ layers - new - copy to new layer". Now take the layer with the mouse and drag it onto our drawing.

The next step is to flip the drawing. To do this, select Edit-Transform-Rotate 90 degrees counterclockwise. After that, by pressing the left mouse button, you will need to move your layer, as shown in the picture below.

Now we need to increase the saturation of our image and for this we go to the tab Images - Correction - Hue / Saturation... Now we need to reduce the brightness of the picture to -100. And this is what we should get:

Now let's write our website logo. For this we need to install a new font. I think you have already downloaded the source file and there is also a font file in the archive. First thing you need to do is unzip the font. Now we need to go to the folder (most often it is C: / windows - Fonts Drive).
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 near the left guide. Here's what I got.

Now let's create a menu on the right side. It will consist of three main points and this is Home, Contacts and about the author. Select the Text tool again and click them in the right place. The color is white and the font is Wide Latin and the size is 18 pixels.

Create a new layer. Now take the "straight lasso" tool and select the button around one of the labels.

And fill the selected area with 2A2A2A color. Now change the order of the layers, transfer the layer with the inscription above the layer with the fill.

The main content of the site.

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

We open picture 3 and place it below all layers. With the help of transform, we increase the size of the picture until it fills all the space.

Now adjust the brightness and contrast of the texture. To do this, press the buttons Ctrl + Shift + U... Choose Image - Correction - Curves.

We set the settings as in the picture.

Create a new layer and now we will select the content area with you. The content area will be white and 660 by 1200 pixels. To do this, select the "rectangular area and style - specified proportions" tool, where we must enter the dimensions of the field, and then fill the field with the "Fill" tool.

Now we need to set a stroke for our field. Select the layer on which our picture is located and click on the "Add layer style" button, in the drop-down menu select Stroke.

And set the following settings - thickness 1 pixel and color c8c7c7.

Now you open picture 4, using scaling we reduce the size, it should be about ten pixels larger from the white field on the right and left. At the top and bottom, you need to indent 50-60 pixels.

Now we press the combinations of buttons Ctrl + Shift + U to desaturate the texture, and adjust the brightness using curves. Settings as in the picture.

Select the layer with our white canvas, right-click and select the item " Select pixels».

Now select the gray layer and click selection - modification - compress, and set it to shrink by three pixels. After that, we need to invert our selection, we already did this, and it's easy to do this, choose Selection-inversion, press the button Del... Here's what we should get:

Now create a mask for the same gray layer.

Select a black-and-white gradient and left-click to draw from the middle to the bottom of the page and thus smooth the transition.

Now let's create the page navigation buttons. To do this, we just need to draw a black rectangle, you can choose the size at your discretion. Also in each button you need to register the name of the pages. For the inscriptions, use the font Times New Roman and size 18 pixels.

Now let's open a picture with icons and add them to the opposite side of the main menu. Now we need to indent the content on both sides by twenty pixels. Now we need to add a title to our first article, the text color is black. For the date and number of comments, I used the color cb8154.

Now, draw a line to separate the title from the main content of the site. In order to draw a straight line, you need to select the pencil tool and hold down the Shift key and draw a line by pressing at the beginning and drawing to the very end of the line.

Now we need to create a place for the preview. To do this, create a rectangle with the dimensions we need, I decided to make 165 x 165 pixels, and fill it with black. Apply settings to it: stroke and shadow.

Stroke.

Shadow.

Now let's add some free text. Here's what we should get:

Now after the end of the articles, you need to separate the 30 pixels and the gray color (СССССС). Then draw four 32 x 32 px squares and fill them with 8E0A13 red.

Drawing a search form.

To do this, we just need to draw a rectangular area of \u200b\u200bwhite color, apply an inner shadow to it.

Now we draw a red button of the same size 32 by 32 and red and enter the word “ Search».

Sidebar.

On a new layer, draw a rectangle 270px wide and fill it with 1F1F1F color. Also add a title that is the same 270px wide and 25px high, filled with black.

Now we need to write categories for the blog. Text in Times New Roman font, 16 pixels in size. You need to add a picture to each menu item. We choose " Arbitrary figure"And select the shape of the raster point" Ornament 4”And fill it with 818181.

Site footer.

We will not bother too much with the footer, just fill the entire field with black and add a menu with Times New Roman font, 18 pixels in size and E6E6E6 color.

If you want to download a template that has turned out, then click on the button and a download link will be available to you. This concludes the article and I think that you now know that the first step to create a wordpress template is to create a PSD site layout.

This article will walk you through how to create the simplest WordPress theme. Although the Codex provides extensive documentation on this subject, it seems a little daunting to a beginner to me. Therefore, in this "tutorial" I will tell you how WordPress themes work and show you how to adapt a raw HTML template for them. In this case, knowledge of PHP is not required from you, but it is good if you know Photoshop and CSS to create a design.

1. Frontend blog

Before we get started, let's take a look at the default WordPress theme and understand what it consists of. Let's mark the elements (header, post title, search form, navigation, footer, etc.).

Standard Frontpage ( index.php)

Standard Single ( single.php)

2. Photoshop layouts

Based on the look and feel of the default theme, design Photoshop layouts for your blog. For this example, I'm using GlossyBlue, one of my free themes. Download demo.zip to see the finished Photoshop file.

3. HTML and CSS

When the PSD design is ready, create an HTML + CSS template for each page. Following the steps of this instruction, you can use my GlossyBlue HTML files from demo.zip... After unpacking the archive, you will see index.html, single.htmland page.html... Next, I will use them to turn them into a template.

Why create static HTML first? This is mainly necessary because it will greatly simplify the development process. I usually create an HTML file for each template, check their validity (HTML and CSS markup) in all browsers. After that, all that remains is to cut and paste the WordPress code. So you don't have to worry about HTML or CSS errors.

4. How the WordPress theme works

If you go to the default theme folder ( wp-content / themes / default), you will see many php files (called template files) and one file style.css... WordPress usually uses several template files ( index.php , header.php, sidebar.php,and footer.php).

More details in Codex: "Site Architecture" and "Template Hierarchy".

5. Duplicate template files

Copy the HTML folder from GlossyBlue to the folder wp-content / themes... After that go to the default theme directory, copy comments.php and searchform.php to folder glossyblue.

6. Style.css

Go to the default theme folder, open the file style.css... Copy the text commented out at the beginning of the file and paste into style.css GlossyBlue themes. You can change the title and author information if you want.

7. Splitting files

Now we need to figure out where to split HTML files into parts: header.php, sidebar.php, and footer.php... The screenshot below shows a simplified version of my index file, as well as the principle of its division.

8. Header.php

Discover index.html... You need to cut the section from the top to where it ends, paste it into a new php file and save it as header.php.
Go to default theme folder, open new header.php... Copy and replace the tags where the php code requires it: title, link, stylesheets, h1 and div class \u003d description.

Navigation menu (wp_list_pages) Replace tags li at ul id \u003d nav on ;

9. Sidebar.php

Return to index.html, cut the code where it starts form id \u003d searchform and before the tag is closed div id \u003d sidebar, put it in a new php file and save as sidebar.php.

• Replace form id \u003d searchform with all content on.
• Replace tags li categories on
• Replace tags li archives on

10. Footer.php

Return to index.html... Extract from there the code from div id \u003d footer inclusive with div tag id \u003d footer to the end / html then put in new footer.php.

Recent entries Here I used query_post to display the 5 most recent blog posts.

"Latest comments" "Recent Comments" generated by the plugin (included in the theme folder)

11. Index.php

Now in your index.html should only stay div id \u003d content... Save the file as index.php... Enter the lines: get_header, get_sidebarand get_footer in the order they appear in the pattern.

12. Parsing the cycle

The loop displays blog entries sequentially based on your settings. The screenshot below illustrates how it works. Initially, the loop checks for the presence of records and if it does not find any, it issues a message "Not Found".

13. Copying a cycle

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

14. Theme preview

Congratulations! You have created the public part (the main part of the template). Now go to the admin panel, go to the bookmark Design, you should see a GlossyBlue theme. Activate it and go to the public section to see the result in 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 theme. But it seems easier to me to use the just created index.phpby saving it as single.php... Discover single.php from the standard theme and copy the template tags where you want. Next, connect comments_template... The following screenshot shows the changes I made:

16. Page.php

Now new single.php save with title page.php... Remove post date, comment form, next / previous links. That's all - your template. page.phpready.

17. Deleting HTML files

Delete all HTML files from folder glossyblue(we won't need them anymore). This is technically enough to create a basic WordPress theme. You may have noticed that there are more PHP files in the standard theme. Well, in fact, you don't really need them if you need a simple theme. For example, if search.php or 404.php will not be in the theme folder, WordPress will automatically use index.php to display the page. Read the Template Hierarchy for more details.

18. WordPress Page Template

For a final example - I'll show you how to use a Page Template to create an Archive page that will contain a list of all the posts on your blog (handy for a sitemap). Copy archives.php from the default theme folder. Remove unnecessary code and you end up with something like this:

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’t 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 accessto 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 instantaneously. 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 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.