Ready-made child theme for WordPress. How to create a child theme or wordpress child theme

Here's an example of what this code looks like in my new theme.

Please note that the required fields are Theme Name and Template. You fill out the remaining fields at your own discretion.

Now you need to organize the import of styles from the parent theme. The thing is that once the style.css file appears in the child theme, WP does not load the same file from the parent theme. And as a result, without styles, your theme will look terrible.

To connect styles from the parent theme you need to write just one line of code:

@import url("../ parent theme folder/style.css");

As you understand, this is the conditional path to the styles file in the parent theme. You can also specify the full path (absolute) to the parent theme's stylesheet.

But after connecting the styles, you can add your own design styles. Please note that all your additional styles must come after the import line.

But in order to see all the new changes, you need to open the administrative WordPress panel and activate the child theme.

What files can be stored in a child theme folder?

In this folder you can store at least all the files of the parent theme. But this is not at all necessary. Keep only those that you will work with. In which you will make changes. Let's look at a few examples.

Theme function file functions.php

If you store this file in a child theme, it will be loaded in addition to the main parent theme file. Thus, this file will contain only your improvements in functionality.

Moreover, you must understand that all changes made to the child theme files concern not only improvements, but also changes in the functions and design of the parent theme.

Let’s say that in my current topic I constantly had a problem with the H1 and H2 headings being confused. I disclosed the solution to this problem in . And in my new theme, I can implement this through the functions.php file. Just add this code:

Add_filter("tc_site_title_tag", "change_tag"); function change_tag() ( if (!is_single () && !is_page ()) return "h1"; if (is_single () || is_page ()) return "p"; )

And all because my new theme is completely built on WordPress API keys.

Main theme (template) files

After activating a child theme in the admin panel, you will not be able to edit the main theme files (single.php, page.php, index.php...). Because they simply won't be there.

In order for them to appear in the admin panel, you simply need to copy the files from the parent folder to the child folder.

The files must be copied strictly to the same location where they are located in the parent folder. That is, so that the path to the file differs only in the name of the parent and child folders.

After copying the necessary files, they can be edited through the WP administrative panel.

And using the same scheme, you copy other files and edit them in the child theme. The parent theme files will remain unchanged. And then everything is in your hands.

Now watch the video tutorial and you can start creating child themes.

That's all, dear friends, the simple algorithm for creating child themes in WordPress is complete. Try, implement, and create your own themes. I just want to draw your attention to the fact that it is best to create a child theme immediately after installing the parent one. Otherwise, if you have already tinkered with the parent theme, then your child theme will not be implemented 100%, and it may end up crooked.

So we decided to work on new topic, choose, create a child theme and work with it.

That’s all for today, see you in new video tutorials and articles. And of course, if you have any questions, write in the comments, I will be happy to help. I wish you good luck and Have a good mood!

Subscribe to new articles!

71 comments. to Article " How to Create a WordPress Child Theme”

• Basil

  Very interesting topic. Several questions immediately appeared.

  1. Maxim, does using a child theme somehow affect the site’s loading speed?

  2. I use a special Function.php plugin to insert code into theme files. If you additionally use a child theme, for example, for micro markup. Is this possible?

  3. If you copy the entire files from the parent theme, then nothing will change after updating the theme. But the author can remove something from there. We only need to save certain strings code, and let the rest of the changes happen. Is it possible?

  • Vasya, hello. A child theme actually pushes the boundaries in customizing the theme to suit your needs.
    1. The child theme does not affect loading speed. It all depends on the parent theme itself and the code we insert into the child theme. If all the modifications are valid, then the loading speed will be high. I tested on GTmetrix and Pingdom. The main thing is that the parent theme is nimble.
    2. Theme functions in the child theme are essentially all our improvements collected in the Function.php plugin. So, you can freely use the plugin and not mess with the theme’s function file. Well, accordingly, all the micro markup needs to be created in a child theme.
    3. All files do not need to be copied. Only those in which we make changes. This way the parent theme files remain original. The files are updated taking into account our improvements. I've already checked.

• Sergey Steklov

  For some reason, when updating the Customizr theme, my child theme crashes. And all because of the edited files that are in the inc -> parts folder. Namely:
  class-content-featured_pages
  class-content-post_navigation
  class-content-slider
  class-footer-footer_main
  class-header-header_main
  When I delete these files, the child theme with the updated parent theme works fine. But now Customizr 3.3.26 works fine with my child. But as soon as I start updating the parent one, the child one crashes. It turns out that the above files cannot be edited at all, since new version themes old copies of files may not work. I don’t remember exactly what I changed in them. But it seems like he definitely removed the link to the developer in the footer, edited the slider and something else. The theme is not Pro, that is, the free version is used.

• Natalia

  I’m making a second website on WP, using ready-made templates. The second site is currently in Denver, WordPress with the Storefront design theme. The theme itself is designed for an online store and integrates with the WooCommerce store plugin. The problem is that Storefront is already a child theme of Twenty Ten. Question: what to do in this case - create a child theme from a child one? Or leave everything as it is? And what will happen if during the operation of the site you simply DO NOT UPDATE THE THEME? What could be the consequences (without updates)? And the second question: if you don’t update the theme, but regularly update the store engine (WooCommerce), will there be any fatal conflicts in the future? Thank you in advance for your response!

• Tata

  Thanks for the detailed and clear information on child themes. I did everything as written. I updated both the engine and the theme - everything works except the wppage plugin. Now pages made with it are displayed as regular pages with sidebar installed theme. I guess you need to add template_include somewhere for wppage pages. But my knowledge is clearly not enough. Can you give me a hint, Maxim?

• Larisa

  Maxim, and me again. I started creating child themes for websites and the question arose: are there themes that do not support the creation of child themes? I have a theme on my test domain where I can’t activate a child theme. In this case, the site crashes and displays a 500 error. What can be wrong? I tried to transfer one style.css file and all the folders and files of the parent theme (except for the parent style sheet) to the folder with the child theme, still an error occurs when activated and the site is pulled out from backup copy…

  • Larisa, this happens when a child theme contains a path to a folder or file that is not in the parent theme. You should try to create only a style file in the child theme without folders or other files. Once the theme is connected, you can gradually transfer it required file and eventually it will become clear what is disrupting the operation of the site.
    In such cases I work through ftp connection, I copy the file and check the work. If the site stops working, then the reason is in this file. I delete it and the site starts working. And I find out the reason, what’s wrong with it.

    • Larisa

      Thanks for the idea! I did this: I created a folder with a child theme and a style.css file. I activated a child theme from the admin panel and got a site devoid of styles. Sometimes this picture happens when slow connection Internet. I got such sites on LAN while mastering html)))))))))) The theme has a lot of settings and widgets. There is a special field for creating your own styles. I tried to copy the entire CSS of the parent theme into this field, I got some kind of mess of widgets (the footer ones “climbed” onto the header widgets)... I don’t understand why the styles are not connected properly... By the way, this theme has two functions files... One of them is located in an additional folder with its own name.

• Larisa

  Maxim, the VP code says that you can create a functions.php file in the child theme, which will be loaded in addition to the parent one. You can write directives in it that will override directives from the parent theme. Plus write your own directives. The styles of the parent theme were not connected to me through import into css file. I had to do this through the child functions.php file. Transliteration was done using the same file. The site is in working order. But! I was unable to override the copyright function in the footer of the site (there is a link to the developer and to WordPress).

  • Larisa

    I removed all unnecessary copyrights, but not through redefinition, but simply wrote a section of code from the parent theme function and removed from there the conditions under which links appear. So far everything is working, but I haven’t set up the site yet; it’s in its classic, original state.

  • Larisa, it is through the functions.php file of the child theme that all changes are made and they do not fail when the parent theme is updated. But, it works well for modern theme, where everything is tied to the API.
    With copyright, if you can’t change it individually, then you need to change the entire block above it. Or you can copy the footer file to a child theme and change the copyright. It's much easier this way. 😉

• Natalia

  Yes, it's a pity that I missed the time. I found your article late.
  I made a blog for my husband, and every time he updates the theme, the header image and information in the footer disappear. Every time after an update you have to adjust all this. Fortunately, I have all this saved in my inbox and don’t have to spend a lot of time on it. But it's annoying.
  Now, if I have to create new sites, I will immediately create a child theme.
  Thanks for the detailed tutorial. Alexander

  Hello, Maxim!
  When inserting modified files with micro-markup, problems arise. I have already told you that I am not particularly fluent in the programming language. For example, when inserting the sidebar-left and sidebar-right files with modifications, you did not indicate how to correctly enclose them in tags, and only the header remains on the site. Again, when inserting a class-content-page with micro markup for your lessons, the right side bar in the pages flies under the left one. And I didn’t find anything clear about functions anywhere - when you insert it in any form (original or modified from the micro-markup lessons), the site becomes inaccessible. But it is precisely this, as I understand it, that is one of the main elements for the proper functioning of a child theme. The rest of the files become normal, only Yashka swears at the basement (Google does not): WARNING: the value “© 2016” in the copyrightYear field is not a valid number value. My output of articles is not configured from the main page, so, as you understand, when editing I had to look for other line numbers. Displaying announcements is also different. I do not show category, date and author tags - in Search Console a bunch of URLs with errors appear. In general, I Google and Google, and in the end I end up with you again. If you can suggest anything, I will be grateful!

  And this causes some inconvenience. For example, the topic has not been translated into Russian. There is only one file in the languages ​​folder, nepalbuzz.pot. Let’s say the word “Search...” is displayed in the search window. I want to change it to “Search...” In the file nepalbuzz.pot I find the following line, it refers to the file inc/default-options.php. There I also find the following line.
  But it is not recommended to change files in the parent theme.
  I already have a nepalbuzz-child child theme created. I specified everything in style.css as expected.
  And now I want to change the default-options.php file copied to the nepalbuzz-child/inc folder. But for the change to take effect, I will have to copy core.php there and provide a link to it in function.php.
  But this core.php contains links to other files in the parent theme and nepalbuzz-child does not have them. Will I have to redirect them all to the parent topic?
  In short, there is confusion with links.
  What if you simply, without further ado, copy ALL the contents of the parent theme to the child theme? Will there be any problems? Will the files change when the theme is updated? And is it necessary to indicate the parent theme in style.css?

• Olga

  Hello! Please tell me, if I have already made changes to the Parent Theme and want to update it, then when creating a Child Theme, what files do I need to move from Rt to Dt so that my previously made changes in the Parent Theme are not lost during the update?
  And another question:
  — after installing the Child Theme, will the site be displayed with a new child URL?

We have released a new book “Content Marketing in in social networks: How to get into your subscribers’ heads and make them fall in love with your brand.”

The functioning of child themes (“daughters”) is based on their relationship with their parent themes (“parents”). It is important to consider that free and paid themes are initially parents, therefore, the daughter copies their parameters and properties, and also receives a standard set of its functions. In the future, taking into account the needs of a particular Internet resource, the set of these options can be expanded.

If we touch on terminology, then we're talking about about a special topic that takes on the meaning of another, which acts as a parent. Why are they created? To modify existing WordPress themes and thus increase their number.

What is the difference between “daughter”

A WordPress child theme allows you to make the necessary changes and adjustments. Next we'll look at how to create it, but before that we'll look at its key differences:

1. Changes made to the parent modification do not affect the child modification. It follows from this that after development they are independent of each other.
2. The derivative functions only if the parent is installed, and its activation occurs later.
3. The subsidiaries are tied only to their base and are not interconnected with either one or the other.

Is it convenient to work

A WordPress child theme is a great idea with a wide range of benefits. Personally, we would recommend it as standard with premium products. Let's list just some of the advantages:

1. They automatically save the adjustments made. Thanks to this, you can make adjustments directly to the code, without the risk that the settings will be lost or lost during the update.
2. Working with them is excellent preparation for moving on to writing the main code for the parent variants.
3. Improved workflow. With just one thematic framework at your disposal, you can create websites of varying complexity and functionality.

Since this is a continuation of the parent one, the set of features and functions is identical here. Main components:

1. Directory (folder/location of file components).
2. “style.css”, where the main and additional properties are specified.
3. “functions.php”, where the definition of functions is written.

There are no restrictions on adding templates, but the listed components are required to be present in any one.

Operation

“Daughters” are localized in their own folder and boast separate “functions.php” and “style.css”. You can always write auxiliary files, but this pair is responsible for proper functioning - without crashes or problems.

At correct use of the specified formats, you can edit almost any initial parameters, including style, individual layout items, scripts, etc.

The theme device is similar to the editorial layers of photo editors. If a user visits your Internet resource, a “daughter” opens in front of him, and then the missing options and styles are loaded from the parent. Ultimately, most of the code is passed down from the parent, but it needs to be modified to match the child's settings before it can be used.

How to create

First, check if you have everything you need at your disposal. Namely, access to FTP or a file manager, open access to the WordPress control panel itself. So let's get started.

Step No1. Creating a WordPress Child Theme

This is a fairly simple process. If you follow the instructions in detail, any user can master it.

First of all, we create a folder for our daughter in the standard directory. In order for the directory to have order and the contents to be systematized, it is better to name the folder according to the example “Name of parent + ending child”. For convenience, you can add the name of a particular project for which we are creating a theme. The main thing is that the directory name does not have spaces, otherwise this may lead to errors. A file manager or FTP client will help you create a new folder. Today, such an FTP client as FileZilla has proven itself well.

For example, let’s take “Twenty Seventeen,” which is familiar to many, as a basis. I prefer to work with the File Manager, so my path to the created folder looks like this:

We do the following:

Surely, you are convinced that creation is an easy process. You just need to strictly follow the instructions and work with the right approach.

Step No2. Settings

To get started, modify, supplement, adapt the “daughter” to the requests and requirements of your site, you need to make the settings correctly. We'll deal with it in order.

1. First you need to customize the appearance.

To do this, we will make adjustments to “custom.css”, which is located in the directory. This can be done through an FTP client, a regular text editor, a file manager, or a special WordPress editor (you can find it by opening “Appearance”, then “Editor”). Here you will need at least minimal knowledge of the rules using CSS, as well as the skill of checking site elements through a browser. For example, to change the background color in "style.css", we write the following CSS rule:

The following picture shows how the site design will change after the adjustments have been made. The background became light green:

This way you can edit any existing elements on the site.

2.Working with functions.

Using and working with “daughters” also provides the advantage of being able to maintain two independent “functions.php”. Let us remind you that these files are used to remove old and add new functions. If they are available, you don’t have to worry about the safety or problems in the operation of the document. Even if the base is updated, it will remain unchanged.

To add a new option, new PHP code is also written into the file. For example, the code below will remove the WordPress search option.

Special services to make the developer’s work easier

You can make the creation process easier by using a number of special plugins. WordPress Library Presents wide choose plugins, most of them are free to use. Using plugins greatly simplifies the development process. Let's look at the most popular plugins.

1. Child Themify.

This is the most simple and easy to use plugin with intuitive clear interface. Many settings here can be made with the click of a button.

2. Child Theme Configurato.

Here you can also create a “daughter”, and this will only take a couple of clicks. The CSS editor here is quite powerful, which allows you to configure advanced functionality. The plugin automatically performs identification key rules CSS and does not affect them when editing.

3. _child Theme Boilerplate.

Here are ready-made templates for forming “daughters”. The template is named simply - “_child” - and is designed specifically to simplify the work. The template offers an intuitive theme and only requires you to provide a link to the “parent”. Sample of this type allows you to create professional options - 2 have already been created here ready file, standard “functions.php” and “style.css”.

The first one has a special function called “aa_enqueue_styles()”. The option allows you to create a queue of style sheets, where the parent ones go first, and then the children. As a result, the style of the latter is always determined by the former.

Most developers link these tables together in CSS, but this does more harm than good. The browser takes a long time to load the site, because you need to load styles first from the “parent”, and then from the derivative. If you put style sheets separately, the browser’s task will be easier and loading speed will increase.

Here is the code with which you can add this option:

The second file has a basic header containing special information. This information allows WordPress to recognize it as a “child” stylesheet. Therefore, it is especially important to write the code for “style.css”:

Let's summarize

It doesn’t matter your level of programming proficiency or experience with WordPress. Creating a WordPress child theme is easy, and there is no risk of the settings being deleted after exiting. By writing a little code or making changes to something already written and running simple actions with the directory you can change your site. The main thing is to follow the instructions, gradually moving from one point to another. Do not forget the following: if there are updates for the “parent”, the “daughter” does not change, this rule applies to changes made to content, settings, and so on.

Experiment, try it various options and look for the best one for yourself.

Hello everyone, today I want to tell you about a wonderful feature wordpress engine– child theme. At the very end of the post, I will show an example of how to make a WordPress child theme based on ready-made template, now I want to explain why we need a WordPress child theme.

Page navigation:

What is a WordPress child theme and why is it needed?

A wordpress child theme is a theme that is used in wordpress to modify or extend the functionality of the parent (main) theme.

Using wordpress child theme allows you to completely change CSS styles, HTML and javascript code, as well as PHP code or its individual functions without interfering with the author's theme. Simply put, after our edits, we will be able to update the downloaded or purchased theme without losing our edits and functionality.

Let's say we bought paid theme With free updates and support for a year. We need to create our website based on a ready-made theme + make minor changes to the styles.

The first thing that comes to mind (and this is wrong): you need to take and write your styles into the style.css file. This way we will get the required result, BUT:

When updating, all our styles will be lost. If we ask support for help, they will refuse to help us, and even if they help, they will have to update automatically...

Vicious circle? – not really, you don’t have to update the topic and don’t contact support :)

Good advice, isn't it??

In this situation, WordPress child theme can help us. We simply throw a clean (without edits) purchased theme into wp-content/themes, and also create a child one and throw in the only file: style.css (it is required).

Benefits of using WordPress child theme

(click on the numbers to see all the benefits)

• Wordpress child theme inherits all the functions and capabilities of the parent theme + allows you to add your own or replace existing ones.

  After activating the child theme in the admin panel, we will see that it works similarly to the parent one.

• To add our own styles, we just need to add them to the child theme; the parent theme will remain unchanged.
• When adding a new custom type or taxonomies we can add missing files into the topic, and they will not interfere with updating the main topic.
• An impeccable advantage using wordpress child theme has the ability to update the theme.

  For example, if a developer finds a vulnerability or a theme conflict with a new version of WordPress, he will release an update, and you can easily install it.

How to create a wordpress child theme

To create a WordPress child theme, we only need to fulfill a few conditions:

1. Create a directory with a custom name.
2. In this folder, create a style.css file with special text. (I'll show you below)

I present to your attention brief instructions By creating wordpress child theme for the Twenty Sixteen theme, which comes in the base of the new WP.

Brief instructions on how to make a WordPress child theme

Clicking on the numbers below will take you to the next step.

Creating a child theme for wordpress

This is what our website looks like now:

I suggest changing the color of the headings in the widget on the right. To do this, we need to add the following code to the child theme styles:

Widget h2.widget-title(color:#228E4F;)

This is what the style edits look like:

And this is the result of our edits:

I also suggest creating other edits. For example, all SEO developers are tired of the fact that widget titles are displayed in h2. It is quite simple to treat this problem using the WordPress child theme. To do this we must:

1) Create a functions.php file.

2) Write the following code into it:

__("Sidebar", "twentysixteen"), "id" => "sidebar-1", "description" => __("Add widgets here to appear in your sidebar.", "twentysixteen"), "before_widget" = > "", "after_widget" => "", "before_title" => "

Here we do a very simple thing, remove all sidebars registered by the parent theme unregister_sidebar("sidebar-3"); and throw it in new code creating sidebars, which we took from the parent theme. That's all. Let's see the result:

Similarly, you can change the contents of any theme file, or add new ones, the only difference being that functions.php is not overwritten, but new functions are added. For theme files, when adding a file, for example, footer.php, this file in the parent theme will be disabled, and we will use this file from the child theme.

Differences between parent and child WordPress themes

The difference between these topics is in the logic of work:

if the file is not included in the child theme, then WordPress is trying to find it in the parent theme

if a file other than functions.php is in the child theme, then it replaces a similar file in the parent

Thank you all for your attention, this is probably all I have, we share the article with our friends