- blog name.

- adding a link to the blog's rss feed.

wp_footer()– this is necessary for the WordPress core itself, which adds the elements it needs there.

Step 3 – main wordpress template file

It's time to create the main WordPress template file that will connect the top and bottom of the site. Create a file index.php. This is one of the two required WordPress theme files (the other is style.css). Paste the newly created file with the following code:

This code helps WordPress get information where to connect header.php And footer.php. Let's add a few more lines between these tags:

This piece of code gets information about existing blog posts and, if there are any, displays them. If they are not detected, then the part of the code after , which lets us know that the blog is still empty.

Also added tag , which displays navigation links so users can read previously added posts.

Example of a WordPress theme

Now we have a semblance of a theme, let's see an example of how the created WordPress theme works.

We have four files in our theme, which is quite enough for a start. In the next article we will add the file single.php, which will be shown when a specific post is displayed. This file will include, unlike the file index.php.

Greetings. This article will answer the question of how to create a unique template for WordPress, beautiful and different. You will have to try and strain your brain a little.

How to create a unique template for WordPress - let's get started

Below is a list of steps on how to create a unique WordPress template with your own hands and for free.

1. Change pictures.
2. Change the template name.
3. Make minor edits to styles.

Let's start analyzing each point in order.

Changing pictures

I’ll look at the simplest point using the twenty eleven template as an example. We replace stock images with our own converted ones. It is necessary to change the header, footer, background and other small ones.

But I can’t come up with a specific solution, my template has a minimum of pictures (and those that exist are huge). In general, you need to replace most of the images with your own. Let's look at the two elements that are replaced:

• The first is through the admin panel itself.
• The second is through code.

If you understand the principle, then great respect to you.

Through the administrative panel itself

Modern themes have a good function of settings through WordPress itself, why not use them? Go to the administrative panel of the blog, appearance and configure.

If the theme is made for people, then the global design settings will be here, and we’ll deal with the little things below. In the section on the example of Twenty eleven.

1. General theme colors. Settings for basic elements (headings, captions, etc.).
2. Header image, that is, in the header.
3. Background image. It is not present on all themes; it can be customized either with a picture or just with color.

At this stage, this is what I got. Let's move on.

Changing pictures manually

Suppose you are not satisfied with the picture of some element in the template, and you want to change it. What to do? We'll figure out. For example, I will take the output of a picture of the number of commentators.

The system applies to all topics.

Right-click on the element and look for its output in the code using the “view code” tool.

1. The element itself, right-click on it.
2. Select the “view code” option.
3. This is the HTML output code itself, we don’t pay attention to it.
4. This is the treasured address where you need to go with a replacement. The file you are looking for is bubble.png, located in the images folder in the theme itself.

That is, you need to create the same file, with the same name, and replace it. I hope you know how to use file managers like FileZilla. I wanted to make a picture that displays the number of comments with a star and an outline. I made it in Photoshop and saved it as an image with the name bubble and the extension png.

Done, I opened Filezilla, and went to the active twenty eleven topic in the images folder (which we recognized above). and simply drag and drop the new image into the folder, with replacement. All details are in the screenshot.

If everything is done well, then the new picture will be displayed on the site, here is a snapshot.

As you understand, you can change any picture using this method if there are no settings in the administrative panel.

Changing the template name

You can only change on free themes, this is important.

There are two points that need to be done:

• Reworking the title in the style.css file
• Change the name of the theme folder.

Reworking the names in style.css

To do this, go to the editor ( reminds me of the appearance editor), and find style.css.

On the screen we see the inscription, everything needs to be changed here. Every style.css file contains template information at the very beginning. It needs to be changed to at least these lines.

Theme Name: moi-template Description: Standard version 1.. License: GPL

It should look like this after replacement.

You fill in your details, don’t take mine, because we make the template unique. At a minimum, change the name, author, and website.

We figured it out, let's move on to the next point.

Changing the name of the theme folder

We do it through a file manager, I use Filezilla. In the previous paragraph, we changed the name of the topic in the line:

Theme Name: moi-template

Need an original name twentyeleven change to a new one, in my case, moi-template. Go to the FileZilla folder themes, and find the original name twentyeleven.

And we change it to a new one.

If everything was done correctly, it will work. The theme for search engines will no longer be standard, but unique.

Minor edits to styles

I can’t come up with a single solution on how to create a unique template for WordPress, you just need to look at the template purely visually and see what you don’t like. I look at the sidebar.

Really, not really? I want to make the heading font larger, because they are small and blend into the background. We see all the steps in the picture below.

1. Select the element that we want to edit. Right-click.
2. Click on “view code”.
3. The whole style of this title.
4. The style name you are looking for.

Open the style.css file. We look for the name of the style using the key combination CNTRL + F.

I want to make the font larger, make a solid line under it, change the color and thickness of the text. To do this, I change or add the following parameters.

Color: #1a1a1a; font-size: 15px; font-weight: 600; border-bottom: 2px solid #271eb1;

Let's look at the lines of code.

1. Color change.
2. Change of size.
3. Change text width.
4. Adding an underline.

We change or add parameters to the style accordingly. It should turn out like this.

All changes will immediately appear on the website.

My task now is not to teach layout, this will take a lot of time and articles, but to show the very principle of how to make a template unique.

So with all the other elements, bring it to perfection. I show what happened within the framework of this article.

This article answered the question of how to create a unique WordPress template. And the standard theme can be called your own.

If you have any questions, please leave them in the comments. Good luck.

Hello, dear friends and readers - site!

Today I will show you how to create a WordPress template from scratch.

To be honest, I never thought that I would understand this, but the thirst for knowledge got the better of me. A strong desire to understand the device and implement a bunch of ideas forced me to sit down and fill in all the gaps in my head.

Every day new features and ways to implement them in WordPress templates appear. Of course, it is physically impossible to study everything and keep track of everything, but having an idea of ​​how everything works will make it much easier to navigate any topic.

Preparing to create a template for WordPress.

Before you start creating a template for WordPress using , you need to connect to an active server on the Internet or local installed on your computer.

In order not to have to worry about transferring files via FTP, I advise you to develop templates on a virtual machine.

From the point of view of editing and editing code, I highly recommend using Notepad++. Thanks to code highlighting and a simple interface, this program is preferred by the largest number of Webmasters.

Go to the root directory containing your WordPress installations, go to wp-content => themes and create a folder there called “New Theme 3.0”. Inside this folder place the following files (extensions – PHP, CSS, PN G):

Step-1 style.css

The file will contain all the style elements of the WordPress template. This is what we will use first to declare the template name, author’s name, link to the site with description and version number:

This information is subject to change at any time. The main thing is that everything is commented out ().

Now, in this file, you need to create a few basic style definitions, which will later be implemented in some PHP files of the WordPress theme:

This code uses the body tag only to specify (define) the fonts used on the site and the background color (everything changes to suit every taste). Next, we declare the style attributes for the link, as well as some of the headings we'll use throughout our theme.

#wrapper - will be responsible for the full size of the web page. With #header, everything is obvious, this is the title, and #blog, these are the latest posts on the main page.

The remaining header and footer styles # (headers) and sidebar will be applied to the files corresponding to their names, which we will look at a little later.

Step-2 header.php.

Now, we will create a file - which will contain the logo and regular navigation:

In fact, there is no point in explaining this code in detail. You just need to remember that it must be present in all WordPress themes. But, if you are interested, I will tell you.

At the very beginning, we declare the document type and standard code that will be used to display the site name entered in the WordPress admin settings. Next, there is PHP code that allows you to work with tree comments.

Step-3 Adding custom navigation.

Now that we've coded in our basic information, we can add a custom navigation menu. But first, you need to open the functions.php file and write a special function:

As you can see, I commented out sections of the code. The first part, add_action , is used to add support for a custom menu, and the second part registers the primary menu area itself. Next, let's move on to the implementation itself in the WordPress template.

To create a menu, you need to add the line below the previously written code in the file:

Let's break it down a little. The main function that is used here is wp_nav_menu. The variables sort_column , container_class , and theme_location are used as arguments. Sort_column - guarantees the display order, which is set in the admin panel. Container_class - allows you to select your menu. Well, theme_location simply assigns the primary-menu the values ​​that we manipulate in real time.

Step-4 Navigation style for WordPress template.

Thanks to the previous actions, our WordPress theme has acquired custom navigation. But the regular menu looks simple and not attractive. To fix this, we will create a nav class in the .

As you can see in the .nav , we've made basic statements such as background color, navigation width, alignment, and position of the element on the monitor. Next, we set the order of placement of the main elements and pop-ups.

The final step is to add styles for links from the drop-down menu:

In .nav ul ul , we set the position to absolute and make the first dropdown link 100% so it appears below the main one. We also changed the background of the drop-down window to make it different from the existing one. To the general values, the attribute z-index:99999 has been added, which causes drop-down links to open above other objects.

At this point, adding styles for the custom menu of the WordPress template is complete.

Step-5 index.php.

The index.php file will be responsible for the main page of our site. It will contain the code to enable the header, footer, and sidebar, which we'll talk about later. It will also have the function of including the latest blog posts and displaying thumbnails corresponding to them.

The following lines of code are used to display all the information in , sidebar.php and footer.php where you place them in the WordPress template:

In principle, understanding this code is not so difficult. After calling , we use our #blog, which was originally created in . Then we add a loop for displaying the latest blog posts and code for the header, which we wrap in

.

Here, there is a piece of code that displays thumbnails in posts on the main page of the blog. For now, it is inactive, but the next step is to use functions.php to make it work.

In the fifth step, we added a piece of code that is responsible for displaying post thumbnails on the main page of the blog. At the moment, nothing like that happens, since it is deactivated. To activate it, you need to open the functions.php file and below the previously installed navigation menu code, write the following:

Having examined the code carefully, its purpose immediately becomes obvious. The first line adds thumbnail support to your WordPress theme, and the second line sets the exact dimensions of the image.

Step-7 sidebar.php.

I think you guessed that the sidebar.php file will display all the information that we want to see on the sidebar. Since we have already used it in index.php, all that remains is to place the code in a file and our sidebar will be displayed on the main page of the site:

Yes, that's all the code you need to add to sidebar.php to make it functional. Now, I will explain its meaning.

Using div, we call the styles from the file, and the code below gives us the opportunity to place widgets from the WordPress admin area in the desired sequence.

But, like many functions, to make it work, you need to write the following code in the functions.php file:

This code simply tells WordPress to register the sidebar we declared in sidebar.php. For general information, WordPress can easily run multiple sidebars in one theme.

single.php is what will be used for one post page. The code below will be very similar to the one we put in index.php. The only difference is that we have added a comments template with a div and the code that should include comments.php:

With the release of WordPress 3.0, the developers decided to make life easier for the authors of WordPress themes and templates. They have moved to a single standard for comment forms.

The code below should be placed in your comments.php file:

This will add a standard comment form to your posts.

In the page.php file, we will place the code that will be responsible for the static pages of our site. It will be almost identical to the one that was placed in single.php. The only changes are the removal of the comment template and the addition of code that processes pages rather than posts. Everything else will be the same:

The category.php file is used to display messages from a specific category or archive that the reader accesses. Here, the bulk of the code will be similar to the page.php and single.php we coded above, except for the bit at the very beginning:

The code snippet below is the only thing we added after the main loop:

Here we're using a bunch of if/elseif statements in PHP that show what you're viewing on the blog. For example, if we look at a category called “”, then it will be shown in h2 Archive from category: “” in front of all entries, breaking them down by date or author.

Step-12 Setting up the background of the site.

With the advent of WordPress 3.0, a feature was created that makes it possible to change the background of the site from the admin panel, using an image or a regular color. To do this, you need to insert the following code into the functions.php file:

So, custom backgrounds are included. As a bonus, we will add below code that makes links to archives, comments and tags from the RSS feed available:

To finish creating the WordPress template, we'll add a piece of code to footer.php that uses the #footer that was declared in . Our footer will contain only basic copyright information, as well as an RSS feed of news and comments:

This completes the creation of the simplest template (theme) for WordPress.

To check its functionality, you can download the archive with the created theme and activate it on your resource:

Have you managed to create your first template for WordPress?

Friends, while I write a new post, you can read the following:

That's all for today.

Anyone who liked the article can subscribe to blog updates to receive notifications about the release of new material to their email inbox.

Until new articles...

Best regards, Denis Chernikov!

Interesting on the topic:

Please do a good deed and tell your friends about the blog:

96 comments What do you think?

Thank you very much for the article! Very useful information for young layout designers! I read an article on rap... =)

Denis Chernikov replied:
November 3rd, 2012 at 14:38

Please, Alexander! I spent three days puffing and puffing over it, I wanted everyone to understand everything! I hope I succeeded! Rap guy rules!

Alexander Krasilny replied:
November 3rd, 2012 at 15:13

Yes, I noticed that the article is not small and there are a lot of small nuances. If you don't take them into account, then everything will go wrong! I have a friend who does pure layout work, sits in the office and the salary is decent, around 4000-5000 UAH. Moreover, he is self-taught! So I have the desire, but not enough time... =(

The archive could not be installed. PCLZIP_ERR_BAD_FORMAT (-10) : Unable to find End of Central Dir Record signature

This is what is being written after I wanted to test this topic. What's the matter?

With respect and gratitude, Evgeniy!

Thanks for the useful article. In my opinion, it is better to remake a ready-made theme for yourself.

Denis, the template turned out to be a little narrow, on the main page in the footer there are a lot of question marks instead of an inscription, and editing the entry is also displayed only with question marks. Is this how it should be? and it’s not yet in the top menu of the main page and it’s inconvenient to enter the admin panel, only through the editor of the article. But in principle it’s very good and understandable, thank you.

Yulia replied:
November 4th, 2012 at 6:47

I don’t know what’s wrong with the template, but the installed background is not visible on the blog.

And one more thing. Not all code is visible on the screenshots.

But anyway, thanks for the article! You are well done! Good luck in the future!

Best regards, Evgeniy!

Thanks for the info. I'll definitely try it.

Denis, I removed my old theme and installed some complex and new one. Many of the files you describe are missing, for example, single.php, page.php and category.php. Therefore, it is difficult to know what to do in such a situation. But the pictures with miniatures interested me. When I'm on the main page, I can't see the pictures. But as soon as you enter a space in the search and start the search, all the thumbnails immediately appear. What do you think could be the reason?

Hi Denis! Well, this is already aerobatics! Make up your own WordPress themes instead of stupidly downloading a template! But I don’t have time to try this topic myself yet. There is still a lot to be done to implement what is interesting in your website design (up arrow, folding corner, etc.).

Denis, the topic is useful, and my eyes are afraid...

Bookmarked for now...

I came to you by accident, but I’m very glad!!! Thank you very much for the information.

The article is very relevant, well, at least for me. I recently wondered how to create my own theme for WordPress (template), and I found this program - Artisteer. True, this program is paid, BUT, not for Russian people if you understand what I mean.

Denis, have you tried changing the color of the sidebars? or how to do this in more detail, in css

Thank you very much for the article. I was looking for suitable information to customize a WP template. In most cases, just general phrases and without specifics, but for you it’s a different matter!

Denis, in some places your code breaks due to the size of the picture... But happiness was so close!

Great! Thank you very much! I thought that I had misunderstood something.

Denis, hello!

Thank you very much for the lesson. I managed to implement my design) But for some reason there was a problem with inserting photos into posts - for some reason the text wrapping around photos does not work. Is this written somewhere in the template? I just don’t understand what’s wrong... there have never been problems like this before.

Thank you in advance!

Denis Chernikov replied:
March 19th, 2013 at 15:45

Hello, Lyudmila!

I wrote an excellent post specifically for this. It shows how to create a wrap around images and videos in posts. Look through the search or look in the list of articles.

Lyudmila replied:
March 19th, 2013 at 15:57

OK thanks!

From the point of view of editing and editing code, I highly recommend using Notepad++.

I use Sublime Text 2 - something between NotePad++ and the well-known TextMate (Mac OS). I drag the project into the window and it appears as a tree. Very comfortably! Plus a bunch of other features that make life easier than NotePad++! Highly recommend))

Denis, I didn’t understand anything at the first stage. Where can I get all these codes? copy from your print screens? Maybe I can get a template somewhere and edit it?

Thank you very much! I'll try to do everything as written! The individual look is much better))

Good evening. I’m a newbie, and I don’t quite understand how in “Creating the necessary folders and files” to me “Inside this folder place the following files (extensions – PHP, CSS, PNG)” I typed them through Notepad++ and how to transfer them ???

Hello again...how can I do this????:

Inside this folder place the following files (extensions – PHP, CSS, PNG):

The required files are created on the computer desktop using a regular notepad, with the required extension assigned.

I can’t figure out how to place the Files IN A FOLDER. When copying them from Notepad, nonsense occurs. Please explain. Exactly how to transfer from Notepad++ to the files folder.

Why do I have an evil avatar? I’m generally kind. How can I change it???

Hello Denis! I'm a newbie, please tell me how I can create a theme in Word Press, my theme is not displayed in Appearance/Themes...((((

Thank you, the article was very helpful!

just add it to footer.php, otherwise the admin panel will not be visible without it.

Denis, good day!

To be honest, I didn’t understand anything from what was written... The credit for this is not yours - I have absolutely zero knowledge in this area and for me your notes turned out to be a Chinese letter... I’m asking for either some clarification (if you allow) or simply deleting your comment :)

How can I change the template name that is displayed in the left side menu of the admin panel for some themes?

I tried to download your template - neither the background nor the header changes - the data is entered, the color is selected - but no changes happen on the site :)))))

Hello! Could you minimize the topic for me for a reasonable fee? I have an idea of ​​how I want to see your website, I have photos for the theme, but I don’t have the skills to work with Photoshop and HTML

Sergey replied:
March 23rd, 2014 at 1:50

Denis, I apologize in vain, you don’t make a living in layout, you managed to draw such a masterpiece in just 3 evenings, 2 years ago I collected such information bit by bit and here is such a treasure link to you in contact and a deep bow to you for the work done, there are really some shortcomings. But everything is smooth even with all the little things, this article would have taken me 2 years, oh how it would have helped me with my first project. Do you have anything in JavaScript in your arsenal? It’s just that people of your level of education are always more interested in reading and studying information.

Denis Chernikov replied:
March 23rd, 2014 at 12:12

Sergey, I sometimes make a living in layout, but I don’t like digging through already crap code trying to find the thread that killed the entire site! It’s easier for me to do things from scratch than to look for errors on clients’ websites. And for scripts, I have an excellent master who does everything competently and beautifully!

Sergey replied:
March 23rd, 2014 at 23:59

No, I don’t need a programmer, but information for a personal demon. I actually already saw a whole section on Javascript on your website. In general, thank you for your resource, very informative.

Help, I can't edit styles.css from the admin panel. I go to “appearance - editor”, select the style file, but it opens empty. Everything can be edited via FTP, but this is not convenient for me.

help me upload a self-made website on WP (I’ll pay)

Denis, thank you very much for the article! Very valuable and useful information. I will definitely use it when I create my template from scratch.

But for now a ready-made theme has been chosen for the site, and I’m a complete novice... I would be very grateful for your help! So, I needed to display news only from category “A” on page “A”. I copied the index.php page, added a line of code to it, and selected “A” as the template for page. Now only the necessary records are displayed on it, but all the design has disappeared...) so that the design of this page does not differ from the design of the site, do you need to add something to the style sheet? Or did I do everything wrong in the first place? Thank you)

Denis Chernikov replied:
March 30th, 2014 at 21:35

Elena, I don’t give such advice! I have no idea what you are doing there, and it’s not always clear from the description!

Elena replied:
April 1st, 2014 at 16:51

Denis, I’ll change the question: is it possible to display articles only from category “A” on the page with the name “A”, and articles only from the category “B” on the page with the name “B”? Thank you.

Sergey replied:
March 30th, 2014 at 22:37

Elena I’m not sure that this will suit you, but I would solve your problem with the help of 2 plugins Display Widgets is a plugin that determines the display of widgets on any page you need, and this Recent Posts Widget Extended makes a beautiful news output, but I repeat that I would do this

Sergey replied:
March 30th, 2014 at 22:41

Still, after reading and rethinking it again, I realized that this option is not very suitable for your question, Elena.

Elena replied:
April 1st, 2014 at 17:16

Sergey, thank you for your answer! I tried the Recent Posts Widget Extended plugin. A useful thing) I would like exactly the same output of articles, but not in widgets, but on the main page) Thank you!!

Denis, help me understand this topic.

Your topic from the post was taken as a basis. I remade everything to suit myself, everything suits me, but no comments are visible. There is a comment form, they go through moderation, but after approval it only shows the number of comments on the post and the form itself, but the comments are not visible.

I thought I had rubbed something while working with files, but no...

I installed your original, same problem, tell me what the problem might be, I would be very grateful.

PS. I think maybe the issue is that the engine was updated and after the update something went wrong. There is another option to try changing the php version of the hoster.

Denis, thank you very much for the information that is easy to understand. For a long time I have been looking for a site with standard templates that could serve as sources for any topic. Everywhere it is described as follows: an index.html file is created, which is then chopped up and distributed in parts into .php folders. At the same time, regular and dotted text is placed in index.html for the sample. But not a single topic initially contains any text (it is written by the user after creating a page or post). After your article everything fell into place. Separate fragments of the mosaic in my head formed a single picture. Thanks again!

Good afternoon, Denis, I read the article and did everything as you wrote, BUT using your notes and colors, EVERYTHING WORKED. This is good))

QUESTION: How to move the sidebar so that it is on the left, and the second question: do you have an article on how to put your own pictures into your template (that is, there is a design in PSD already cut up, I want to merge it with the template).

Thanks in advance for your answer.

In this article I will tell you how to make a WordPress template without programming knowledge. It will take you a few minutes to create your theme. We will work using one free and simple service.

How to make a WordPress template yourself

Before making a WordPress template using this tool, you should familiarize yourself with what each option does. Here are their functions:

• Site name. In this section, you can select the color of the site title, set the title itself, and also specify the URL to the logo. The logo can be left blank.
• Body Size. Select the width of the site. For correct display, it is better to leave it at the default – 100%.
• Sidebar Location. This option allows you to select the size and location of the sidebar. There are three size options for the left and right sidebar, as well as the option to make the theme without sidebars.
• Third Column. This option enables a third column. There are different options.
• Menu Layout. Here you select the menu layout - there are 4 different options.
• Scheme Overall. The color scheme is configured - backgrounds of different elements, borders.
• TextScheme. Text design scheme: colors, styles and fonts of all parts of the site – headers, menus, main text and others – are customized.
• Tag Cloud. You can turn the tag cloud on and off in the sidebar.
• Archives & Search. The display of archives and search can be configured - show full versions of the test or only announcements.
• Selecting copyright.

So now you know how to make a WordPress template. All that's left is to get it. To do this, click the “Save” button at the bottom, and then, where the preview was, click on the link “Files packed: download theme ZIP file” to download the theme archive to your computer. After that, you can install it on your website.