Greetings, friends.

Today we will touch upon a very interesting topic for many. You may have noticed that I recently updated the design of my blog, I don’t know about you, but I really like it. I created this template in literally a few tens of minutes, and I did not need any knowledge of HTML, CSS and PHP or information on the topic of creating templates.

So, how to make a template for wordpress yourself, without any knowledge?

Before I start, I can't help but mention the various ways to create templates to make the picture as complete as possible.

Method number 1- you learn HTML, learn the structure of templates. Of course, this approach has its advantages, if you have the time and the desire to start with it. Knowledge of HTML has not hurt anyone yet.

Method number 2- order a template from a freelancer. If you have free money, then be sure to choose this particular method. The cost of creating a quality template is from 15,000 to 70,000 rubles.

Method number 3- use special software to create templates. I will clarify right away that this is not the creation of the same type of templates, it is quite possible to create a unique, beautiful template in the program. An example is this blog. It all depends on your imagination.

As you probably already understood the speech, this article will focus on method number 3.

We meet, the program for creating templates - (the version does not matter, I use the second, in my opinion, the fourth has already been released). The program is paid, but we are Russian people (you understand what I mean). I know that there are many lessons on this program on the net, but I'm already tired of answering the same question from my subscribers.

Download the program, run it.

1. Select “WordPress” in the main window of the program.

2. A blank template appears in the preview window, of course, the entire curve, but in the process of work there will be no trace of it.

3. Go to the "Colors and Fonts" tab, choose a color scheme (later we will correct it a little), I love the light gray range of colors. Click on the "Font Sets" button, select the fonts (I use verdana everywhere).

4. Go to the "Layout" tab, here we are asked to select the number and arrangement of columns, as well as the location of the header (by a simple header). I always choose “Two Columns -> Right Middle Side”.

5. On the next tab, we are asked to select the background of the future template. Using this tab, you can create your own or select an existing background.

6. The next tab invites us to customize the template sheet.

Set the width of the sheet (preferably at least 1000 px), its shadow and border.

7. On the next tab, we are asked to customize the header (header or header). Customize your footer using settings.

1. Adjusting the width and height of the header.

2. Using this menu, you can load a previously prepared header into the program, as well as add effects to it.

3. Using this menu, you can add a third-party picture to the header.

4. The name of your site and its slogan.

5. Location of the name and slogan.

8. On the next tab, we are asked to customize the menu (it is usually located under the header). Choose a menu style and fill.

9. On the next tab - "Articles", we are invited to customize the appearance of the content location area (text, video, pictures, tables). Customize it using the settings provided.

1. Image of the article (this parameter does not affect anything, it can be left as it is).

2.Using this menu you can set the style of the content area (with or without stroke).

3. Customize the display of text within the article.

4. Editing various parameters of the content area.

5. Customize the header.

6. Customize the footer.

10. With the help of the next tab - "Blocks", you can customize the appearance of the side blocks (sidebars).

SETTINGS AND EXPORT TEMPLATE

1. Click on the "File" button (located in the upper left corner of the program window).

2. Select “Export-> Export Settings”. Go to the Properties tab and fill in the required information. Go to the “Footnote” tab and uncheck all the boxes.

3. Repeat step number one. Select “Export-> WordPress Theme”.

4. Export the template as a ZIP folder.

Everything. Now you know how to make a DIY WordPress template. Good luck with your creation.

Do not forget to comment on the article. The author of the best, in my opinion, comment (at the end of the week) will receive my paid book "How to Sell Affiliate Products on the Internet and Get 200% Profit" completely free of charge.

VIDEO LESSON “How to make a template for WordPress without knowledge of HTML?

Routine work with documents of the same type can be minimized if they are generated based on Word templates. What they are, and how to create them, our today's material.

Quite often in the course of our activity we create documents of the same type: acts, orders, letters, contracts, term papers, etc. All these documents, as a rule, contain some text or graphic elements - headings, requisites, logos, text blocks, repeated from document to document.

An ordinary user of the Word text editor, creating another document, is forced to use and edit a document that has already been created by someone and contains all these elements, or simply copy the necessary elements into a new document, again, from an old file, while realizing that in this case editing is inevitable.

A template defines the basic structure of a document and contains document settings such as auto-text elements, fonts, assigned keyboard shortcuts, macros, menus, page setup, formatting, and styles. (From Word Help)

This routine can be minimized by creating a document based on a template. Sometimes templates are also called "fishes". However, whatever you call it, templates really allow you to significantly increase work efficiency.

A template can be created in two ways, taking as a basis any document with all the elements present, or starting from a clean sheet, independently including the necessary elements into it.

I will show you how to create a template from scratch, and thus it will be easier to understand the whole process than to modify the existing file. As an example, we will create a simple official letter template. There is nothing difficult in this, if you follow my step-by-step instructions.

So let's get started.

1. Let's create a blank document.

2. Let's save it right away. Go to the "File" menu and select the "Save as ..." command. The "Save Document" dialog box will open, in which we need to select in the "Save as type" field the "Document Template" (* .dot) type (Document Template (* .dot).

This will open the Templates folder, where all templates are saved by default. Give the file a name and click the Save button.

3. Determine which elements (text and graphics) and where exactly will be located in the document.

As a rule, all official letters contain such elements as the name of the organization, logo, details. The text of the letter itself may contain a polite appeal to the recipient of the letter and, in fact, the text of the letter itself. At the end of the letter, the name of the position of the head of the organization with his signature is given. Let's take a similar structure of the letter as a basis.

4. We will place the name of the organization at the top of the document in the center. To do this, we will print the name of our organization in capital letters, for example, "WHITE NOCHI" LLC. Press the Enter key and go to a new line.

5. Below we can insert a dividing line. To do this, click on the "Drawing" button. A drawing panel with control buttons will appear at the bottom of the screen. We are interested in lines, so select the appropriate Line button. The mouse cursor turns into a cross.

Please note: perhaps you will have a so-called canvas inserted - a dotted area for inserting shapes / drawings. To cleverly get rid of the canvas insertion, go to the Tools menu and choose the Options command. Click the General tab and uncheck the Automatically create drawing canvas when inserting AutoShapes option. Click "OK" and close the "Options" window.

6. Move the cursor in the shape of a cross to the name of the organization and just below draw a line from the blinking cursor to the right edge of the field by pressing and holding the left mouse button. The line is drawn.

7. You can leave the line as it is, or you can give it a more elegant look. To do this, on the drawing panel there is a corresponding button "Line Style" (Line Style). Click on it and choose any type.

8. After you stop on any type of line, double-click below this line - in this place the address and details of the organization will be printed. Type in the data that you consider necessary: ​​legal and actual address, telephone, fax, website URL, E-mail, bank details.

9. Now format the typed text according to your ideas. The name of the organization, for example, I selected and assigned the style "Heading 1" (Heading 1). I also centered the heading and spacing the letters by five points.

I reduced the font size of the text under the line to nine points and aligned it to the center. You can see a sample in the screenshot below.

Thus, we have created a permanent (immutable) part of our template, the so-called "header". Now let's move on and create fields in which you will later substitute your data.

On the left side of the template, under the "header", double-click the mouse and type the name of the city, for example, Moscow. Then, in the opposite (right) part of the template, double-click again and insert the date in the place where the cursor blinks. For this:

1. In the menu "Insert" (Insert) select the command "Date and Time" (Date and Time). A window will open in which you select the required date display format, for example July 18, 2006.

2. Check the box "Update automatically". Now, when creating a new document based on this template, the date will already be stamped in accordance with the current time on your computer.

3. On the right side of the template below the date - with an indent from the left edge by about 10 cm along the horizontal ruler - double-click. The cursor will blink, and at this point we will insert a field for substituting the recipient's data.

4. In the "Insert" menu, select the "Field" command. A window will open as in the screenshot below:

5. In the Categories area, select Document Automation. In the Field names area, choose the MacroButton command. In the Display text area, type Insert Recipient's Name and click OK.

Strictly speaking, in the "Macro name" area, one should have specified NoMacro (that is, a command without a macro), but that was not in the list. Therefore, we leave it as it is, at least I have never met any errors.

6. We get the field with our text.

If you have this field displayed as normal text without shading, then I recommend making such a shading. This will allow you to easily define the required fields for data entry in the document later. To do this, go to the Tools menu and select the Options command and on the View tab in the Show group select the Always option from the Field shading list. ).

Below you can additionally insert a similar field of the recipient's address and his position.

All we have to do now is insert a welcome address to the recipient of this letter, the text of the appeal itself and the sender's signature below. Try to insert these fields into your template yourself, based on the instructions above, and do not forget to save the resulting template.

For example, you can take a look at the screenshot of the template that I got:

Now, to use this template to create a letter, you need to go to the File menu and select the New command. A task pane will appear on the right, in which you need to select the "General Templates" option (On my computer). A window with all available templates will open. Select the template you created and click "OK". A new document based on your template will be uploaded to Word. Add your data to the appropriate fields and enjoy the automation.

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 made me sit down and fill in all the gaps in my head.

Every day there are new features and ways to implement them in WordPress templates. Of course, it's physically impossible to study everything and keep track of everything, but having an idea of ​​how everything works, it will be 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 a working server on the Internet or a local one installed on your computer.

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

From the point of view of editing and editing code, I highly recommend using - Notepad ++. Thanks to its highlighted code and 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". Place the following files inside this folder (extensions - PHP, CSS, PN G):

Step-1 style.css

The file will contain all the elements of the WordPress template style. We will use it first to declare the name of the template, the name of the author, a link to the site with a 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 some basic style definitions, which will be further implemented in some PHP files of the WordPress theme:

This code uses the body tag, only for the specification (definition) of the fonts used on the site and the background color (everything changes for every taste). Next, we declare the style attributes for the link, as well as some of the headings that we will use throughout our theme.

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

The rest of the footer and sidebar headers and footers # styles will be applied to their respective filenames, which we'll look at a bit later.

Step-2 header.php.

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

In fact, there is no point in explaining this code in detail. You just need to remember that it must be present in, in all WordPress themes. But, if you're interested, I'll 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 comes the PHP code that allows you to work with tree-like comments.

Step-3 Adding custom navigation.

Now that we have coded into 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 have commented sections of the code. The first part, add_action, is used to add support for the custom menu, and the second, registers the primary menu area itself. Next, let's move on to the actual implementation in the WordPress template.

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

Let's take it apart a little. The main function 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 values ​​that we manipulate in real time to the primary-menu.

Step-4 Style WordPress navigation template.

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

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

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

In the .nav ul ul, we set the absolute position and make the first dropdown 100% so that it appears below the main one. Also, we changed the background of the dropdown window to be different from the existing one. In addition to the common values, a z-index: 99999 attribute has been added, which forces dropdown links to expand above other objects.

This completes the styling of the custom WordPress template menu.

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. Also, it will have a function to include the most recent blog posts and display the corresponding thumbnails.

The following lines of code are used to display all information in sidebar.php and footer.php wherever you put them in your WordPress template:

Basically, it's not that hard to understand this code. Once called, 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 blog page. So far, it is inactive, but in the next step, using functions.php, we will make it work.

In the fifth step, we added a piece of code that is responsible for displaying the post thumbnails on the main blog page. 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 set code for the navigation menu, write the following:

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

Step-7 sidebar.php.

I guess you guessed that the sidebar.php file will display all the information that we want to see in the sidebar. Since we have already used it in index.php, all that remains is to place the code in the 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.

With the help of a div, we call the styles from the file, and the code below gives us the ability to place the 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 just tells WordPress to register the sidebar we declared in sidebar.php. For general information, I can say that WordPress can easily run in one theme with multiple sidebars.

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

With the release of WordPress 3.0, the developers decided to make life easier for the authors of themes and templates for WordPress. They switched 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 put the code that will be responsible for the static pages of our site. It will be almost identical to the one posted in single.php. The only change is the absence of a comment template and the addition of code that handles pages, not 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 page.php and single.php, which we coded above, except for a piece at the very beginning:

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

Here we are using a bunch of if / elseif statements in PHP that show what you are viewing on the blog. For example, if we look at a category called - "", then it will be shown in h2 Archive from the category: "" in front of all entries, breaking them 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 allows you to change the background of a website from the admin panel using an image or a regular color. To do this, insert the following code into your functions.php file:

So, custom backgrounds are included. As a bonus, we'll add below code to make available the archive, comment and tag links from the RSS feed:

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

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

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

Have you managed to create your first WordPress template?

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

That's all for today.

Everyone who liked the article can subscribe to blog updates in order to receive notifications about the release of new material to their email account.

Until new articles ...

Best regards, Denis Chernikov!

Interesting on the topic:

Please do a good deed, 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 puffed over her for three days, I wanted everyone to understand everything! Hope I got it! Rapchik rules!

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

Yes, I noticed that the article is not small and a bunch of small nuances. If you don't take them into account, things will go awry! My friend is engaged in pure layout, sits in the office and the salary is decent, in the region of 4000-5000 UAH. Moreover, he is self-taught! So I have a 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 protest this topic. What's the matter here?

With respect and gratitude, Evgeny!

Thanks for the helpful article. For me, it's better to remake the finished theme for yourself.

Denis, the template turned out to be a bit narrow, there are a lot of question marks on the main footer instead of an inscription, and to edit the entry is also displayed only with question marks. Is that how it should be? and is not yet in the top menu of the main page and it is inconvenient to enter the admin panel, only through the editorial office of the article. And in principle, very good, and of course, thanks.

Julia replied:
November 4th, 2012 at 6:47 am

I don’t know what is the matter with the template, but the set background is not visible on the blog.

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

But thanks for the article anyway! You are well done! Success in the future!

Best regards, Eugene!

Thanks for the information. I will definitely try.

Denis, I removed my old theme, and installed some complex and new one. Many of the files that you describe are not there, for example single.php, page.php and category.php. Therefore, it is difficult to coordinate how to act in such a situation. But the pictures with miniatures interested me. When I am on the main page, the pictures are not visible. But if you enter a space in the search and start the search, then all the thumbnails immediately appear. What do you think, what could be the reason?

Hi Denis! Well, this is aerobatics! Layout WordPress themes yourself, not stupidly downloading a template! But there is no time to try this topic myself. There is still a lot to implement what you have interesting in the design of the site (arrow "up", folding corner, etc.).

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

While scored in bookmarks ...

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

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

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

Thanks a lot for the article. Was looking for relevant information to customize WP template. In most cases, just general phrases and without specifics, but you have another matter!

Denis, your code breaks in some places because of the size of the picture ... And happiness was so close!

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

Denis, hello!

Thanks a lot 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, text wrapping around photos does not work. Is it written somewhere in the template? I don’t understand what’s the matter ... there were no such problems before.

Thanks in advance!

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

Hello Lyudmila!

I wrote a great post specifically for this. It shows you how to wrap images and videos in your 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 in between NotePad ++ and the notorious TextMate (Mac OS). I drag the project into the window and it appears in the form of a tree. Very comfortably! Plus a bunch of tricks that make life easier than NotePad ++! Highly recommend))

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

Many thanks! I will try to do everything as written! Individual look is much better))

Good evening. I'm a beginner, and I don't quite understand how in "" Creating the necessary folders and files "" "I" "Inside this folder, place the following files (extensions - PHP, CSS, PNG)" "I typed them through Notepad ++ and how to transfer ???

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

Place the following files inside this folder (extensions - PHP, CSS, PNG):

The files you are looking for are created on the computer desktop using a regular notepad, with the assignment of the desired extension.

I can’t figure out how to place the Files IN THE FOLDER. When you copy them from the notepad, it’s nonsense. Explain. and how to transfer from Notepade ++ to the files folder.

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

Hello Denis! I'm a newbie, please tell me how to write a theme to Wordpress, in Appearance / Themes my theme is not displayed ... ((((

Thanks, the article helped a lot!

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

Denis, good day!

To be honest, I did not understand anything from what was written ... The merit in this is not yours - I have absolutely zero knowledge in this area and for me your notes turned out to be a Chinese literacy ... I am asking for some clarification (if you will), or just deleting your comment :)

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

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

Hello! Could I wind up the topic for a reasonable fee? I have an idea of ​​how I want to see the howling site, there is a photo for the theme, but I do not have the ability to work with Photoshop and HTML

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

Denis, I beg your pardon in vain, you do not trade in layout, in just 3 evenings you managed to draw such a masterpiece, about 2 years ago I collected such information bit by bit, and here such a treasure is a link to you in contact and a deep bow to you for the work done, there are some truths shortcomings. But everything is exactly, even with all the little things, this article would be about 2 years old for me, oh, how would it help me with my first project. And you have something in javascript in your arsenal, it's just that people of your level of education are always more interesting to read the old stuff.

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

Sergey, I sometimes trade in layout, but I don't like digging into already crap code trying to find the thread that killed the entire site! It's easier for me to do it from scratch than to search for errors on clients' sites. And for scripts, I have an excellent wizard who does everything competently and beautifully!

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

No, I don’t need a programmer, but information for a lick-demon, I really already saw on your site a whole section on javascript, in general, thanks for your resource, very informative.

Help, I can't edit styles.css from the admin panel. I go "appearance - editor", select a style file, but it opens empty. on ftp everything is edited, but it is not convenient for me.

help to upload a self-written site to WP (I will 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 am just a "teapot" ... I would be very grateful for your help! So, I needed to display news on page "A" only from category "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 entries are displayed on it, but the whole 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 stylesheet? Or did I initially do everything wrong? Thank you)

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

Elena, I don’t give such consultations! I have no idea what you are doing there, but the description is not always clear!

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

Denis, I will change the question: is it possible to display articles only from heading "A" on a page with the name "A", and articles only from heading "B" on a page with the name "B"? Thank you.

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

Elena I'm not sure if this suits 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 display of news, but I repeat that I would do this

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

All the same, after reading and rethinking again, I realized that this option is not very good for your Elena question.

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

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

Denis, help me figure out the topic.

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

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

Installed your original, the same problem, tell me what could be the matter, I will be very grateful.

Shl. I think maybe the point is that the engine has been 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 available for understanding. 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 shredded and scattered in parts into .php folders. At the same time, regular and dotted text is placed in index.html for the sample. But after all, in any topic there is initially no text (it is already 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. I did everything as you wrote it, 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, the design in PSD is already cut, I want to merge it with the template).

Thanks in advance for your reply.

Greetings. This article will answer the question of how to create a unique WordPress template, beautiful and different. I'll have to try and strain my brains a little.

How to create a unique WordPress template - getting started

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

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

Let's start by examining each item in order.

Change pictures

The easiest moment, I will analyze it using the example of the twenty eleven template. We replace the stock images with our own converted ones. It is necessary to change the hat, basement, background and other small ones.

But I cannot bring out a special solution, in my template there are a minimum of pictures (and those that are huge). In general, you need to replace most of the images with your own. Let's take a look at the two elements that are being replaced:

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

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

Through the administrative panel itself

Modern themes have a nice customization feature through the WordPress itself, why not use them? We go to the admin panel of the blog, look and customize.

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

1. Common theme colors. Settings for the main elements (titles, captions, etc.).
2. Header image, that is, in the header.
3. Background image. It is not present on all themes, you can customize it both with a picture and just with color.

At this stage, here's what I got. Let's go further.

Changing pictures manually

Suppose the picture of some element in the template does not suit you, 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 is valid for all topics.

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

1. The element itself, click on it with the right mouse button.
2. We select the item "view the code".
3. This is the HTML output code itself, we do not pay attention to it.
4. Here is the cherished 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 with a stroke. I made it in Photoshop, and saved it as a picture with the name bubble and the png extension.

Done, I opened filezilla, and went to the active theme twenty eleven in the images folder (which I learned above). and by simply dragging and dropping the new image into the folder, with replacement. See the screenshot for all the details.

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

As you can imagine, this method can be used to change any picture if there are no settings in the administrative panel.

Change the name of the template

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

There are two points and they need to be done:

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

Redo the titles in style.css

To do this, go to the editor ( reminiscent of the look-editor) and find style.css.

On the screen we see an inscription, everything needs to be changed. The beginning of any style.css file contains information about the template at the very beginning. It should be changed at least to these lines.

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

It should look like this after replacement.

You fill in your data, don't take mine, because we make the template unique. Change at least the name, author and site.

Understood, move on to the next item.

Change the name of the theme folder

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

Theme Name: moi-shablon

Need original name twentyeleven change to a new one, in my case, moi-shablon. 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 in styles

I can't come up with a single solution to 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.

Not really? I want to make the headings larger because they are small and blend in with the background. All steps are shown below in the picture.

1. We select the element that we want to edit. Click with the right mouse button.
2. Click on "view the code".
3. The whole style of this heading.
4. The name of the style you are looking for.

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

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 these parameters.

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

Let's analyze the lines of code.

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

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

All changes will immediately appear on the site.

My task now is not to teach layout, it 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 you what happened in 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 author's.

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

Now I will explain how to make a WordPress theme out of a simple HTML template using the design example from that article.

You may need to adapt the design for WordPress for many reasons, for example, you are transferring your once-static website to a CMS, or you like a design that is not yet in the WordPress collection, or you just want to figure out how the themes of this CMS work from the inside.

So let's get started.

Distributing the code to files

1. Download the template and unzip it to your WordPress themes folder (address like wordpress_blog_address / wp-content / themes /). Rename the theme folder to your liking if you like. For example, my template is located at wordpress_blog_address / wp-content / themes / MyTheme /.

2. Rename the file styles.css v style.css.

3. Open style.css in a code editor (such as Notepad ++) and at the very beginning of it, paste the following lines:

/ * Theme Name: MyTheme Theme URI: http://test1.ru Author: NoName Author URI: http://test1.ru Description: Example of test Version: 1.0.0 License: GNU General Public License v2 or later License URI : http://www.gnu.org/licenses/gpl-2.0.html * /

As you might have guessed, this is service information about the design theme: title, author, description, license, version, etc. You can replace the right parts of the lines with your own, that is, set your own authorship, version, description and other data.

4. Create files header.php, index.php, sidebar.php, footer.php and distribute the code from index.html.

4.1. V header.php copy the code line by line since this file is responsible for the top of the site. styles.css replace in the code with style.css- new valid file name.

4.2. V index.php paste the code of the main block (from the line by line ).

4.3. V sidebar.php copy the side menu code (from on ).

4.4. V footer.php paste the remaining lines (with to the end of the document index.html).

5. Delete index.html.

6. Go to the admin panel and make sure that the MyTheme template appears in the section Appearance -> Themes... You can even try to view or activate it, but nothing good will come of it yet, because we have not integrated the template with WordPress yet.

Adapting the header

Now we will start from a static template to make a dynamic theme, into which the data and WordPress settings will be loaded.

There will be PHP inserts in the template. This code starts with... Between them is the PHP code that most often calls CMS functions.

1. Open the header.php file and replace the code contained in it before the block

to the next:

> "> "> "type =" text / css "media =" screen "/>

We made the block dynamic

The code calls a function that returns the language attributes to the container.

">

Instead of writing the encoding as a constant, we called a function that takes the value from the CMS settings and automatically substitutes it into the code, that is, to change the encoding, you no longer have to edit the theme file.

An important function for making the page work with styles, plugins, and scripts.

2. Go to editing the index.php file. At the very beginning, write

,

The lines call up the header, sidebar and bottom files of the site.

You can now view or even activate MyTheme. As a result, the browser will display the already familiar template with a static menu and a single page. To make the menu dynamic and customizable, and instead of one page displaying all the materials placed on the site, you need to transform the template further.

Making the top menu dynamic

So far, we have a completely static design theme, including one with an unchanged horizontal top menu. While it cannot be configured from the admin panel, and if you leave the code as it is, then to insert / delete / move items, you will have to edit the file each time header.php, which is extremely inconvenient.

In order not to philosophize slyly and not plunge into the abyss of the fascinating world of programming, we will assign a static name to the dynamic menu. Paste the code instead of the horizontal menu table

so that you get the following: