Creating a WordPress child theme. Why you need a WordPress child theme

In the next update of the platform, new functions are always added, protection is improved, new opportunities appear. So, one of several possibilities can be noted such a useful tool as. And this is just one of the many functions. And there are more significant ones, for example - a child theme.

What is a WordPress child theme?

I would not like to go deep into this topic, given that the official website has a good Russian-language manual (). Let me just say a few words about the benefits of a child theme and what it is.

Meaning: child theme (DT) is mainly intended for correct editing of the parent theme (the one that is currently activated). Using this method will save any changes made to the parent theme (PT) the next time you update it.

Benefit: Colossal. Because this is the right decision in any changes in RT.

How to create a child theme in WordPress

The WordPress codex (link above) provides a detailed step-by-step description of the steps to create a child theme. In essence, there is nothing complicated here. Rather, the opposite is true: everything is very simple. But not everyone has a desire to tinker with files (we will not condemn them - this is a personal matter). For such a case, there are plugins that will do almost all the work for you.

We will briefly talk about this option. In the repository, as always, there is a large selection of plugins for the implementation of solutions to any tasks. My choice fell on the plugin " One-Click Child Theme», Which will create a child theme in one click.

After activating the "One-Click Child Theme" module, go to the "Appearance - Child Theme" tab. This page contains three fields to fill out:

How to work with a child theme

When you need to edit the parent theme (for example, make some changes, add a new block, delete a block, etc.), then for the sake of preservation or even security, it is best to do this through the child theme.

Theme files. A file is copied from the RT, in which you want to do something of your own, and is transferred to the DT (keep in mind that if the file is in a subfolder of the topic, then in DT you also create the same folder). Then start working with it, change it, add what you need and check the result.

Styles (style.css). In order to be able to edit the styles of the parent theme directly in the child theme, you first need to import them via the style.css file or the functions.php file. Otherwise, no changes will take place. And this is done like this:

CSS @import

/ * Theme Name: child-my-theme Description: Child theme

Function

Add_action ("wp_enqueue_scripts", "my_theme_enqueue_styles"); function my_theme_enqueue_styles () (wp_enqueue_style ("parent-style", get_template_directory_uri (). "/style.css");)

functions.php. unlike the previous ones, it is not changed or imported, but loaded as an addition to the parent file. It does not need to be copied from the RT, just create a file in the RT called functions.php. And then, in the usual way for us, add the functions you need to it. Thus, there will be a correct approach to modifying and extending the capabilities of the parent theme.

Connecting files from a child theme. In order to connect files from the DT, you must use certain functions that indicate the correct path.

Inspired by an article on Habré, I decided to create my own version about creating a child theme in WordPress, since there is a lot of text and explanations on Habré. As a person who does not consider himself a great pro in programming on WordPress, I will try to tell everything briefly and to the point.

If you are looking at WordPress for the second time and stepped on a rake with a theme update for the third time - read on.

So what are child themes for? I have already partially answered this question. Holes are found at regular intervals in WordPress core, plugins and themes (in terms of security). As a rule, smart guys who develop themes, plugins and the CMS itself release updates. All your customizations disappear the moment you install these updates. It becomes especially bad in a situation with a deeply modified topic. It is very deplorable - in the absence of a backup.

In order not to lose all your modifications, it is better not to make them in the files of the main theme.

I managed to find in WordPress bins with an old version of the Twenty Twelve theme. I will use it as an example.

1. Create a child theme folder:

mkdir wp-content / themes / twentytwelve-child

2. For the theme to work, you need two files:

• style.css
• functions.php

Let's create them:

touch wp-content / themes / twentytwelve-child / style.css
touch wp-content / themes / twentytwelve-child / fnctions.php

3. The name of the theme is set in style.css. Minimum set of code for style.css:

/ * Theme Name: Twenty Twelve Child Template: twentytwelve Author: the WordPress team Version: 1.0 Text Domain: twentytwelve-child * / @import url ("../ twentytwelve / style.css")

The last line loads the styles from the parent theme.

At this point, the theme appears in the list of themes in the WordPress admin area and looks like this:

Copy screenshot.png from your mother theme to make the image appear. If desired, you can edit it:

cp wp-content / themes / twentytwelve / screenshot.png wp-content / themes / twentytwelve-child /

Now the list of topics looks like this:

After that, the theme can be activated and it will even work.

It remains to put all the modified files in the child theme folder. The point is that WordPress prioritizes scripts / files from the child theme folder over the files / scripts of the parent theme. If any of the files are not found in the child theme folder, it is taken from the parent theme.

The standard theme looks like this:

Let's modify it a bit for clarity. I copied the header.php file from the parent theme, changed the display of the menu (above the title) and removed the display of the blog description. However, the original header.php remained intact. It turned out like this:

As we can see, header.php from the child theme folder has worked.

Ambush with styles only. If you declare a new display style, for example, the width of the text area in the style.css file of a child theme, it will not work.

In order for it to work, you need to create a separate stylesheet and connect it:

touch wp-content / themes / twentytwelve-child / custom.css

Inject the code from spoiler.site into it:

Site (margin: 0 auto; max-width: 90%; overflow: hidden;)

Unfortunately, the @import url directive only works once in the style.css file, so the second style file cannot be included.

In WordPress, styles are included with the wp_enqueue_style () function in the functions.php file.

Create the first custom function in the functions.php of the child theme that will return the folder or uri of the child theme:

Function get_child_template_directory_uri () (return dirname (get_bloginfo ("stylesheet_url"));)

After that, we can safely use get_child_template_directory_uri () in other custom functions.

Now we include custom.css:

Function child_styles () (wp_enqueue_style ("twentytwelve-child-style", get_child_template_directory_uri (). "/Custom.css");) add_action ("wp_enqueue_scripts", "child_styles", 12);

If necessary, you can copy the line and add other css files. Everything will work.

I guess there is no need to explain why the functions.php file should start with

By the way, the number in add_action () determines the priority. 12 - the coolest action, it is assumed that the styles that were connected with it will take precedence over the standard ones from the parent theme.

By analogy with styles, you can add other functions, without the option of losing them when updating.

I will not conduct further rantings. Put all the files that have been edited into a folder, include all the necessary css files and update as much as you like.

(Visited 1,223 times, 1 visits today)

WordPress developers added the ability to create child themes, now you have the ability to make your subtopic based on the parent. The child theme feature allows you to change the appearance of the parent theme and then save the changed theme separately without affecting the first one. In this guide, you will learn what a WordPress child theme is and how to create a WordPress child theme.

For whatuse child theme

A child theme allows you to change the parent theme according to your wishes. The main advantage of this feature is that you can make changes to a child theme without affecting the parent or any other theme that uses it as a base.

How WordPress child theme works

The child theme is located in a separate folder and contains its own files style.css and functions.php... If necessary, it is possible to add additional files, but the main files of the theme are required for its correct operation.

Using the appropriate .css and .php files, you can change almost everything from the style and layout parameters to the scripts the child theme uses.

A child theme can be compared to layers in any image editor. When a visitor visits your site, the child theme is loaded first, and then the missing styles and features from the parent theme are included. As a result, the user gets most of the code from the parent theme, but before displaying it, it changes according to the settings of the child theme.

Before you start this tutorial, you need the following:

• Access to WordPress dashboard
• Access to (recommended) or

Step 1 - Creating a Child Theme in WordPress

The process of creating a child theme is quite simple and can be easily completed by carefully following this guide.

You need to create a folder for the child theme in the default WordPress theme directory wp-content / themes... For convenience and preservation of order in the directory, it is better to create a folder with the ending -child after the name of the parent theme. You can add the name of a specific project if you like. Remember, the directory name should not contain spaces to avoid possible errors. Use an FTP client or File Manager to create a new folder. We recommend using the free FTP client FileZilla

In this tutorial, we will use the File Manager to create a child theme based on the default Twenty Seventeen theme, so the full path to the folder will look like this wp-content / themes / twentyseventeen-child.

1. Login to Hostinger control panel and click on the icon File manager.
2. Navigate to the folder where WordPress is installed (usually public_html), Further wp-content → themes.
3. Click the button new folder, enter the name of the child theme and click Create.

1. Enter the created child theme folder.
2. Click the button New file, enter style.css as the file name and press Create.

1. Paste the following code into the file:

/ * Theme Name: Twenty Seventeen Child Theme URL: http://hostinger-tutorials.ru/twentyseventeen-child/ Description: Twenty Seventeen Child Theme Author: John Doe Author URL: http://hostinger-tutorials.ru Template: twentyseventeen Version: 1.1 Text Domain: twentyseventeen-child * / Custom CSS goes after this line

1. Change all values ​​to match your domain and theme. The most important fields are Template and Theme name since they tell WordPress which parent theme your child theme is based on. Next, click Save to save changes.

1. Add file functions.php in the same directory, but do not paste the code from the parent theme there, as it must remain separate from it. Instead, create an empty file or add new .php functions as needed for your child theme.
2. From your WordPress dashboard, go to the section Appearance → Themes and press the button Activate on your child theme.

1. Go to your site, you can see that the theme is not displayed quite correctly (as in the picture below). Do not panic, this is due to the fact that the file functions.php doesn't load CSS from parent theme yet.

1. From your WordPress dashboard go to the section Appearance -> Editor and select the file functions.php.
2. WordPress has a feature to load CSS from a parent theme. Copy the given code to a file function.php child theme:

1. Click on Update file at the bottom of the page to save your changes.
2. Please visit your site again. Now the CSS is loaded and your child theme looks the same as the parent.

As you may have noticed, the process of creating a child theme is quite simple if you have the right approach and follow the step-by-step instructions in our guide.

Step 2 - Setting Up a WordPress Child Theme

Now you most likely want to start changing the appearance of the child theme as soon as possible. That's what you created it for, right?

Step 2.1 - Customizing the Appearance of Your Child Theme

To customize the appearance of the theme, you need to edit the file custom.css in your child theme directory. To do this, you can use a text editor and FTP client, file manager or WordPress editor. (Appearance -> Editor)... You also need some basic knowledge of CSS rules and the ability to validate site elements with a browser.

For example, to change the background color, add the following CSS rules to the file style.css:

Site-content-contain (background-color: # d5ffa0; position: relative;)

Below is what your site will look like after making the changes.

This process can be used to change other elements of the site as well.

Step 2.2 - Adding and Removing Features

Another benefit of using a child theme is the ability to have separate files functions.php which, like plugins, are used to add (or remove) specific functionality. Having a file functions.php in a child theme, you can rest assured that it will not be removed or changed after the default theme is updated.

To add new functions to your theme, add the required PHP code to the file functions.php your child theme. For example, this code will disable the WordPress search function:

Function disable_search ($ query, $ error = true) (if (is_search ()) ($ query-> is_search = false; $ query-> query_vars [s] = false; $ query-> query [s] = false; / / to error if ($ error == true) $ query-> is_404 = true;)) add_action ("parse_query", "disable_search"); add_filter ("get_search_form", create_function ("$ a", "return null;"));

Conclusion

A child WordPress theme provides the ability to create a completely new project based on the parent theme, without any tampering with its files. With a little code and working with directories, you can change your site as much as you want.

Child themes in WordPress allow you to make changes to existing themes, and in such a way that such changes are not lost when the original (or parent) theme is updated. In addition to the appearance, child themes allow you to change the markup, and even the functionality of the parent theme, expanding it to fit your own needs.

Support for child themes has been around in WordPress for a long time, but most users today still prefer to make changes to the source theme code directly. In this article, we'll explain how child themes work in WordPress and why child themes should be used to make any changes to existing themes.

What is a child theme

A child theme in WordPress is a theme that inherits the look and feel and functionality of the parent (original) theme. This inheritance allows you to easily modify and supplement individual portions of the parent theme without changing the original theme itself. With this approach, updating the parent theme will not affect these changes.

The parent theme can be any other WordPress theme (except for child themes), and for the child theme to work, both themes must be installed, but the child must be activated.

How to create a child theme

The simplest child theme consists of a single style.css file that specifies the name of the child theme and the name of the parent theme directory. The same file often references the parent theme's stylesheet using the @import CSS directive.

As an example, we will create a child theme, My Child Theme, and use the default Twenty Twelve theme as the parent theme.

First, make sure the parent theme exists - find the twentytwelve directory in wp-content / themes. Then create a new directory under wp-content / themes and name it my-child-theme. In this new directory, create a style.css file and paste the following header into it:

/ ** * Theme Name: My Child Theme * Template: twentytwelve * / @import url ("../ twentytwelve / style.css");

With the help of this title, we have defined the name of our new theme, as well as indicated the parent. The @import directive in this case loads all the styles from the Twenty Twelve theme, on top of which we will make our changes. Without this directive, our child theme will only inherit the templates (markup) of the parent theme, not the style.

After that, your theme directory should look something like this:

Going to the Appearance → Themes section, you will see that your new theme is already available for activation.

If you activate it and go to the home page of your site, you will see that your child theme looks exactly like the standard Twenty Twelve theme.

Working with styles

Child theme CSS styles can be set directly in the style.css file right after the @import directive. For example, to set the background color and the color of the links in your theme, add the following code to the end of the stylesheet:

Body (background: red;) a (color: green;)

Thus, you can change the styles of any elements of the parent theme, and you can easily find the required element using the developer tools in the Google Chrome browser or using the Firebug extension for the Firefox browser.

Working with templates

With a child theme, you can also easily modify the parent theme templates themselves. To do this, you just need to create a file in the child theme with the same name as the template in the parent theme. For example, to replace the footer.php template with your own, create a footer.php file in your child theme directory: