At least once, every WordPress user with not much experience tried to adjust a ready WordPress theme. Such an adjustment usually means changing a logo, colours or an image in a headline, adding your own menu, form or another element, etc. But there may also be situations when you need to change code in your theme files. Many users forget about one thing: they edit a parent theme files without creating a backup. It is a very big mistake, because all changes will be lost during the next theme update.

What is the best way to edit a theme and keep all the changes? Should you create a backup? This is one solution, but you will need to move pieces of code to files each time. Do you have time for it?

There is another, much simpler solution, offered by WordPress developers: you should never modify theme files and all the changes should be created with the use of so-called “child themes”. Today we will show you how you can quickly create a simple child theme in WordPress CMS. However, before we start, we would like to explain what exactly a child theme is.

What Is a Child Theme?

A child theme „inherits” its appearance and functions from its parent theme and allows you to make changes without having to modify original files. The difference between a child theme and a parent theme lies in the mechanism of action. While displaying a page, WodPress first “looks for” an appropriate file in a child theme folder. If it is not there, Wordress looks at a parent theme. This is why a child theme can contain only modified files. The rest will be connected to a parent theme. Therefore, it is a simple and effective solution.

Creating a Child Theme

In order to start creating a child theme, you must first choose a parent theme. In our case, it will be Twenty Fourteen, which is one of the default themes in WordPress 4.3.1. Then you need to go to the wp-content/themes folder on the server, which stores all installed website themes.

Create a new folder in the wp-content/themes folder. Call it twentyfourteen-child”. It will contain your child theme (IMG 1).

image 1

The WordPress CMS needs to „understand” that there is a child theme in the wp-content/themes/twentyfourteen-child folder. This is why the folder must contain the style.css file (IMG 2). Create this file and put the following code into it:

/*

Theme Name: Twenty Twelve Child

Template: twentytwelve

Author: the WordPress team

Version: 1.0

Text Domain: twentytwelve-child

*/

@import url(“../twentytwelve/style.css”)

The above code identifies the theme „in the eyes” of the system. Using the @import url(“../twentytwelve/style.css”) line, the style.css file shows WordPress which theme is the parent.

image 2

In order to check if the style.css file works correctly, go to go to the administration panel of your website. In the Appearance section, you should find the Tweenty Foourteen Child theme that you have created (IMG 3).

image 3

The difference between the child theme and other motives is that the child theme does not have any image. In order to add it, you need to create a new file called screenshot.png, which should be located in the twentyfourteen-child file. We will not create a new image now. Instead, we will use the one that can be already found in a file with the parent theme. Just copy it from one of the folders and move it to another.

If everything has been done correctly, you will see the image under your theme name in the Appearance section when you refresh it. Activate the Twenty Fourteen child theme and proceed to its modification (IMG 4):

image 4

As we have already mentioned above, the files that are located in the child theme folder, have priority over files located in the parent theme folder. It means that if you want to modify a corresponding element on the website, you need to move to the child theme only a file that is responsible for it, and not all the parent theme files.

Let’s see how this mechanism works, for example when editing a website header. We need to move the header.php file to the child theme folder. However, first we need to remember what the website based on the unmodified Twenty Fourteen theme looks like (IMG 5):

image 5

As you can see, there is the website name in the headline. Let’s try to add a picture and a few text lines to it. You need to start from moving the header.php file, which is located in the parent theme. Move it to the twentyfourteen-child theme and move on to edit the file: add an image and a slogan. Save all the changes and refresh the website (IMG 6):

image 6

As you can see, our website has a new headline now. It is based on the file located in the child theme folder. And it is the next proof that files in this folder are more important than files from the folder that contains the parent theme.

Child theme style edition

The biggest problem when using a child theme lies in the style.css style shit modification. For example, when you want to change the text bandwidth in the style.css file located in a folder with a child theme, those changes will not be taken into account. In order to let WordPress accept such modifications, you need to create a separated style sheet and connect it to the child theme. We will show you how to do it, presenting a simple example.

Create the newstyle.css file. Add the following spoiler code into it:

.site {

margin: 0 auto;

max-width: 90%;

overflow: hidden;

}

Unfortunately, the @import url directive works in one style.css file only, so you cannot use it to connect another style sheet. This problem can be solved by the wp_enqueue_style() function. In order to use it, you need to create the functions.php file, which should be placed in the childe theme folder.

When you have already created the file, add the following code into it:

<php

function get_child_template_directory_uri() {

return dirname( get_bloginfo(‘stylesheet_url’) );

}

function child_styles() {

wp_enqueue_style( ‘twentyfourteen-child-style’, get_child_template_directory_uri() . ‘/newstyle.css’ );

}

add_action( ‘wp_enqueue_scripts’, ‘child_styles’,12);

?>

As you can see, thanks to the wp_enqueue_style() function, we were able to connect the new newstyle.css style sheet. If necessary, you can copy the given part of the code and connect another style sheet. What is more, with the help of the functions.php file, you can use other necessary and independent functions, which will not be lost when updating your theme.

Summary

Using a child theme is the best solution to edit appearance on your website based on WordPress CSM. Thanks to it, you can keep all changes while updating you parent theme. What is more, a child theme contains only modified files, so it occupies little space on the server.