WordPress child themes. Creating a WordPress Child Theme
In some cases, when working on a website, the customer asks not to make changes to the original theme. This is necessary if you plan to update it in the future and the changes made to the files will disappear.
For such cases, WordPress provides a mechanism for creating a child theme. This theme uses the parent template as a base, and you can add your own files and functions to it.
The mechanism for working with child themes is quite simple. First of all, you need to create a new folder in the wp-content/themes folder for it. We will assume that the folder with the main template is called parent, and we will create a new one, which we will call child.
You need to place at least one style.css file in the child folder. It must contain the following instructions:
/* Theme Name: Child Template: parent */
Theme Name: Child Template: parent |
The first instruction (Theme Name: Child) is simply the name of the child theme, in fact it is not mandatory, but the second instruction (Template: parent) is mandatory, and indicates that this template is a child of the parent.
If you place a file in the folder with a child theme, it replaces the same one from the parent template. This rule applies to all files except functions.php.
@import url("../parent/style.css");
@ import url ("../parent/style.css" ) ; |
To work correctly, there should be no CSS rules before the @import directive.
There is no need to make any additional settings. Sometimes automatically including css styles from a child folder may not work. The template developer must use the functions:
- get_stylesheet_uri() — address of the styles file;
- get_stylesheet_directory_uri() — address of the folder with styles,
but it may include style.css in some other way, which leads to problems. In this case, it will most likely not be difficult to look at the code and find the problem.
More details on the functions.php file. If the child theme has such a file, the engine will first load it, and then the file with this name from the parent folder. This way you can freely expand the functionality of the template.
All other files located in the child folder, as already mentioned, replace their counterparts from the parent theme. That is, you can take the original single.php, make changes to it and place it in a child folder. When running the WordPress engine, it will be used.
The benefits of using a child theme are clear: you keep the original theme intact and can update it freely. There are no particular disadvantages, unless the developer made mistakes in the original template that made it difficult to use.
The folder structure in the child theme must match the parent structure if you are modifying files in subfolders.
What is a child theme and why do you need to create one for WordPress sites? Let's look at these aspects and figure out how it can be done.
Child theme(child theme) - a new theme (subtheme) for a WordPress site based on the base one (parent). It takes all the standard template settings from " parental " Topics. This theme has the ability to make any changes without fear of losing data during the update.
Child theme actually is a copy of the parent. And links to the main data directories design and interface to files in the main (parent) theme database.
Create child themes to make any changes to the base theme source code. This is done in order to avoid resetting all changes with the release of the update " parental » template.
In simple words, in WordPress sites come out regularly Plugin and base theme updates. If you made changes to source code parent theme (without creating a child), then after updating - they will disappear.
What is a child theme for?
When I just started creating my personal blog on WordPress, I didn’t yet know all the intricacies “ crafts ". And of course, didn't create a child theme, and began to make all the changes to the source code of the parent.
When the update for my template came out, all changes in the code were simply erased and I had a clean template again. Thus, I manually reinstalled the metrics, favicon and identifiers each time.
It is very uncomfortable. And it is for this reason that, after choosing a basic template, need to create his child theme. It is important to do this at the very beginning, since search engines react negatively to instability in the system settings of sites.
And from a human point of view, making all the changes again after the update is released is very inconvenient. This action must be performed once and forgotten about it forever.
How to Create a Child Theme in WordPress
You can do this in two ways:
- Download and activate the corresponding plugin
- Do it manually through the root directory of the site
Let's look at each method separately.
Creating a child theme using a plugin
The most convenient and popular plugin for creating " daughters "is called Child Theme Configurator.
It is available in the official WordPress plugin store. Click " Install". After installation and activation, go to the “ Tools» -> « Child Themes". Go to the plugin settings.
In the plugin menu you will see this window. We need to select the first item on the start menu " CREATE a new Child Theme". Let's choose it.
After selecting the parent template, click on the “ Analyze". Next, the following items will open.
Based on the results of the analysis, we should see the following message: “ This theme appears OK to use as a Child theme". This means that the plugin has checked our template for the ability to create " daughters " and gave the go-ahead.
Basically, this is all you need to configure in this plugin to create a child theme. Leave all other settings at " as it is«.
The only nuance if you have already added widgets and other site menu settings, you can check the 8th item. In this case, all visual settings of the template will be copied to the child theme.
Go to the 9th point and click on the button “ Create New Child Theme". Your child theme has been created and the plugin can be deleted, since it has fulfilled its role and is no longer needed for further functionality.
Manually creating a child theme
It's best to use a plugin, of course. But since my site had quite a lot of settings on the basic template, I had to do it manually. Since the plugin will not transfer all changes from the parent template to the child.
And for a general understanding, it would not be superfluous to see how this is done manually.
First of all, you need go to the folder with the site on the hosting your registrar.
We go to the address: /www/your-site.ru/wp-content/themes/. Create a new folder called " My Child Theme"(or any other - it doesn’t matter). I got the name " basic child theme«.
Now go to the folder with our main theme (for me it’s the folder “ basic") and copy the file from there style.css.
Paste this file into the folder to create a child theme.
Now you need to make changes to it. Select a file style.css and click " Change«.
Now select the entire contents of the file and delete(via the function " ctrl + A"). We will receive a clean file style.css which we'll be in enter the required code.
Since I'm importing theme settings basic, I have all the data indicated for this topic. If you have a different theme, you need to enter its name in this code.
Let's understand each line of code.
- Theme name: The name of your theme in the admin panel for you.
- Template: indicate the name of the parent theme.
- @import url("../theme-name/style.css");— we indicate with the command where to get the template data for the child theme (address to the register Parent Theme).
- .foo( color:blue; )- optional custom template style setting for " Child Theme«.
/*
Theme Name: My child theme name
Template: your-theme-name
*/@import url(“../ your-theme-name/style.css");
This is what the completed file will look like style.css for child theme:
Leave this piece of code and click “ Save". Your child theme is ready.
How to Activate a Child Theme on WordPress
Have you created a topic? Now you need to put it on your website. How to do it?
Go to the section " Appearance» -> « Themes". And we are looking for our daughter "by the name assigned to it through the command " Theme name" in file style.css.
If you installed the theme through a plugin, then its name will be in the format: “ subject-child". Look for it by this name. If the topic was called " twenty seventeen", then its child theme (via the plugin) will be called: " twenty-seventeen-child«.
IN " Topics"we find your child template and select the button “ Activate«.
In the last photo you see two Basic templates. Left - child theme of the template ( Child Theme ), and the right one is the parent theme ( Parent Theme ). The “daughter” adopts all design settings from the parent through the command @import.
Child Theme Problems and How to Fix Them
When creating a child theme manually through code, you may encounter one problem. IN " Editor"there will be only one child theme file" Style sheet" in the right column " Theme files«.
At the parent theme in " Theme files" will have many lines, and the child will only have a file " Style sheets (style.css)". What to do in such a situation?
I solved this issue like this: I copied all the files from the parent theme folder, except for the modified style.css, and uploaded them to the child theme folder.
Therefore, I would suggest a simpler way to solve this problem.
Just copy the entire contents of the folder parent theme, paste into the folder for the child theme and reconfigure the file style.css as in the example above.
That's all. Then all the tabs in " Editor» you can save and you can make any desired changes to them.
Conclusion
Creating a child theme is quite simple and should be done at the very beginning of the life of your WordPress site. The easiest way is to use a plugin; after it creates a child theme for you, you can delete it.
By performing such a simple trick, you will forget about further problems with theme updates.
According to average statistics, about 80% of websites use WordPress core themes, and only about 20% use a child theme. This can be explained by the fact that most clients do not understand what a WordPress child theme is or think that it is difficult to customize. In today's tutorial, we'll look at the practicalities of creating and using a child theme, as well as its importance.
Why use a child theme
Creating a child theme while editing your theme code can save you a lot of stress. Child themes allow you to make changes without affecting the code of the parent (main) theme, makes it easy to update the parent theme, and allows you to save your changes. You can always disable the child theme and return to the original one.
Practice
In our example, we will create a child theme for the sebweo main theme. First of all, we need to create a new folder for the child theme (let's call it sebweo-child, for example). The full path from the site root will be /wp-content/themes/sebweo-child/ . In the new theme folder, create a style.css file (the only required file) and fill in the information highlighted with comments (between /* And */ ), as in the example below. The theme name, URI, Description and Author can be completely changed to suit your needs.
Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css");
The most important parts of this file are the sections "Template:"(identifies the parent theme) and a CSS @import statement (imports CSS styles from the original theme). Make sure that the path to the main CSS file of the parent theme is correct, and in the parameter "Template:" The name of the parent theme is correct. Adjust this to suit your names and paths. All this data is case sensitive! In our example, the name of the theme (and, accordingly, the name of the folder with the parent theme) is written in lower case; if you use the name in upper case, you should write it that way (for example, Sebweo).
Activating a Child Theme
Once you have created a child theme folder and a style.css file, you can activate your new child theme. Activating a child theme is the same as activating a regular theme: just go to your WordPress Dashboard at Appearance > Themes (Appearances > Themes), find the theme you just created and activate it (click the button Activate on the block with the topic).
Editing CSS styles of the main theme
So, we have created a child theme. Now the styles on the site look the same as with the original theme. This is because we imported all the CSS styles from the original theme (remember the @import statement?). To edit styles, add any changes to your child theme's CSS file using the @import statement. Styles in a child theme take precedence because they are loaded after the main theme's styles and thus override them.
For example, we need to change the background color of the site from #fff to #f5f5f5 . To do this, we can add the appropriate CSS code to the sebweo-child/style.css file:
Com Template: sebweo Version: 1.0.0 */ @import url("../sebweo/style.css"); /* rewrite the styles of the main theme */ body ( background-color: #f5f5f5; )
Save the file and refresh the site: you will see that the background color has changed (assuming, of course, that the main theme used a white background color for the body tag).
Editing the functions.php file
The functions.php file is typically used to house the main functions of the theme. When using a child theme without this file, it will automatically be loaded from the parent theme. But if you need to add other special features to your theme, you can do so by creating a new functions.php file in your child theme's folder. Please note that new features will be downloaded directly before functions of the parent theme. Your child theme's functions.php file should start with the tag. You can add your desired PHP code between these tags.
Editing other template files
In addition to CSS and feature changes, you can make structural changes to your theme by adjusting the template php files. This should be done with caution, but it allows you to customize any part of the theme. Unlike editing the functions.php file, where the original theme's functions are automatically imported, when you edit a child theme's template files, they completely replace the templates in the parent theme. The parent theme file is ignored and the new one (from the child theme) is used instead. The first thing we need to do is recreate the old file before we start changing it. To do this, simply copy the template file from the parent theme and paste it into the child theme's folder. For example, if we want to change the template file for the site header (header.php), we simply copy it from /wp-content/themes/sebweo/ and paste it into /wp-content/themes/sebweo-child/ ( replace it with your own way!).
WordPress will now use this file instead of the old one since its name and location are the same. So now we can open the desired file in the child theme and make the necessary changes.
Advantages and Disadvantages of a Child Theme
Benefits of Using a WordPress Child Theme
- Safe update:
A child theme automatically inherits the features, styles, and templates of the parent theme. This allows us to make changes to the site using child themes without changing the parent theme. When a new version of the parent theme comes out, you can update it safely because all your modifications are stored in the child theme.
- Easily expandable:
A child theme gives you more flexibility without writing a lot of code. You can selectively change only the template files and functions you need without completely editing other template files. You can add new features and much more.
- Backup:
When you create a new theme, you need to think through all possible scenarios and its code. However, when you are working on a child theme and forgot to write certain code, then the functionality of the parent theme will always be available to you as a backup.
Disadvantages of Using a WordPress Child Theme
- One of the biggest disadvantages of using child themes is the time it takes to learn the code of the parent theme.
- Another downside is often that the parent theme developers may completely rewrite a feature you used in your child theme, or may make changes that completely break your child theme. Since updating the theme is key to site security and compatibility with other features and plugins, you will have to keep track of significant changes that may come with the update.
Friends, hello everyone. I am glad to welcome you to my blog. And today I want to talk about creating a WordPress child theme. Today, this is the most optimal approach when creating a website on the WP platform.
As you know, in order to create a website you need to follow certain steps. And one of these steps is choosing a theme for your website or blog. There are a lot of topics, and when choosing, you must first of all be guided by technical characteristics (code validity, loading speed, mobility, cross-browser compatibility, etc.). And the design can always be modified to suit the needs of a specific project.
What is a WordPress Child Theme
But, if the theme is regularly updated, then all the changes you make will be reset to the basic settings.
So, a child theme is a 100% copy of the parent theme (main theme). Any changes made to the child theme will be reflected in the parent theme. However, the parent theme files will not change. And the theme will be updated taking into account your changes.
How to Create a WordPress Child Theme
First, you need to understand the folder structure on your site. That is, having created a site on the WordPress platform, a themes folder will appear on the server, which contains folders of all themes installed by default and by you.
It is in the themes folder, next to the parent theme, that you will need to create a new folder with a child theme.
Connect to the server. Through or through the hosting file manager, it is at your discretion.
Open the folders one by one:
folder with your site
parent theme folder
Next to the parent theme folder, create a child theme folder. The name doesn't matter. I mean, you can assign any name using English characters.
Create a file in your child theme folder style.css. This is a required file. He will be responsible for the interaction between the parent and child themes.
Setting up your WordPress child theme's style.css file
File style.css in the child theme must contain information about the parent theme. Using it, WordPress will understand which topics interact between them.
Also, the style.css file in the child theme replaces the same file in the parent theme. And therefore it is necessary to include styles from the parent theme.
So let's get started.
Open the style.css file (I usually create this file on my computer in the Notepad++ editor, and then copy it to the child theme folder on the hosting).
Paste this code into the style.css file:
/* Theme Name: Topic name (in English characters) Theme URI: theme url Description: Description of the topic Author URI: url of your website or about the author page Template: parent topic name (case sensitive) Version: 1.0.0 */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 to see all the new changes, you need to open the WordPress admin 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 a new theme, chose it, created a child theme and worked 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 good mood!
Subscribe to new articles!
71 comments. to Article " How to Create a WordPress Child Theme”
Basil
A 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 lines of 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. 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 old copies of the files may not work with the new version of the theme. 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 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 its help are displayed as regular pages with a sidebar of the 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 when activated and pulling the site from the 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. When the theme is connected, you can gradually transfer the necessary files and eventually it will be clear what is disrupting the operation of the site.
In such cases, I work through an ftp connection, 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 the Internet connection is slow. 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 never connected to me through import in the 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, this works well on modern themes, 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. AlexanderHello, 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 you inserted 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 don’t show category, date, and author tags—a bunch of URLs with errors appear in Search Console. 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. I also find the following line there.
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 specify 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?
Want to create a WordPress child theme? After getting acquainted with the basics of WordPress, there is a completely justified and understandable desire to change the template design of the site to suit your tastes and needs. Creating a child theme is where you should start creating websites. In this article I will tell you how to create a child theme in WordPress.
Why create a child theme?
Creating a child theme is the best way to customize your chosen WordPress template. A child theme has all the features and appearance of the parent theme. You can make all the necessary settings without affecting the main template in any way. You can also easily update the parent theme without worrying about losing your settings.
Requirements
In order to make any changes to the template, basic knowledge of CSS/HTML is required, and it would also be nice to know PHP. You will really need the skills to copy and paste pieces of code from other sources.
To begin with, I would advise you to practice on localhost. You can also move your live site to a local server and practice on it or use dummy content.
Beginning of work
Any good WordPress theme can become a parent theme. However, there is a huge selection of themes and some of them are quite complex for the first experiments in creating child themes, so I decided to take the standard theme as an example Twenty Thirteen, which is one of the default themes in WordPress.
Create your first child theme
To begin, in the installation folder, open /wp-content/themes/ and create a new folder for the child theme. Call it whatever you want. For example, I'll call it wpbdemo.
Open a text document like Notepad and paste this code into it:
/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com/ Author: WPBeginner Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css");
Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com/ Description: A Twenty Thirteen child theme Author URI: http://www.wpbeginner.com Template: twenty-thirteen Version: 1.0.0 |
Save this document in the newly created child theme folder and name it style.css.
The lines of code here are self-explanatory. What you really need to pay attention to is the line Template: twenty-thirteen.
This tells WordPress that our theme is a child theme and the parent theme folder is named twentythirteen. Please note that the parent folder name is case sensitive, i.e. if you enter “Template: TwentyThirteen”, nothing will work.
The last line of code imports the parent theme's stylesheet into the child theme.
These are the minimum requirements to create a child theme. Now you can go to the menu Appearance » Themes, where you will see WPB as a child theme. Click the Activate button to start using it on your site.
Since you haven't changed anything in the child theme yet, the site will use all the functionality and appearance of the parent theme.
Setting up a child theme
Each theme directory contains a file with styles – style.css. most often it is the main style file, where there is CSS. However, for some themes, this file only contains information about the theme. In this case, as a rule, the CSS files are located in a separate directory.
Here you will need some knowledge and skills in working with .
Google Chrome and Firefox come with a built-in inspection tool that allows you to view the CSS of many elements on a web page.
If you want to see the CSS of the navigation menu, then simply move your mouse cursor over the menu, right-click and select “View Code”.
Once you do this, the browser window will be split into two parts. At the bottom of the screen you will see the HTML and CSS for the page.
When you hover your mouse over different lines of HTML, the inspection tool at the top of the screen will highlight the corresponding element. As you can see from the screenshot, I selected the navigation menu.
The chrome tool will also display the CSS rules related to the selected element on the right side.
You can try editing the CSS right here to immediately see how everything will look. Let's change the background color . navbar on #e8e5ce .
The background color of the navigation bar has changed. If you like it, you can copy this CSS rule and paste the child theme file style.css.
Navbar ( background-color: #e8e5ce; )
Navbar ( |
Save your changes to the style.css file and preview the site.
Repeat the process for anything you want to change in the theme's style sheet.
Here is the complete list of styles that I created for the child theme. Don't be afraid to experiment - change it at your discretion.
/* Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com Description: A Twenty Thirteen child theme Author: WPBeginner Author URI: http://www.wpbeginner.com Template: twentythirteen Version: 1.0.0 */ @import url("../twentythirteen/style.css"); .site-title ( padding: 30px 0 30px; ) .site-header .home-link ( min-height: 0px; ) .navbar ( background-color: #e8e5ce; ) .widget ( background-color: #e8e5ce; ) .site-footer ( background-color: #d8cdc1; ) .site-footer .sidebar-container ( background-color:#533F2A )
Theme Name: WPB Child Theme Theme URI: http://www.wpbeginner.com Description: A Twenty Thirteen child theme Author URI: http://www.wpbeginner.com Template: twenty-thirteen Version: 1.0.0 @ import url ("../twentythirteen/style.css" ) ; Site - title ( padding: 30px 0 30px; Site-header. home - link ( min - height : 0px ; Navbar ( background - color : #e8e5ce; Widget ( background - color : #e8e5ce; Site - footer ( background - color : #d8cdc1; Site - footer. sidebar - container ( background - color : #533F2A |
Each WordPress theme has a different layout. Let's take a look at the structure of the Twenty Thirteen theme. There is: header, navigation menu, content part, bottom widget area, second (side) widget area, footer.
Each of these sections is handled by different files in the twentythirteen folder. These files are called templates.
As a rule, these files have the name of the section to which they belong. For example, the footer is served by the file footer.php, the header and navigation menu are served by the file header.php. Some sections, such as the content area, are served by several files - “content templates”.
So, you need to get started by selecting the theme file that you want to change; copy it to your child theme.
For example, you want to remove the “Powered by WordPress” text from the footer area and insert copyright information there. To do this: copy the footer.php file to the child theme, open it in a simple text editor, such as Notepad. Find the line you want to remove and replace it with whatever you want. It might look like this: