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

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

You will also learn about the basic technical requirements for WordPress themes, what should be the template to make it work on the WordPress core. As a result, you will be able to create a website with your own theme, which will exactly meet your requirements.

Please note that this manual does not include a description of adding a ready-made theme - this is a manual for generating your own template. If you have downloaded the theme and do not know how to install it, then go to the WordPress admin panel, in the section “ Appearance” and add one of the available skins there. And now we will analyze in more detail what a theme is, why it is needed and how to create it yourself.

What is the purpose of manually creating a theme?

A theme (template) is a collection of functional and style files that together define the design of a resource. The theme determines how the site will look, so it is very important to approach the process of creating a template correctly. Many 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 a very comprehensive answer to it: "To make the perfect template that fully meets your requirements."

When you buy a design or download it from a catalog free templates WordPress, you usually sacrifice quality. As a rule, such templates do not have everything suitable 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 do not like. Therefore, it is better to do your own right away. 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 “medical” – you will know what the site has inside. Understand which elements are responsible for what. Then the site and you will talk on You. Familiarize yourself with WordPress tags, structure, and cycles. Or maybe you want to do it professionally and start making templates for a living.

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

• learn all about HTML, CSS and something about PHP;
• you can 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?

When writing a template, it is very important to follow the official rules. Violating code, inserting a tag in the wrong place and skipping it - this can harm the design and completely spoil its appearance. You should be well acquainted with the rules for writing PHP code, as well as HTML, if you are not already familiar with these languages. In addition, you have to deal with cascading tables css styles, so remember their basics too - there is a lot of information on the Internet about this. Well, and the last least important requirement - create a site like a designer, and not like a schoolboy, so that you get a serious project. Otherwise, there is no point in taking this case.

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 features(functions.php), style files and images. To find data on a particular topic, you need to go to the appropriate directory. This will place the “Western” theme in the wp-content/themes/western/ folder.

Before you start, you should at least take a look at the structure of pre-made themes at least a few times. The default WordPress site comes with two default templates that you can review. This is the Default and Classic template. Open their files in the desired directory on the server and compare their differences.

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

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

Let's analyze each of these files in more detail to understand how the layout of a WordPress theme goes.

Rules for creating a style.css file

First, it must conform to all CSS markup features. This file determines how your site will look like. But it will not work if you do not add a description of the created template to it. This first WordPress feature, which must be taken into account when transferring the psd layout to the WordPress engine. You have to specify the following parameters:

1. Template name.
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 social media profile.
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 extensively.

To create the simplest WordPress theme, just add an edited version with a single 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 comply with the Classic template. Therefore, you will need to upload the files to the wp-content/themes/classic directory.

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

Features of the additional functionality file functions.php

Templates don't always use the functions.php file, but in most cases it is needed. It must be placed in the directory with the appropriate theme. Please note that if this file is present 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 area 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. Usually, this is changing the color scheme for a WordPress site, changing the font, and much more. But there are many uses for this file. However, that's a completely different story...

Features of php template files

PHP format 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 now the creator of the theme, only you will determine which and how many template files to choose. After selecting them, new functions will appear in your admin panel. The fewer files you choose, 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 the site, or try out your own psd layout, then you only need two files in the template directory:

1. style.css
2. Index.php

Experienced webmasters manage to change 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 respective function.

Even if you don't accidentally specify a template file, WordPress will automatically add its own default settings to the site. For example, if you do not add a file responsible for comments, then the engine will find its own versions of this function in the directories - for example, wp-comments.php. Then “foreign” comments will crash into the structure of your site, which will not meet the requirements of the template. 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 - footer of the resource (its lower part);
• comments.php and comments-popup.php are comments.

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

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

  get_header() template tag;

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

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

Choice of template functionality

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

The first option has already been considered. All files php template- this is the Template Hierarchy. That is, 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. 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 has requested it, then this particular site component will be loaded in the browser. If not, then the key template file index.php 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 category-6.php file to the theme directory and when you request a category with an ID of 6, this design will open. If it is not there, then the settings will remain standard - index.php will expand.

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

How is the layout of the 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 specific engine. This is really convenient, because some applications allow you to generate an excellent design without any skills. If you already have a file psd format, and you want to make it under the WordPress engine without using code, then you can use the help of one of the popular services.

Be aware that this payable service, because the template will be yours only half. Order such a service only as a last resort, if the layout seems good to you, but you no longer have the strength to make it up. There are many programmers who are ready to transfer psd to WordPress literally overnight at a low price.

PSD is a file from the Photoshop application. It's like graphic image your design. To make it up, you need to text editor add html markup. Gradually, you will change each of the points of this markup, achieving the final result, which is shown on the layout. Immediately indicate the centering of your template, as well as the dimensions 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 the logo. Gradually solve all the requests that have arisen - adjust the site header, footer, sidebar and all its parts, according to the layout made. Don't 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 different languages programming, you can learn how to make a website on your own. No one says that you will succeed today or tomorrow. Perhaps it will take you months to understand all the features of the layout process. But don't worry - for some it takes 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.

We will see how a ready-made WordPress template is created, ready for installation on hosting. To do this, php files are created on the basis of the index.htm file, each of which is responsible for the corresponding part of the WordPress template. In particular, these are files that control the site header, the appearance of the main page, sidebar, archives, search page, single post, single page and comments. I want to say right away that at this stage it would be nice to have some basic knowledge, in particular, to understand what template tags are.

Before you start studying this lesson, I want to warn you about one ... hmm ... trick of the author of the lesson. When I started translating this cycle of lessons, I was sure that at the end we would have a ready-made template made by myself. But things are a little more complicated. In the last lesson, the author gave WordPress codes not in the form of text, as in previous lessons, but in the form of pictures with explanations. And the whole ready template It is offered to download as a ready-made archive for a nominal fee. I could buy this archive and post it here, but I'm not sure if it's legal. In general, this is the situation. So this lesson will most likely have to be met solely for educational and educational purposes.

Designed site layout
So, in the first two lessons, we first, and then with the help of HTML and CSS tools. Click on the image below to see what the layout of the site looks like.

All WordPress template files
Now it remains to create a WordPress template based on the layout of the site. The picture below shows standard set wordpress template files. In the previous tutorial, we created a folder images and file style.css. We also have a file index.htm, from which code fragments will be taken and copied to the appropriate files php. And then later in php files are inserted by WordPress commands and thus formed php wordpress template files.

Editing the style.css file
Insert at the beginning of the file first style.css template information. This is a standard code that is edited according to your data (template name, url, description, information about the author).

Header.php
This file is responsible for displaying the site header. The essence is this, a piece of code is taken from a file index.htm(above and including

) is inserted into the file header.php and after that they are integrated into the WordPress command code. They are marked in red in the picture. Click on the picture to view in large size.

Index.php
This file is responsible for displaying what the user sees on home page site. The file is generated in the same way. index.php. Copying a piece of code from index.htm and filled with WordPress commands. Click on the picture to view in large size.

sidebar.php
This file is responsible for displaying elements in the sidebar. We also cut the code from index.htm(whole div id="side") and paste it into the file sidebar.php. Next, as before, insert the WordPress commands. Click on the picture to view in large size.

Archive.php
Responsible for issuing archival records of the site. To create this file, we completely copy the contents of the file index.php and insert into archive.php, and then insert a piece of code (7 lines) between the lines and

Search.php
This file is responsible for the search results. To create this file, we completely copy the contents of the file index.php and insert into search.php, and then insert a piece of code (1 line) between the lines and . See how it's done in the picture below. Click on the picture to view in large size.

Single.php
This file outputs a single post. Click on the picture to view in large size.

At this stage, the theme can be installed and tested. You can create multiple posts to test the navigation, buttons, and links.

Live Demo Template
If you click on the picture, you can see the finished WordPress template online.

PS. Guard. And you know, in order to start making designs, you need to master the tools and functions of Photoshop. In this case, Photoshop courses will help you, which will give you the necessary basic level of knowledge.

If you are reading this article, chances are that you have a very beautiful website design, probably made in Adobe Photoshop and save as PSD, JPG, PDF, AI or PNG format. Now you want to convert this image file into a WordPress theme so that you can apply it to your newly created website or blog. You might as well be wishing for PSD to WordPress Converter -But what if you could do this transformation all by yourself and that too is free!

Many people who are good at graphic design come to this point of converting PSD to WordPress themes. And they feel stuck! But it's not their fault. Building a website not only requires the ability to produce great looking designs, but it also needs some programming skills. You must be an expert in at least HTML, CSS, JavaScript, jQuery and PHP programming to turn your PSD file to a web page. The trouble is that most people are either a good designer or a good programmer!

However, don't worry. It's not all that hard to convert PSD to WordPress theme. All you need to know is the right steps to take. In this article, I will tell you the same! Let's start learning.

What is a PSD file?

Those who don't know PSD stands for Photoshop Document. This is the file format in which Adobe Photoshop saves executable files. You can open the PSD files in Photoshop and make further changes to the design as you wish. PSD files are thus sometimes called open files (referring to the fact that these files can be edited).

If you want to make the website design of your dreams, then probably you will choose Photoshop to materialize it. Photoshop is undoubtedly the best and most popular graphic design tool.

What is WordPress?

WordPress is essentially a free blogging platform. It's open source code the program made it easy for even non-programmers to create their own websites or blogs. WordPress is robust and scalable and is written in PHP.

Website design based on WordPress is called topic(and sometimes, sample).

Convert PSD to WordPress Theme

Step 1: Cut the PSD File

Once your PSD file is ready, the first thing you need to do is break it into chunks. What for? Well, because one image will be large in size and take longer to load. In addition, you will have to associate different behaviors with different image segments. So, you need to cut it.

But that doesn't mean you can just randomly cut out an image. You have to do things in a logical way. For example, the header can become one piece, the footer should be separate... then you can cut the background, button and menu, etc.

Adobe Photoshop allows you to use layers. It has a built-in object to slice the PSD and save the resulting segments as separate image files. You can save these images in JPG or PNG formats. If you need transparency to work in any of these segments, then you must save it in PNG format because JPG doesn't support transparency.

When cutting an image, you must be precise. The error of even one single pixel can make two parts unsuitable for a replica.

While slicing a PSD for the purpose of turning it into a WordPress theme, you need to understand that currently css time quite powerful and it can create a range of elements with just a few lines of code. For example, you can create solid color backgrounds, gradient backgrounds, buttons different types, lines, arrows and special characters, only with using CSS. This way you don't need to save these things as images. Fewer images, faster your site will load.

Following YouTube video shows exactly how to slice up a PSD file and save it as different images:

Okay, now that you have the various visual elements of your site design, it's time to move on to the next step.

Step 2: Create HTML and CSS files

Now begins the main coding part of the process of converting the PSD into a website. You basically need to create a web page and assemble all the sliced ​​images in such a way that it looks exactly like your PSD.

First you need to create an HTML file. You can call it whatever you want, but by convention let's call it index.htm. In this file, you will need to write HTML or XHTML code to show different parts of the image from your PSD. To create a foundation layout, you can use DIV elements. DIV elements are very versatile. You can place DIV elements side by side, overlapping, on top of each other. You can align the center of a DIV element to the left and right, and you can position them very specifically at specific coordinates on the web page.

In these DIV elements you can call the saved images and show them as such or as a background in the DIV.

After completing this basic layout of your web page, you should style it to make it the same as your PSD. For styling, you must use Cascading Style Sheets (CSS) rules. With these rules, you can use different font styles, sizes, colors, text shadows, image grayscaling, borders, etc.

To write CSS style rules, you must create another file called styles.css and then call this css file index.htm. Styles present in styles.css will apply to various elements in your HTML files.

Okay, wait! If you don't know anything about HTML or CSS coding, don't worry! These are very simple scripting languages ​​and you can easily learn them online. Below are some of the online resources where you can learn CSS and HTML:

Tutorials for HTML

1. W3Schools HTML Tutorial
2. TutorialsPoint HTML Tutorial
3. HTML.net
4. HTML Dog

CSS Tutorials

1. CSS Tutorial
2. W3Schools CSS Tutorial
3. Tuts Plus
4. CSS Basics

Step 3: Breaking an HTML File in WordPress Theme Files

On the this moment in the process of converting a PSD to a WordPress theme, you would have one HTML file (index.html) and one css file (styles.css). In the third step, you will need to split the HTML file according to WordPress structure theme. Confused? Well, WordPress has a predefined set of files that are named together to create a web page. For example, when displaying a post, WordPress requires the contents of a file header, zip file, sidebar file, and footer, among others. But you have all the code in just one file - index.htm. So you will need to redistribute the code index.htm to various wp files. It's basically a cut-paste job! Here is a list of some of the important theme files for WordPress:

• archive.php
• categories.php
• comments.php
• footer.php
• header.php
• index.php
• page.php
• search.php
• sidebar.php
• single.php
• style.css
• 404.php

In order to create a core WordPress theme, you would like to create at least header.php, footer.php, sidebar.php single.php and index.php

Simply create these PHP files in any notepad text editor and copy the relevant code from index.htm to these files. The code, create the heading part will go in header.php, footnote code will go to footer.php... so on and so on.

If you are not very familiar with PHP, you may find it difficult to create these files correctly. There are some really good and free online lessons for learning PHP. W3Schools and PHP.net provides easy to understand PHP help. You can go through these tutorials to get a feel for PHP.

Following youtube video will help you understand how to set up a "naked WordPress theme" (it basically means -A empty WodPress theme.

Step 4: Adding WordPress Features and Tags

Now it's time to convert the simple PHP files into WordPress theme files. To do this, you will need to add WordPress tags in the files. But you may ask what exactly are WordPress tags?

As I said before, WordPress is an excellent and reliable platform. It gives you great amount built-in functions that you can easily call and get things done.

Let's look at an example to better understand it. On the home page (index.php), you can show the list recent posts. This list should automatically change how and when you make a new post. You can write your own PHP functions to extract post data from the database and show it on the main page. But the creators of WordPress have made your life easier! You won't have to write your own detailed functions. Just use wp_get_recent_posts($arg, $output) from WordPress and see a list of recent posts displayed!

WordPress has comprehensive online documentation that gives you information about all the features and other items available in WordPress. The documentation also contains many examples and is therefore very easy to understand. Follow the links below to access this documentation:

• WordPress Template Tags
• WordPress Functions Link

Once these theme files are ready, you should place them in a folder, which should be the same as the name of your new topic. This folder can also have other folders to store CSS files, JavaScript files and image files.

You can also include in an image file named screenshot.jpg or screenshot.png. This file will be shown as a thumbnail image of your theme. It's easy to learn how to take a screenshot.

The list of files in a typical WordPress theme might look like the following:

You have to upload the theme folder in the folder /wp-content/themes WordPress installations. For example, if you name the theme Minerva -Then the theme files should be in / wp-content / themes / Minerva

After uploading the theme folder, go to your WordPress dashboard and then go to Appearance > Themes. Here, you will be happy to see your own design of a new theme, among the themes available for activation. Just select a theme and activate it.

Take a look at the following video to see the further process:

Step 5: Add more functionality like search and custom features

Your WordPress theme is already up and running. The journey from PSD to WordPress theme has been completed. But you can still add more functionality to your topic.

For example, you can create search.php a file with code that displays search results from your site.

In addition, you can create your own PHP functions and use them in various other PHP files. You must create a file functions.php to keep custom functions in one place.

In order to deal with 404 (page not found) errors, you can create a file 404.php. WordPress will show the contents of this file whenever someone tries to access your site's URL that doesn't exist.

You can also add some JavaScript functions. JavaScript is the most widely used client-side scripting language. You can write JavaScript functions in files .js and call these functions in your PHP files. For example, form validation is something that is usually done with JavaScript. If a user is trying to find something on their site without typing keywords in the search box, it's JavaScript that tells the user that she should enter search criteria.

After these steps, you can easily create your own WordPress theme by yourself. These steps will convert the PSD file into a functional WordPress theme. However, some people are looking for free PSD to WordPress converters. There are many companies out there that claim to take a PSD file and turn it into an accurate theme. If you don't want to get into the hassle of learning how to program, you can just give your PSD to these companies. But of course they charge for it!

Free PSD to WordPress Converters

I stumbled upon software Elemente by DivineProjects. You can download this program for free and it will convert your PSD into a ready-to-use full-featured WordPress theme. This software works like a Photoshop plugin.

I hope this article was helpful to you. If you have any questions about this topic, please feel free to ask. I will try my best to help you. Thank you for using TechWelkin.

Just a few years ago, a new line of services appeared that offer to automatically convert your website design from a Photoshop file. .PSD into code HTML + CSS is free. It used to look like a clumsy attempt to automate work with best quality, but now these services have evolved to offer full integration with content management systems (such as WordPress).

In this article, I will introduce you to some pretty good services that will help you save time and money.

1 DevPress

The author of this service is Tung Do, an excellent WordPress designer and developer who made me happy with his new product. The service it offers is capable of: Theme design, XHTML/CSS coding, XHTML-to-WordPress theme development and site management.

2. WP from PSD

A team of professional coders will help you migrate your design to a standard cross-browser WordPress theme. All work is promised to be done to the highest standard. low prices and in as soon as possible. We just have to trust the guys :)

3. Coding People

The service offers work with static XHTML, HTML5 and also offers a ready-made set of templates for an online store. Codingpeople is considered the German authority on code quality.

4. WP Canvas

This service assures that it will easily turn your design into a high-quality cross-browser layout that is compatible with W3C standards Valid WordPress Theme.

5. PSD to WP

If you have created an excellent website design and you need a fast and high-quality layout, the PSDtoWordPress service will help you with this. Turn your design into a ready-made WordPress theme with PSDtowordpress.

6.PixelWP

PixelWP.com provides its customers with an excellent PSD to wordpress template converter that you can rely on. You can be sure that your design will be implemented with high quality and in a timely manner.

7. PSD to Any

The service can generate a ready-made WordPress theme from the attached design layout. If you have no programming skills and working with theme files, this service will definitely come in handy!

8. PSD 2 HTML

The service was first launched in 2005. P2H.com / PSD2HTML.com was the first of its kind and has attracted over 50,000 customers.

9.HTML Cut

HTMLcut is a step by step service to implement finished code from your design. You are uploading PSD layout, - the rest is up to HTMLcut.

10. RapidXHTML

If you want to turn your design into ready blog or a site on a CMS, RapidxHTML is just right for you. The service supports such popular platforms as wordpress, Blogger, Drupal, Joomla and Magento.