The WordPress platform is a magnet for those looking to take matters into their own hands, who want to take complete control of their website and want to be independent in their management. WordPress makes this really easy and can completely customize your website. If you have a little knowledge of HTML, CSS and / or PHP, then there is nothing that you cannot change.
I mean, just compare the default themes, Twenty Fifteen and Twenty Fourteen. It's hard to believe they run on the same platform, isn't it? Therefore, it is only natural for you to want to adapt the look and feel of your site to suit your preferences. I doubt there are WordPress users out there who don't think about this all the time. However, a problem arises.
Customizing WordPress: You Could Be Doing It Wrong
When trying to make changes to a website, a huge number of people choose to edit the theme directly. This means that they change or add files to their current folder. This creates a number of problems.
The biggest disadvantage is that any changes made to the theme thus will be lostas soon as the theme is updated by the developer. As a result, users will either not be able to keep their theme up to date (which is bad for security) or they will lose all the customizations they make.
In any case, the situation is far from ideal.
A much better idea is to use. This allows any number of changes to be made to the website without touching the theme source files.
Sounds good? Great, because in this article we'll take a closer look at what child themes in WordPress how to create them and how to use them, how to set up your website correctly.
What are child themes and how do I use them?
When it comes to child topics, we must first talk about parenting themes... A theme becomes a parent theme only when someone builds a child theme for it. Until then, this is just a theme that you will find in the WordPress directory. Each theme includes all the files required for the parent theme.
However, any such topic can to be the parent of the theme, some are better suited for this purpose than others. For example, there are frameworks specifically made for customizing a child theme.
What is a child theme? In WordPress backend, the child theme behaves like a regular theme. You can find and activate it under Appearance → Themes, just like any other theme.
The big difference is that a child theme, for work, is entirely dependent on its parent... Without a parent theme, the child theme won't do anything, and can't even be activated.
This is because the child theme is not a theme in its own right, it instead modifies or adds to the existing theme files. It uses everything in the parent theme and changes only the parts you want to change.
It allows you to change styles, features, layout, templates, and more. In fact, you can customize the parent theme beyond recognition. However, without her presence, none of them will work.
Benefits of child themes
There are numerous benefits of a child theme:
- Instead of, you can build on existingthus speeding up development time.
- You can take advantage of the functionality of complex structures and parent themes to customize the design for your needs.
- You can update the parent theme without losing your custom settings.
- If you are not satisfied with your settings, just turn off the child theme and everything will be as it was before.
- This is a great way to start learning about how topics work.
A child theme can contain image folders, template files, and more. You can enable as many settings as you like.
In fact, the child theme only needs three things: folders, stylesheet files, and. That's all. And then, these two files can even be pretty much empty.
When to use a child theme
Thus, is it always necessary to create a child theme when you want to make any changes to a WordPress website? No.
If you only plan to do minor changessuch as color changes or other font, it is best to install a custom CSS plugin. ... Many themes nowadays also offer the ability to add custom code natively.
However, if you plan to enter big changessuch as overhauling a design, a few template changes, or anything else of that magnitude, then a child theme is definitely the solution.
Basic child theme customization
Okay, now that we know what a child theme is and what they can do for us, let's walk through how to create it step by step. For our example, we'll be using Twenty Fifteen, the latest default WordPress theme. Don't worry, it is very easy and you will receive it in no time.
Note:
The following steps can be performed directly on the server using. However, I recommend setting everything up locally first and then compressing the child theme folder and installing it as a normal theme via the Theme menu. This will make it all much easier.
Creating a folder in wp-content / themes
As mentioned, a child theme needs three things: its own folder, stylesheets, and a functions.php file. We'll start with a folder.
Like any other theme, child themes are located in the wp-content / themes folder of your WordPress installation. So, let's go there and create a new folder for your child theme.
The best practice is to provide your theme folder with the same parent theme name and add -child. Since we are using the twentyfifteen theme, we will name our folder twentyfifteen-child.
You can use any name you want; just be sure not to include spaces, because that can lead to errors.
Creating style sheets
Now that we have our folder, we will need a stylesheet. In case you don't know, the stylesheet contains the code that defines the design of the site. Themes can have multiple stylesheets, but we'll be content with one for now.
Creating a stylesheet is easy: Just create a new text file and name it style.css. Done! However, in order for it to work, we will have to insert the following code, the so-called “stylesheet header,” at the very beginning of the file (code courtesy of the WordPress Codex):
/ * Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child * /
Here's what each line means:
- Theme name
This is the name that will be displayed for your theme in the WordPress backend. - Theme URI
The link points to the website or demo page of the theme. This is usually an author link that must be present in order for the theme to be accepted into the WordPress directory. - Description
This description of your theme will be displayed in the theme menu when you click on the "Theme Details" button. - Author
That author's name is you in this case. - Author URI
You can put your website url here if you want. - Template
This part is critical. Here comes the name of the parent theme, which means its folder name. Keep in mind that it is case sensitive, and if you don't put in the information you want you will get an error, so double check! - Version
Displays the version of your child theme. Typically everyone starts at 1.0. - License
This is your child theme's license. Themes in the WordPress directory are usually released under the GPL; you must adhere to the same license as your parent theme. - License URI
This is the address where you link to your theme license. Again, stick to what your parent's theme says. - Tags
Tags help others find your theme in the WordPress directory. Thus, if you include some, make sure they are up to date. - Text domain
This part is used to internationalize and make topics translatable. This should match the "slug" of your theme.
If you are feeling a little overwhelmed (already?), You may be happy to know that not all information is actually required. In fact, all you really need is a theme name and a template.
The rest is only important if you plan to publish your topic. For this reason, the title of my child theme looks like the one below. Feel free to copy it and make your own changes.
/ * Theme Name: Twenty Fifteen Child Theme Description: A child theme of the Twenty Fifteen default WordPress theme Author: AndreyEx Template: twentyfifteen Version: 1.0.0 * /
Activating a child theme
After you create the folder and stylesheets, go to "Appearance" → "Themes" in and find the child theme there. When you click on the “Theme Details” button, you will see the contents of the stylesheet header. That's all the information.
Ok, now click on the button that says “Activate.” Good job! Your theme has been activated. However, if you look at your website, it looks like this:
Don't worry, it's okay. You haven't screwed up. Get your face out of a paper bag. The reason your site is blank is because it doesn't have any styles yet
We just wanted to show you that, in theory, having a stylesheet and folder is enough to create a child theme. And if it works for you, then you have already done it! However, let's get to the improvement.
Creating the functions.php file
The functions.php file allows you to modify and add functionality and functionality to your WordPress website. It can contain both PHP and WordPress built-in functions. Alternatively, you can create your own functions.
In short, functions.php contains code that fundamentally changes the look and feel of the website.
Creating a file is as easy as creating a stylesheet, if not easier. All you need is a text file called functions.php and then paste in the following code:
Seriously, that's all. Just add after the open php tag. Of course, you could write some information in the header (remember to comment so that WordPress doesn't try to execute it). Add it to your theme folder.
Now, let me say more: You don't needed functions.php. If you don't plan on using PHP to change your theme, then you can do without it altogether. The stylesheet and other files may be sufficient for you.
However, I wanted to include this part, firstly, that you would know about this important file and, secondly, because of the next step.
Parent Styles Inheritance
Thus, you probably know that your website is still in body copy. It's time to change this situation. How? I will show you.
Since you are using the parent theme, you probably have a good idea of \u200b\u200bthe future structure of your site. For our example, Twenty Fifteen, we want to get to this point:
To get here, you will need to inherit the information in your parent theme's stylesheet. There are two ways to do this.
One of them is using CSS and the @import rule. By copying the code below into your style.css file, you are telling your child theme to use the information contained in your parent theme's stylesheet when displaying your content.
@import url ("../ twentyfifteen / style.css");
Keep in mind, however, that this old way inheritance from parent styles and is no longer recommended. The reason for this is performance.
If you need to import multiple stylesheets (which is not a sensible way) then using @import will force them to load consistently... This can slow down the page load time by a few seconds, which is not good.
Secondly, the recommended way to load the parent's stylesheet - and the reason why we created functions.php earlier - is using wp_enqueue_style (). This WordPress feature safely adds stylesheet files to your WordPress theme.
In our case, the corresponding code looks a little something like this:
Add_action ("wp_enqueue_scripts", "enqueue_parent_styles"); function enqueue_parent_styles () (wp_enqueue_style ("parent-style", get_template_directory_uri (). "/ style.css");)
Be sure to paste this code at the beginning of your functions.php file and save it (remember, to load the file, use). Now check your file; it should look like this:
Satisfied, aren't you? Congratulations, you did it! You have created your first WordPress child theme.
However, you might argue, rightly, that it looks exactly the same as the parent theme. So what's the point of a child theme?
Extra points: Adding a theme image
If you want to get it all, you could add an image theme. This image will be displayed in the WordPress theme menu.
All you have to do is create a PNG file called screenshot.png and place it in your theme folder (in our case twentyfifteen-child). Make sure to put it in the top-level directory and not in a subdirectory like images.
Other image formats such as JPEG and GIF will also work, but PNG is recommended. You can do this now or wait for you to finish customizing the theme, because the image is usually a screenshot of the theme design.
Setting up a child theme in WordPress
If you did everything correctly, then your child theme should now be activated and look exactly like its parent. This is where the fun begins.
Now we can start customizing our theme and reposition everything to get the result we want. Adaptations can be done in different ways.
Implementing custom styles
One of the easiest ways to make changes to your theme is with CSS. It allows you to customize colors, sizes, fonts and other elements, basic designs.
If you are proficient with CSS, you could actually change the entire layout of your site. However, the introduction of such drastic changes is usually done in different ways. We will come back to this.
At this point, all you need to know is that style.css is in place, you can override any styles in the parent theme by adding the child theme's stylesheet code.
Important: If you have specified parent theme styles in your style.css file then remember to add any custom styles below in the @import statement like in the following code snippet. (Although you know you should be using functions.php, right?)
/ * Theme Name: Twenty Fifteen Child Theme Description: A child theme of the Twenty Fifteen default WordPress theme Author: AndreyEx Template: twentyfifteen Version: 1.0.0 * / // Custom styles go here
Twenty Fifteen is a beautifully designed theme. I really like the generous white space that allows the content to breathe and soothes the eye.
However, let's say you're not a fan and want to adjust the theme. There is no harm in this. In this case, you will use a tool like Firebug to figure out how the styles should be changed. We did something like this:
Entry-header (padding: 0 10%;) .entry-title, .widecolumn h2 (font-size: 3.8rem; line-height: 1.2208; margin-bottom: 1.2208em;) .entry-content, .entry-summary (padding: 0 11% 11%;)
We'd like to make a few adjustments, get what we want, and copy them into the style.css file of our child theme.
Entry-header (padding: 0 7%;) .entry-title, .widecolumn h2 (margin-bottom: 0.7em;) .entry-content, .entry-summary (padding: 0 7% 10%;)
Adding custom styles to the child theme will override the styles in the parent theme.
Overriding parent theme files
Not only can you customize individual style declarations using a style sheet, but you can also override entire components of the parent theme.
For each theme file present in the parent directory, WordPress checks if the corresponding file is present in the child theme and, if so, use it. This means that the header.php file in the parent theme will overlap its equivalent in the parent folder.
So if you don't like something about the page layout, just copy the appropriate file, make the changes, and upload it to the child theme folder. The changes will appear in the child theme, while the original file remains intact.
For example, if we grab content.php from the Twenty Fifteen theme folder and open it with an editor, among other things, we find the following code:
Let's see what happens when we change the order of the code:
", esc_url (get_permalink ())),"
"); endif;?\u003e
As you can see, after saving and uploading the file to the child theme folder, the image of each blog post will now appear below the post title.
Of course he could have used some styles, but you got the idea. You can use this method to make all the changes on your site. Just remember to give the child theme the same tree-like folder structure as a parent. For example, if the file you want to change is located in a folder named page-templates in the parent theme, then you can create a folder with the same name in your child theme directory and place the file there.
Working with template files
We learned that we can overwrite any file in the parent theme by placing a copy in the child theme's folder and customizing it. However, use files that exist only in child theme also possible. Template files are a good example of this.
Let's say we want to build a full page width template for our child theme. I'll be the first to admit that the twenty-fifteen theme doesn't lend itself to full screen presentation, but let's do it anyway for demo purposes.
To create a full width twenty-fifteen page, we need to do four things: create our own page template, custom header and footer file, and then add some custom CSS. Let's start with a page template.
For our custom page template, we'll simply copy the page.php file from the parent theme, rename it to custom-full-width.php, and place it in a folder called page-templates in our child theme.
Now, let's make a couple of changes in the code so it looks like this:
The only thing we did here was a header that tells WordPress that this is the page template where we changed get_header and get_footer so that they will include two files named header-custom.php and footer-custom.php.
Let's go back to the page that we want to see full width and change the page template in our newly created template.
Now it's time to create our custom header and footer in the theme file. First, go to the parent theme and copy the header.php and footer.php into the child theme folder and rename them to header-custom.php and footer-custom.php, respectively.
So far, our page has looked the same as before. It's time for customization. Let's start with our custom header.
class \u003d "no-js"\u003e
"> "> >"rel \u003d" home "\u003e
"rel \u003d" home "\u003e
We've done several things here. We gave the element
a custom class named full-width-body. We've also added a full-width class to site-header, site-branding and site-content so that we can assign custom CSS to them.As a final step, we got rid of all the sidebar elements (like the sidebar and the get_sidebar call) because we don't want them to appear at full width on our page.
The only change we made to footer-custom.php is to add a full-width class to the footer element, like so:
All that's left to do is enter some code in our stylesheet:
Full-width-body :: before (display: none;) .site-content.full-width (float: none; margin: 0 auto;) .site-header.full-width (background-color: #fff; box -shadow: 0 1px 0 rgba (0, 0, 0, 0.15); margin: 0; padding: 2% 0;) .site-branding.full-width (margin: 0 auto; width: 58.8235%;) .site -footer.full-width (float: none; margin: 0 auto;)
TA-dah! And here's our full-width page:
She may use some polish, but let's be satisfied for now.
Using functions.php
We touched on the functions.php file. This file can be used to enable PHP and built-in WordPress functions in your theme. This will give you a lot of customization options.
Note:
The functions.php file in the child theme is loaded in addition to the file of the same name in the parent theme. In fact, it is executed immediately before the parent theme, unlike style.css, which replaces the original file. Hence, don't copy the entire contents of your parent theme's functions.php file to a file in your child theme. Most likely use the latter to change the function in the parent theme.
Let's go back to customizing our child theme. In this example, I want to add a widget - a zone in the footer of the site. To do this, we first need to register the widget in our functions.php file.
"Footer Widget", "id" \u003d\u003e "footer-widget", "before_widget" \u003d\u003e "
"));Note:
Tag
This will make the newly created widget area appear in our footer. However, in order to be usable on the website, we need to add the following code to footer.php:
Once again, we will copy the footer.php file from the twenty fifteen theme of the parent theme and paste it into our child theme. This time, however, we will leave his name as it is.
After that, we need to add a call to our new header and footer widget, so it looks like this:
Minimum changes required in the style.css file:
Footer-widget (margin: 2% 0;)
Now when we add the search widget to our new widget area, the first page will look like this:
Not that hard, is it?
Using hooks in the theme
The best way to change child theme using functions.php is to use. If you've never heard of theme hooks before, think of them as little anchors in theme files that allow you to add content, functions, and other things right there, without having to edit the core of the files themselves.
There are two types of hooks: action hooks and filter hooks. Hook actions allow you to add custom functions to existing functions. Hook filter, as a way to change the functions present in the hook location.
Let's see an example of how to make it clearer. We will be using the action hook. Let's go back to our last example, where we added a widget to the header and footer of our theme. Instead of modifying the footer.php file in our child theme, we can achieve the same with an action hook.
Let's write a small function:
Function custom_footer_widget () (if (is_active_sidebar ("footer-widget")): dynamic_sidebar ("footer-widget"); endif;)
You will notice that this is essentially the same code that we inserted into footer.php earlier, only this time wrapped in functions (and without php opening and closing tags around it, since we include it in the functions.php file) ...
The advantage of this is that we can now add the entire function to the hook in the main files of our parent theme, without having to edit the file itself. In this case, we are targeting twentyfifteen_credits in the parent theme file. He is responsible for the footer (“AndreyEx Websites Development”) in theme twenty fifteen, and he appears in footer.php as follows:
Do_action ("twentyfifteen_credits");
All it takes to add our new widget area function to this hook is one more line in the functions.php of our child theme:
Add_action ("twentyfifteen_credits", "custom_footer_widget");
Now the widget area will be displayed in the same place where we had before, without having to copy or add code to the theme's header file.
Note:
If you follow and follow the functions.php route, remember to remove the modified footer.php file from your child theme; Otherwise, the widget area will be displayed twice.
A lot more can be done with hooks in a child theme. Some frameworks provide thematic hooks, so you can change anything directly from.
However, this topic is beyond the scope of this article. If you're interested in learning more, some great resources can be found online.
Total
As you've hopefully figured out by now, creating a child theme in WordPress isn't very difficult. All it takes is a folder plus two files.
However, despite its simplicity, child themes are powerful tools. This allows fully and securely customize the website without editing any kernel files.
The benefits of this are numerous: You can build on top of an existing theme or framework without having to write a theme from scratch; your changes are safe from theme updates; and if things go awry, you will always have an acting theme to come back to.
Plus, you get a top-notch education in. Not so bad, right?
For this reason, learning parenting is an important step in the career of any WordPress designer or developer, and for anyone who wants more control over their sites on. I hope this article helps you get started.
What is your experience in creating WordPress child themes?Do you have anything to add? Anything you could do differently? Please share in the comments.
What is a child theme and why should you create it for wordpress sites? Let's look at these aspects and see how it can be done.
Child theme (child theme) - a new theme (subtopic) for a wordpress site based on the base (parent) one. It takes all the standard template settings from " parent " Topics. Such a theme gets the opportunity to make any changes without fear of data loss during the upgrade.
Child theme actually is a copy of the parent... And links to the main data directories design and interface to files in the database of the main (parent) theme.
Create child themesto make any changes to the source code of the base theme... This is done in order to avoid resetting all changes with the release of the update " parent »Template.
In simple words, on WordPress sites come out regularly plugins and base themes updates... If you made changes to source code parent theme (without creating a child theme), then after updating - they disappear.
What is a child theme for?
When I just started creating my personal blog on WordPress, I still did not know all the subtleties " crafts ". And of course, did not create a child theme, and began to make all changes to the source code of the parent.
When there was an update for my template, all changes in the code were simply erased and I had a clean template again. Thus, I manually reset the metric, favicon and identifiers every time.
It is very uncomfortable. And for this very reason, after choosing the base template, need to createhim child theme... It is important to do this at the very beginning, as search engines react negatively to instabilities in the system settings of sites.
And from a human point of view, it is not very convenient to make all the changes again after the update is released. This action must be performed once and forget about it forever.
How to create a child theme in WordPress
This can be done in two ways:
- Download and activate the corresponding plugin
- Do it manually through the root directory of the site
Let's take a look at each method separately.
Creating a child theme via a plugin
The most convenient and popular plugin for creating “ daughters "Called Child Theme Configurator.
It is present in the official wordpress plugin store. Click " Install". After installation and activation, go to the section " 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". We select 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 possibility of creating “ 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 “ as it is«.
The only caveat if you have already added widgets and other settings of the site menu, you can check the 8th paragraph... In this case, all visual settings of the template will be copied to the child theme.
Go to point 9 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.
Creating a child theme manually
It is best of course to use a plugin. But since my site had a lot of settings on the basic template, I had to do it by hand. Since the plugin will not transfer all changes from the parent template to the child template.
And for a general understanding, it will 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 named “ My child theme"(Or any other - it doesn't matter). I gave it the name " basic child theme«.
Now go to the folder with our main theme (I have this 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 the file style.css and click " Edit«.
Now select the entire contents of the file and delete (via the function " ctrl + A"). We will get a clean file style.css in which we will enter the required code.
Since I am importing the 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 take a look at each line of code.
- Theme name: The name of your theme in the admin panel for you.
- Template: specify 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 setting of the style of an arbitrary template for " Child theme«.
/*
Theme Name: My child theme name
Template: your-theme-name
*/@import url ("../ your-theme-name/style.css ");
This is how a completely finished file will look like style.css for child theme:
We leave this piece of code and click “ Save". Your child theme is ready.
How to activate a WordPress child theme
Have you created a theme? Now you need to add it to your site. How to do it?
Go to the section " Appearance» -> « Topics". And we are looking for our " daughter "By the name that was assigned to it through the command" Theme name" in file style.css.
If you installed a theme through a plugin, then its name will be in the following format: “ topic-child ". Look for it by that name. If the topic was named " twenty seventeen", Then its child theme (via the plugin) will be named:" twentyseventeen-child«.
AT " Themes»Find its 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 ). "Daughter" takes over 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. AT " Editor"There will be only one child theme files" Style sheet"In the right column" Theme files«.
The parent theme in " Theme files"Will have many lines, while the child will only have the file" Style Sheets (style.css)". What to do in such a situation?
I solved this question like this: I copied all files from the parent theme folder, except for the modified style.css, and uploaded them to the child folder.
So I would suggest an easier 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 make any desired changes to them.
Output
Creating a child theme is easy enough and you need to do it at the very beginning of your wordpress site. The easiest way is to use a plugin, after it creates a child theme for you, you can uninstall it.
By doing such a simple "trick", you will forget about further problems with theme updates.
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 big 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. 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 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 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 the mother theme to make the image appear. You can edit it if you want:
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 some 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 menu display (above the title) and removed the blog description display. 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 style file 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 works only 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.
Let's 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 don't think I need to explain why the functions.php file should start with
By the way, the number in add_action () determines the priority. 12 is 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)
Many of our users ask us which template are we using? Our answer is that we are using a non-standard secondary theme built on top of the framework. The follow-up question has two parts most of the time. What ? The second part of the question is what is a secondary WordPress theme? We have already explained what a WordPress framework is in our previous articles. In this article, we will do our best to answer the questions like what is a secondary WordPress theme, when should you create a child theme, why people create child themes, and finally the advantages and disadvantages of using a child theme. We hope that after reading this article, you will have a solid understanding of what a child theme is in WordPress, and you will know if you should use a child theme or not.
What is a WordPress child theme
This is a theme that inherits functionality from another WordPress theme, the parent theme. Child themes are often used when you want to customize or touch up an existing WordPress theme without losing the ability to update that theme. In the past, there hasn't been an easy way to update a WordPress theme without losing all the custom settings and changes you've made. It turns into chaos when all of a sudden what you see, a widely used script in a popular theme has a lot of possibilities, and you need to update your theme as soon as possible. This becomes a tricky choice because on the one hand, you will lose all custom styles when you update. On the other hand, you risk your site being compromised if you don't update fast enough.
The WordPress community decided to solve this problem by introducing the concept of parent theme and child theme. A child theme in WordPress will inherit all the functionality, characteristics, and code of the parent theme without making any changes to the parent theme. This allowed users to change styles of the parent theme and add / change characteristics without losing the ability to update the parent theme.
In theory, any WordPress theme can have child themes, however not all WordPress themes have good parent themes. A parent theme with limited functionality and features, it is not an ideal parent theme candidate in most cases. We will talk about exceptions, see later in the article.
Good parent themes, also known as frameworks, usually contain their own hooks and filters. This allows designers and developers to create robust custom WordPress sites using a child theme quickly enough.
Why do people use WordPress child themes?
Designers and developers use child themes to accelerate their development. By using a good parent theme, you can dramatically reduce the time it takes you to build a WordPress site. All good parenting themes with a framework offer a lot of functionality and customization so you don't have to code everything. Users often create child themes to tweak an existing theme without losing the ability to update the parent theme if necessary.
Creating a child theme in WordPress can be as simple as creating a new style.css file in a new folder. All you really need is one line in your new style.css for the header, which defines the template. A reliable parent theme can have as many template files as the parent theme, if not more. A child theme may have template files that are not available even in the parent theme.
When do you use a child theme?
The decision to use a child theme often depends on your needs. Most of the sites that we will build for ourselves and our clients are child themes with a framework. In the rare case that a project is too complex or too simple, then we build it as a standalone custom WordPress theme. As WordPress developers, we need to streamline our workflow while creating quality themes. Creating a child theme from existing frameworks helps us achieve all of this.
For users, we only recommend child themes if you find yourself constantly adding new features for your theme to your theme's functions.php file and / or constantly adding / modifying your theme's style.css file. In these cases, we strongly recommend using a child theme. While we were talking about WordPress a while ago, one of the members asked us, what if we just add custom styles? Is it better to use child theme or custom CSS plugins?
The answer depends on how smart and comfortable you are with technology. If you only change styles for a few elements with custom CSS plugins, it works just fine. However, if you are going to change the entire color scheme, change in CSS, etc., then you should definitely consider using a child theme.
Choosing a good parent theme is important
All WordPress themes are within the parent theme, but not all parent themes contain frameworks. We cannot emphasize this for sure. While any WordPress theme can have child themes, not all of them are designed to be used as frameworks. We've seen numerous newbies make the mistake of creating a child theme from a parent theme that doesn't offer much functionality.
When creating a child theme where you are forced to replace a large parent theme with files, then you must rethink your process. For example, you really like theme twenty eleven and decide to create a child theme. In your child theme, you had a style.css file, and a functions.php file. You decided you didn't like the way the footer looked, so you added footer.php. For the title, etc. If so, then you shouldn't choose twenty eleven as the parent theme. Rather, you should use it as a starter for themes that you include in your own themes.
We've had a couple of users who have created custom child themes, which really should be completely independent custom themes because almost all of the parent theme files have been overridden in them.
In short, you should use a child theme when you need the functionality, features, and power of the parent theme without writing a lot of code for yourself.
Benefits of using a child theme
As with most things, there are advantages and disadvantages to using a child theme in WordPress. Let's take a look at the benefits of the former.
1. Safe Updates
The child theme automatically inherits the features, styles, and templates of the parent theme. This allows you to make changes to your site using a child theme without changing the parent theme in any way. When a new version of the parent theme appears, you can safely update it as all your changes will be saved in the child theme.
2. Easy to expand
The child theme is built on a powerful framework allowing a lot of flexibility without having to write a lot of code. You can selectively modify only the template and function files you need, bypassing other template files. You can add new features and more.
3. Backup Safe
When creating a complete theme when you have to think about all possible scenarios and the code for them. However, when you are working on a child theme and you forget the code for something, there is always a parent theme whose functionality is available as a fallback.
Disadvantages of using a child theme
One of the biggest disadvantages of using a child theme is the time it takes to learn about the parent theme. There is a learning curve, especially when you are working with a solid framework, because each has its own hooks and filters. You really need to know the ones to maximize your potential. In our opinion, this learning curve is a one-off thing. For example, the first few child themes you create may take longer, but after that you will be creating custom sites in the same amount of time. Your performance will improve.
Another flaw was often pointed out that the developers of your parent theme might lose interest and abandon it, drop features that you used in your child theme, or bring in a change that completely ruins your child theme. This is not as bad as it sounds. Mainly because all good WordPress themes are open source and GPL. If the Developer of the parent theme leaves the project, then nothing says that you should stop using it. There are often times when other people are working on a project one by one. If the developer from the original theme removes a certain feature, then you can simply add it to your child theme. You have a Code for it. Finally, if they make drastic changes that you don't like, then you can always avoid updating. The upgrade theme is critical when it is safe to operate. We always encourage users to update their themes because this helps to ensure future compatibility with other scripts and plugins.
If you are using a commercial framework as your base, then you have a support option available to help you update your theme or troubleshoot issues. Also, the Platform as a basis will not just disappear, because there is a stable business of the company with thousands of clients around the world. For example, they removed some built-in widgets, but they made them publicly available as plugins for those who still want to use it.
Output
It is important to know that while you can always create to any theme, sometimes you may not need a child theme. Think about the number of changes you have planned for your child theme, if you are planning minor changes then you can always create a custom style file in your theme's CSS or use custom CSS plugins. If the changes are too extreme, where you find yourself overriding the parent theme's core files, then you should probably create your own theme.
We hope this article will help you understand what a WordPress parent theme is and whether it is right for you or not. If you think we missed something, then please let us know in the comments below.
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 the selection of 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, download speed, portability, cross-browser compatibility, etc.). And the design can always be modified to meet the needs of a specific project.
What is a WordPress child theme
But, if the theme is regularly updated, then all changes made by you 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 as well. However, the files of the parent theme will not change. And the theme will be updated with your changes.
How to create a WordPress child theme
To begin with, you must understand the structure of folders 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 the themes installed by default and by you.
It is in the themes folder, next to the parent theme, that you need to create a new folder with a child theme.
We connect to the server. Through or through the hosting file manager, it's up to you.
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. In a sense, you can assign any name with English characters.
In the child theme folder, create a file style.css... This is a required file. It is he who will be responsible for the interaction of the parent and child themes.
Customizing the style.css file of a WordPress child theme
File style.css in a child theme should contain information about the parent theme. From it, WordPress will understand between which themes the interaction is organized.
Also, the style.css file in the child theme replaces the same file in the parent theme. And therefore, be sure 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 your style.css file:
/* Theme Name: Topic name (in English characters) Theme URI: the url of the theme Description: Description of the theme Author URI: url of your site or page about the author Template: parent theme 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 in the rest of the fields at your discretion.
Now you need to organize the import of styles from the parent theme. The point is that once the style.css file appears in a child theme, WP does not load the same file from the parent theme. And as a consequence, without styles, your theme will look terrible.
To connect styles from the parent theme, you need to register just one line of code:
@import url ("../ parent theme folder/style.css ");
As you can imagine, this is the conditional path to the stylesheet 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 exactly after, all your additional styles should come after the import line.
But in order 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 the child theme folder
In this folder you can store at least all files of the parent theme. But, this is not at all necessary. Only store the ones you will be working with. In which you will make changes. Let's look at a few examples.
Theme's functions.php file
If you store this file in a child theme, then it will be loaded in addition to the main file of the parent theme. Thus, this file will contain only your functional improvements.
Moreover, you should understand that all the changes made to the files of the child theme concern not only improvements, but also changes in the functions and design of the parent theme.
Let's say, in my current topic, I constantly had a problem with the fact that the H1 and H2 headers were confused. I opened the solution to this problem in. And in my new theme, I can do this through my functions.php file. By adding only 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";)
This is 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 just won't be there.
In order for them to be displayed in the admin panel, you just need to copy the files from the parent folder to the child folder.
The file must be copied strictly to the same place where they are 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 admin panel.
And according to the same scheme, copy other files, and edit it in the child theme. The parent theme files will remain unchanged. And then everything is in your hands.
Now we are watching a video tutorial and you can start creating child themes.
That's all, dear friends, the simple algorithm for creating child themes in WordPress is finished. Try, implement, and create your own themes. Just want to draw your attention to the fact that it is best to create a child theme immediately after installing the parent. Otherwise, if you have already picked the parent theme, then your child theme will not be 100% implemented, but it can get crooked.
So, we decided to work on a new theme, chose, created a child theme and work with it.
That's it 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 arose immediately.
1. Maxim, does the use of a child theme somehow affect the website loading speed?
2. I am using a special plugin Function.php to insert code into theme files. If you additionally use another child theme, for example, for microdata. Is this possible?
3. If you copy the entire files from the parent theme, then after updating the theme nothing will change. But the author can delete something from there. We only need to save certain lines of code, and let the rest of the changes take place. Is that possible?
Vasya, hello. A child theme actually expands the boundaries of customizing the theme to fit your needs.
1. The child theme does not affect the download speed. It all depends on the parent theme itself and on the code we insert into the child theme. If all the improvements are valid, then the download speed will be great. I've tested on GTmetrix and Pingdom. The main thing is that the parent theme is nimble.
2. Theme functions in a child theme are in fact all our modifications collected in the Function.php plugin. So, you can freely use the plugin and not go into the theme function file. Well, and accordingly, all the micro-markup needs to be created in the child theme.
3. All files do not need to be copied. Only those in which we make changes. This keeps the parent theme files intact. The files are updated taking into account our improvements. I've already checked.
Sergey Steklov
For some reason, when I update the Customizr theme, the child theme crashes. And all because of the edited files that are in the inc -\u003e 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 works fine. But now my Customizr 3.3.26 works fine with the child. But as soon as I start updating the parent, the child flies. It turns out that the above files cannot be edited at all, since old copies of files may not work with the new version of the theme. I don’t remember exactly what I changed in them. But it seemed like I removed the link to the developer in the basement, edited the slider and something else. The theme is not Pro, that is, the free version is used.Natalia
I'm making a second site on WP, using ready-made templates. The second site is still in Denver, WordPress with the Storefront theme. The theme itself is designed for an online store, 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 theme? Or leave it as it is? And what happens if during the operation of the site you simply DO NOT UPDATE THE TOPIC? 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 understandable information on child themes. Did everything as written. Updated both the engine and the theme - everything works except the wppage plugin. Now pages made with it are displayed as normal pages with a sidebar of the installed theme. I suppose you need to write template_include for wppage pages somewhere. But my knowledge is clearly not enough. Can you tell me, Maxim?
Larissa
Maxim, and me again. I started creating child themes for sites and the question arose: are there any themes that do not support creating child themes? I have a theme on the test domain where it is impossible to activate the child. In this case, the site crashes and gives a 500 error. What can be wrong? I tried to transfer one style.css file and all folders and files of the parent theme (except for the parent style sheet) to the folder with the child theme, anyway, upon activation, an error occurred and the site was pulled out of the backup ...
Larisa, this happens when the path to a folder or file is registered in the child theme, which is not in the parent. You should try to create only the styles file in the child theme without folders and other files. When the theme is connected, it is already possible to gradually transfer the required file and in the end it will be clear what is disturbing the site.
In such cases, I work through an ftp connection, copy the file and check the work. If the site has stopped working, then the cause is in this file. I delete it - the site starts working. And I find out the reason why it is wrong.Larissa
Thanks for the idea! I did this: I created a folder with a child theme and a style.css file. Activated a child theme from the admin area and got a site devoid of styles. Sometimes this picture happens with a slow Internet connection. I got such sites on LAN while learning html)))))))))) The theme has a lot of settings, widgets. There are specials. a field for creating your own styles. I tried to copy the entire CSS of the parent theme in this field, got some kind of mess of widgets (footer "fit" over the header widgets) ... I don't understand why the styles are not connected humanly ... By the way, this theme has two functions files ... One of them is in an additional folder with its own name.
Larissa
Maxim, the code of the VI says that you can create a functions.php file in the child theme, which will be loaded in addition to the parent. In it, you can write directives that will override the directives from the parent theme. Plus, write your own directives. The styles of the parent theme were not connected to me via import in the css file. I had to do it through the functions.php child file. I made transliteration through 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).
Larissa
I removed all unnecessary copyrights, but not through redefinition, but simply registered a section of code from the parent theme function and removed from there the conditions by which links appear. So far, everything is working, but the site has not been configured yet, it is in a classic, original state.
Larissa, it is through the functions.php file of the child theme that all changes are made and they do not crash when the parent theme is updated. But, it works well for modern themes, where everything is tied to the API.
With copyright, if you cannot change it separately, then you need to change the entire block above. Or, the footer file can be copied to a child theme and the copyright changed. It's much easier that way. 😉
Natalia
Yes, it's a pity that I wasted my time. Found your article too late.
I made a blog for my husband, and with every update of the theme, the picture in the header and information in the footer disappear. Every time after the update, you have to adjust all this. Fortunately, I have all this saved in the evernote and I don't have to spend a lot of time on it. But 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 already told you that I don't really know the programming language. For example, when inserting files sidebar-left and sidebar-right with revision, you did not specify how to enclose them correctly in tags, and only the header remains on the site. Again, when inserting a class-content-page with micro-markup according to your lessons, the right side bar in the pages flies under the left. And about functions, I generally did not find anything clear anywhere - when you insert it in any form (original or modified from the lessons of micro-markup), the site becomes inaccessible. But it is he, as I understand it, is one of the main elements for the correct functioning of the child theme. The rest of the files become normal, only Yashka swears at the footer (no google): WARNING: the value "© 2016" in the copyrightYear field is not a valid number value. I have not configured the output of articles from the main one, so, you understand, I had to look for other line numbers when editing. Displaying announcements is also different. I do not show category, date and author tags - a bunch of URLs with errors appear in Search Console. In general, I google, google, and in the end I get to you again. If you can, suggest something - I will be grateful!And this causes some inconvenience. For example, the topic is not translated into Russian. There is only one nepalbuzz.pot file in the languages \u200b\u200bfolder. Let's say the word "Search ..." is highlighted in the search window. I want to change it to "Search ..." In the nepalbuzz.pot file I find this line, it refers to the inc / default-options.php file. I also find such a line there.
But it is not recommended to change files in the parent theme.
I already have a child theme nepalbuzz-child. In style.css everything was specified as expected.
And so I want to change the default-options.php file copied to the nepalbuzz-child / inc folder. But for the change to take effect, I have to copy core.php there and 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 to redirect them all to the parent theme?
In short, there is confusion with links.
And if you just, without further ado, copy ALL the contents of the parent theme to the child? 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! Tell me, please, 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?