From the author: Greetings, friends. In another article on WordPress theme We will look at the question of how to change a WordPress template. If you have never faced the need to change WordPress template, then be sure to read this article, because sooner or later you will most likely have to face the issues of customizing and editing a WordPress template.

First, let's define the most frequently asked questions that users encounter when customizing a WordPress template for themselves. Here is an approximate list of them:

how to edit a wordpress template

change template width on WordPress

how to resize wordpress template

how to change wordpress template color

how to change font in wordpress template

And this is just a small list of problems that you may encounter or that you can help others solve, including for a fee, if you develop custom websites.

All the questions in the list above can be solved in two ways depending on the theme that is used for the site. Let's start from the very beginning simple option, which does not require layout knowledge. This option is suitable if the template supports editing from the settings.

Let's go to the Appearance - Customize section and see home page site and on the left side of the page the available site settings. These may include design settings.

As an example, let's try changing the color scheme of the site. Let's go to the Colors menu and change the background of the side and central parts of the site.

As you can see, this is quite convenient and changing the color of a WordPress template is quite simple - we see the result immediately and can evaluate it.

However, not every theme offers all the WordPress template settings we need. For example, there are unlikely to be settings that allow you to change the width of the template on WordPress, for example, even in the current theme there are no settings that allow you to change the font in the template, and so on. What to do in this case? This is where we will have to resort to the second option, and here some layout skills are already needed.

So, most often we only need to edit one file - the style.css file. It is located in your theme folder. Let's change the font color as an example. By the way, you can do this directly from the WordPress admin area. Just be careful and attentive so as not to accidentally “break” the site. Best do backup copy topic before changing anything in it. So, go to the Appearance - Editor menu and by default you should have the theme styles file open for editing.

If this is not the case, then select this file from the list on the right, it is called Style Sheet (style.css). Most often, the font color is set in the body, so let's find the styles of this element and set red as the font color.

After saving the file, we can refresh the site and see the red color for the main font on the site.

As you can see, customizing a WordPress template for yourself is a fairly simple task. With just a little knowledge of CSS, you can modify your WordPress template and produce necessary settings template. Using the same scheme, we can solve other similar problems. With this I say goodbye to you. Good luck and see you again!

In order to understand how to install and configure the theme and other minor nuances, we will consider an example on a template named “Aldehyde”, which can be easily found in free templates WordPress project.

We go to the administrative panel of the site. Go to the “Appearance/Themes” menu section. Click on the add new button.

In the search, type the name of the topic you are looking for, in our case it is “Aldehyde”. Click on the “install” button and then “activate”. After that new topic will earn. Now we need to customize it for ourselves.

Setting up a theme using the “Aldehyde” template as an example.

In order to start customizing a theme or template, you need to go to the “Appearance” item in the menu and click on the “Customize” button.

In the Header settings section:

• in the sub-item “title, tagline & logo” you need to add the title, logo and site icon.
• In the “social icons” sub-item we set social icons. Here you need to provide information in the form of links to social media. site owner's network.
• Next comes the sub-item “header image”. Here the background image of the header changes.

In the second section Design and layout You can customize the design and layout of the site. In this section you can set the desired display of content on the blog (one or more columns). In addition to displaying content, the section allows you to activate or disable the display of side columns on some pages or even on the entire site. In this section you can also apply various style sheets and set information in the footer of the site.

The Design and layout section contains the following sub-items:

• Blog layout – blog feed design
• Sidebar layout – turn on and off the sidebar (side column)
• Custom CSS – editing template CSS styles for advanced users.
• Custom Footer Text – Adding text to the site footer.
• Theme Skins – select a color scheme for the template.
• Colors. This section allows you to select the color and background of the resource name and description.
• Google Web Fonts. This section will help you choose different fonts from Google.
• Background image. Here you can upload the necessary photo or image for the background.

In the next section called Main Slider(Main slider) you can select the appropriate settings for it. But in the initial stage it is not necessary, so it is not recommended to pay special attention to it for now. The disadvantages of the main slider include high resource load. Moreover, this component can rightfully be called an adversary mobile versions sites.

Next comes the Custom showcase section(Custom showcase). Here you can beautifully design 4 blocks with links to important pages of your site.

Next, we will offer sections on widgets and the static nature of the main page; it is recommended to skip them for now, because the static nature of the main page was already customizable, and it is more convenient to configure widgets in the main menu of the designer. To do this, go to the appearance section and click on the “Widgets” button. After this, various widgets for application and use will become available on the left side. By dragging with the mouse, you can move the widget you like to the footer or side columns of the site. After that you need to produce them easy setup and save all actions.

It is very important not to load the side columns of the resource with widgets; it is much more effective to leave only the most necessary ones.

Setting the display and appearance of the menu.

In order to practically customize the display of the resource menu, which can be found in the category " Appearance» you should resort to the following instructions.

1. You need to give the menu a name and click on the “Create” button.
2. Add the most necessary top-level pages there.
3. In the settings of such a page, use the link text for its subsequent display.
4. You must check or uncheck the box automatic adding top level pages.
5. Select a location to display the menu on the website. This theme supports two menus in the header.

However, this approach has a significant drawback. The next time you update the theme, all settings often simply disappear, since the theme update overwrites the style sheet files with a new one.

WordPress has a relatively simple mechanism to avoid this shortcoming - Child Themes.

Many bloggers using WordPress doesn't use child themes either because of a lack of understanding of how to use them, or because of the perceived difficulty of creating them.
Next, I will tell you how to customize a WordPress theme for yourself using a child theme and show that it is not particularly difficult.

Why use a child theme?

A child theme allows you to make changes to the site without affecting the main one. source parent theme, and this makes it possible to update the parent theme without deleting the changes.

For a child theme, you need to create a separate set of files that can be used to customize the site without affecting the source code of the parent theme at all, but using the parent theme as a basis. This makes code adjustments much easier, and also ensures that the blogger never messes up his original theme, since he never makes changes to its "core" files. And in case of an error, he can always “turn off” the child theme and return to the original.

How to create a WordPress child theme

Method 1. Connecting styles via the @import rule

To create a child theme, just create a style file style.css and connect the styles of the parent theme to it using the @import rule.
As an example, I'll create a child theme for the Twenty Twelve theme included in the "base package" of WordPress. First of all, on my computer I create new folder for the child theme. I'll call her: /twentytwelve-child/.
In this folder I create a file called style.css and fill the file with information as shown below:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: My child theme for Twentytwelve Author: Alexander Koval Author URI: https://divitheme.space */ @import url("../twentytwelve/style.css" ); /* set your theme element settings below */

Strings Theme Name(Theme name) and Template(parent theme template) - required, the lines Description, Author, Author URI (author's website) are optional, and it is at the discretion of the creator to be in the topic or not.
The important part of this file is the line: @import url("../twentytwelve/style.css"); This line identifies the parent theme and imports CSS from it. When you create a “child”, you must make sure that the path to your parent theme’s CSS file is correct, and that the “Template:” parameter correctly defines the name of your parent theme. If you are using another theme, set the appropriate names for the other theme.

Please note - all names must be case sensitive: a name with a capital letter and a name with a small letter are different names!

Since my mother theme's folder is called "twentytwelve" and it is capitalized, hence the @import URL takes this factor into account.

Method 2. Connecting styles with code in function.php

To avoid unnecessary calls to the database, which leads to increased page rendering time, Codex WordPress does not recommend using the @import rule to connect parent theme styles

This method creates two files for the child theme: in addition to style.css in the child theme folder you need to create a file function.php and paste the following code there:

In this method, writing @import url(‘../twentytwelve/style.css’); in the style.css file of the child theme is completely unnecessary and the style.css file will look like this:

/* * Theme Name: Twenty Twelve Child * Template: twentytwelve Description: My child theme for Twentytwelve Author: Alexander Koval Author URI: https://divitheme.space*/ /* set your theme element settings below */

How to activate a child theme

Once I have created a child theme folder and a style.css file in it, I can upload the newly created child theme to the server and activate it in WordPress. Downloading and activating a child theme is no different from downloading and activating a regular theme. You can upload it through the “Appearance” -> “Themes” -> “Add Theme” page in the WordPress admin panel.

Please note that before you can download a child theme, you must first create a ZIP archive of its folder. This can be done using almost any archiver.

And also, when activating a child theme, also make sure that you have the parent theme loaded in your WordPress themes folder (in my example, this is the “Twenty Twelve” theme).

Modifying the CSS theme

I have now created a child theme for Twenty Twelve and uploaded it to WordPress. Since in the child theme I import CSS parent, then when activated, the child theme will look the same as the parent theme. To customize my theme, I can add any changes to the child theme's CSS file below the @import line... In this case, all the new CSS information from the child theme is added after the parent theme's CSS is loaded, and therefore the "child" CSS in the SERP is below the CSS from parent theme, which means that everything is new CSS styles will overwrite the original ones.
For example, let's say that in my example I want to change the title of the site. Right now the font is bold and gray, but I want to make it thinner and red. I can add the appropriate CSS to the child theme in the style.css file like this:

/*
* Theme Name: Twenty Twelve Child * Template: twentytwelve Description: My child theme for Twentytwelve Author: Alexander Koval Author URI: https://divitheme.space */ @import url("../twentytwelve/style.css");

/* set your theme element settings below */

Site-header h1 a (color: #FF0000; font-weight: 300;)

Each design theme has a number of settings that can be changed from the CMS control panel. The variety of parameters may vary from template to template, but almost every theme allows you to customize the logo, background, fonts, sidebars, title, and description of the site from the admin panel.

Despite this, the site owner may want to change some little things that the control panel does not allow. In this case, you can hire a webmaster, but if you don’t have money or have time, you can easily figure out the template and make the necessary changes yourself.

The engine theme consists of many files. Knowing what part of the site each of them is responsible for, you can easily edit the design of the CMS template to suit your needs.

The theme files contain HTML, PHP and CSS code. There is a separate reference book on HTML/CSS on the site, but PHP knowledge is basically not required to create a design.

So, any WordPress template has the following files.

1. index.php. The file forms the main page of the site and calls other theme files.

2. header.php. Creates the top, “header” of the site - usually it contains a logo, name, description of the web resource, as well as horizontal menu. HTML container is also in this file.

3. footer.php. Contains the code for the bottom part of the site, its “footer”.

4. style.css. Cascading style sheet file. Since it is usually quite large, style.css well commented. Unfortunately, most often in English, but basic knowledge will be enough to understand which part of the code is responsible for the design of which elements. Read more about CSS here.

This is a required base for a WordPress template, but there are usually many more theme files, and here are the most common ones.

1. single.php- separate post.

2. page.php- page.

3. sidebar.php- side panel/panels.

4. archive.php- archives of articles.

5. search.php- search results page.

6. comments.php- output of comments.

7. 404.php- error page with code 404 (File not found).

8. function.php- a file containing theme functions. You can add your own PHP scripts to it.

Of course, templates usually contain much more files than described above, but they usually do not need editing. In addition, you can learn about the purpose of each file from its name and comments inside.

Editing templates is often required to correct or add some small detail. Below are a few common situations.

Add menu

Menus can be placed not only in places set by theme(this is done through widgets), but also in any other part of the site or even on a specific page.

To insert a menu anywhere, add the line:

directly into the page code where you want to place it. The line will work if there is only one custom menu on the site. If there are several, you should add a line like this to the code:

"Menu_1")); ?>

where instead of Menu_1 you need to enter the name of your menu.

Change 404 page

If the link leads to a non-existent page or file, WordPress takes the user to an error page with the code 404 (File not found). The file is responsible for it 404.php, stored in the active theme folder. Often English text is displayed on the screen, and the desire of the owner of a Russian-language site to translate it into his native language is quite understandable.

To change the contents of the page, open the file in the editor 404.php, find the lines with the text displayed in the browser and change them (the displayed text is most often enclosed in quotes). For example, in one of standard themes(twentyfourteen) you will be interested in the following code:

Replace the text in quotes (not where twentyfourteen is, but something else) with your own and get a modified 404 page.

Register copyright

At the bottom of the site it is customary to write official information, in particular, the years of operation of the resource and copyright. In the vast majority of cases, your “label” in the file footer.php left by the authors of the themes, and webmasters, naturally, want to replace this information with their own.

As we know, the “legs” of the site are responsible for the file stored in the root of the active theme footer.php, and you should look for the code responsible for copyright in it.

For example, the flat-white theme hides supporting information in the following lines of this file:

" title=""> ">

Russify text

Often, WordPress templates are not fully Russified or not translated at all. Knowing the file structure of the theme and the fact that the text shown to the user (if it is not a variable) in the code is always enclosed in quotes, it is easy to find and independently translate the desired fragment, and it is not necessary to search for the word manually - for this you can use the automatic search, which is present in every code editor.

For example, in the flat-white template you immediately want to Russify at least two inscriptions: “READ MORE” and “Leave a Comment”, since they are visible on the main page.

The file is responsible for the main page index.php, located in the root of the theme directory, therefore, you need to edit it. But there is no text for the inscriptions, so you need to understand the code to find out where they are stored. In our case, the file is responsible for the information under the posts on the main page template-parts/content.php, connected by string

If you go into it and in the code