How to create a child theme in WordPress. Child Themes in WordPress

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.

The WordPress platform is a magnet for those who want to take matters into their own hands, who want to take full control of their website and want to be independent in managing it. 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 you can't change.

I mean, just compare the default themes, Twenty Fifteen and Twenty Fourteen. It's hard to believe they're running 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 who don't think about this constantly. However, a problem arises.

Setting Up WordPress: You Could Be Doing It Wrong

When trying to make changes to a website, a huge number of people prefer to edit the theme itself. This means they are changing or adding files to their current . This creates a number of problems.

The biggest disadvantage is that any changes made to the theme will thus be lost once the theme is updated by the developer. As a result, users will either be unable to keep their theme up to date (which is bad for security) or will lose any customizations they have made.

In any case, the situation is far from ideal.

A much better idea is to use . This allows you to make any number of changes to your website without touching the original theme files.

Sounds good? Great, because in this article we'll take a closer look at what it is. child themes in WordPress, how to create them and how to use them, how to properly set up your website.

What are child themes and how to use them?

When talking about child themes, we must first talk about parent themes. A theme only becomes a parent 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 needed by the parent theme.

However, any such topic Maybe being the theme's parent, 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 the WordPress backend, a child theme behaves like a regular theme. You can find and activate it in the “Appearance” → “Themes” section, just like any other theme.

The big difference is that a child theme is completely dependent on its parent to function. Without a parent theme, the child theme will not do anything, and cannot even be activated.

This is because a child theme is not a theme in its own right, it instead modifies or appends files to an existing theme. It uses everything in the parent theme and only changes 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, you can build on an existing one, thereby speeding up development time.
• You can take advantage of the functionality of complex structures and parent themes while customizing the design to suit your needs.
• You can update the parent theme without losing custom settings.
• If you are not satisfied with your settings, simply disable the child theme and everything will be as it was before.
• This is a great way to start learning how themes work.

A child theme can contain image folders, template files, and more. You can enable as many settings as you want.

In fact, a child theme only needs three things: folders, stylesheet files, and . That's all. And then, these two files may even be largely empty.

When to use a child theme

So, is it always necessary to create a child theme whenever you want to make any changes to your WordPress website? No.

If you plan to make only minor changes, such as color changes or a different font, then it is better to install a custom CSS plugin. . Many themes now also offer the ability to add custom code natively.

However, if you are planning to introduce big changes such as a major design overhaul, a few template changes or anything else in between, then a child theme is definitely the solution.

Basic child theme setup

Okay, now that we know what a child theme is and what they can do for us, let's look at how to create one step by step. For our example, we will use Twenty Fifteen, the latest default theme for WordPress. Don't worry, it's very easy and you'll get it in no time.

Note:

The following actions 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 regular 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 the folder.

Like any other theme, child themes are found 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, the same name as the parent theme, and add -child . Since we're using the twentyfifteen theme, we'll name our folder twentyfifteen-child.

You can use any name you want; just make sure not to include spaces because this can lead to errors.

Creating Style Sheets

Now that we have our folder, we will need a style sheet. In case you don't know, a style sheet contains code that defines the design of a website. Themes can have multiple style sheets, but we'll stick with one for now.

Creating a style sheet is easy: Just create a new text file and call it style.css . Ready! However, in order for it to work, we will have to insert the following code, called a “stylesheet header,” at the very beginning of the file (code courtesy of 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 appear for your theme in the WordPress backend.
• Theme URI
  The link points to a website or demo page for the topic. This is typically 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 appear in the theme menu when you click the “Theme Details.” button.
• Author
  This author's name is you in this case.
• Author URI
  You can put your website address 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 right information 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 typically released under the GPL license; you must adhere to the same license as your parent theme.
• License URI
  This is the address where the link to your theme license is indicated. Again, stick to what your parent topic says.
• Tags
  Tags help others find your theme in the WordPress directory. So, if you include some, make sure they are up to date.
• Text domain
  This part is used for internationalization and to make topics translatable. This should fit the “slug” of your theme.

If you're feeling a little overwhelmed (already?), you may be happy to know that not all the information is actually needed. 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, my child theme's header 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

Once you've created your folder and stylesheets, go to Appearance → Themes and find your 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.

Okay, now click on the button that says “Activate.” Good job! Your theme has been activated. However, if you look at your website, it will look like this:

Don't worry, everything is fine. You didn't screw up. Get your face out of a paper bag. The reason your site is empty is because it doesn't have any styling yet.

We just wanted to show you that, in theory, having a style sheet and a folder is enough to create a children's theme. And if it works for you, then you have already done it! However, let's get to the improvement.

Creating a functions.php file

The functions.php file allows you to change and add functionality and features to your WordPress website. It can contain both PHP and built-in WordPress functions. Additionally, you can create your own functions.

In short, functions.php contains code that fundamentally changes the look and feel of a website.

Creating a file is as easy as creating a style sheet, if not easier. All you need is a text file called functions.php and then paste the following code:

Let's see what happens when we change the order of the code:

As you can see, after saving and loading the file into your child theme folder, each blog post's image will now appear below the post title.

Of course he could use some styling, but you get the idea. You can use this method to make all the changes on your website. Just remember to give the child theme the same tree folder structure as its parent. For example, if the file you want to change is in a folder called page-templates in the parent theme, then you can create a folder with the same name in your child theme's 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, it is also possible to use files that exist only in a child theme. 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 demonstration purposes.

To create a full width twenty fifteen page, we need to do four things: create a custom page template, a custom header and footer file, and then add some custom CSS. Let's start with the page template.

For our custom page template, we'll simply copy the page.php file from the parent theme, rename it 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 to the code so it looks like this:

The only thing we've done here is introduced a header that tells WordPress that this is a page template, where we've changed get_header and get_footer so that they will include two files called header-custom.php and footer-custom.php .

Let's go back to the page we want to see at full width and change the page template to 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 header.php and footer.php into the child theme's folder, and rename them to header-custom.php and footer-custom.php, respectively.

Until now, our page looked the same as before. It's time to tune up. Let's start with our custom header.

Once again, we'll copy the footer.php file from the twenty fifteen parent theme and paste it into our child theme. This time, however, we will leave his name as is.

After this, we need to add a call to our new footer widget, so it will look like this: