How To Create A Child Theme In WordPress

What can I create a Child Theme in WordPress?

You are pretty much satisfied with your current WordPress theme, still, you want to change a few things. (e.g. add custom functionality) But, what if you mess something up?

In case you ever wondered if there is a safer way of modifying a theme, you are in the right place. In this beginner’s guide, we will answer this question and much more. Given that, this is a great starting point if you want to learn more about WordPress custom styling methods.

It should be clear, but just in case, let us remind you, you must have access to your server and WordPress admin dashboard to follow this tutorial.

What Is A Child Theme in WordPress?

A child theme is basically an alteration of the existing theme (parent). To rephrase it, you can use it to change a certain part or multiple sections of your WordPress theme without messing with original files. This is made possible by overriding the parent theme’s files. After the child theme file is created, it instantly gets a higher priority than the parent’s theme.

It is important to realize it is not a standalone theme, and can not work/exist on its own (without an original theme). All the changes you make within the child, will not affect the parent theme files. In contrast, updating the parent files will affect the child.

Why Should You Use WordPress Child Theme?

You can learn a lot

This one is pretty obvious of course, you can learn a lot about WordPress development by using child themes. They can teach you how themes work behind the scenes, force you to learn both CSS and PHP, etc..

It’s safer that way

We already described child themes as being a safer way of changing things. This is due to it having totally different files, and not overwriting anything in the process. The original files remain untouched, all the work is stored in new ones.

You can’t lose your changes

If you edit the theme directly, the moment you update it, those changes disappear (You can use plugins to keep modified CSS code, but this only works with minor changes). With child themes, you won’t have this problem.

No need to start from scratch

By already having the structure and the base, your job is much simpler than starting from the bottom.

You can go back to the original instantly

In case you aren’t satisfied with what you’ve done, you can easily deactivate your child theme and activate the main one. Now that we got all that out of the way, we can start making one.

Creating A Child Theme in WordPress

The first thing to remember is that the themes are comprised of PHP and CSS files. We use the PHP file to add functionality and CSS (style sheets) for the appearance.

Since we are not making a whole new theme, we can start this procedure with just two files. A style.css file and functions.php file.

First, we must choose a parent theme to use as template files. Default themes are pretty lightweight so they are a rather good choice. (We will be using Twenty Seventeen theme in this article but you can use either Twenty Thirteen’s files or any other)

The Manual Way – How to Create a WordPress Child Theme

The method itself is rather simple if you know how to utilize copying and pasting codes from the Internet. If you are already familiar with coding, even more so.

The whole creation process can be done locally, on your computer. At any rate, you can upload the files to the server (in the theme folder) and edit them directly, after. Compared to the speed that WordPress hosting services offer, working locally is much faster. Also, since it’s offline, you can’t affect user experience in any way or break your site.

To that end to test your site offline you can use one of the localhosts like XAMPP. A little tip if you choose to do that, if the theme doesn’t update after you alter it, check your cookie settings. (or remove all cookies and refresh)

However, if you still want to do it all online:

Open your FTP client.
Connect to your server.
Go to wp-content > themes.
Make a new folder (a so-called “theme directory”). We recommend that the folder name be similar to your child theme name for clarity. (But you can name it anything you like)
Drag the files to the file manager to upload them to the server. Make sure to copy all the files in proper child theme folders accordingly.
Don’t activate the theme until you are sure you did everything right.

Creating CSS File

As I have said, theme stylesheets files are used to change the look of your site. The customized CSS code can alter specific parts of the theme you want to modify.

To make child theme’s style.css file, you need to:

Open the text editor of choice. (Preferably not a word-processing one like Word, but one more like “WordPad”)
Copy the “code” we provided below.
Save it as style.css.

The “code”:

Let’s review what we just copied. This is the header comment required by WordPress when creating the child theme’s CSS. It tells WordPress all the information it requires to identify the file as a theme. It must be placed at the top of your child theme style.css file.

Now let’s explain each of the items from the header comment:

Theme’s Name (required) – The unique name you chose for your child theme. You can pick whatever you want, it doesn’t have to have either the word “child” or the parent’s name in it.
Theme URL (optional) – URL containing a manual for your theme. You don’t have to fill this in.
Description (optional) – This information will be displayed in the themes menu.
Theme author and author URL (optional) – Pretty self-explanatory, write child theme author’s info if you want to publish your theme.
Template (required) – This one is actually important. Specifically, it tells WordPress what theme will be the base (parent) of our child theme.
Version (optional) – Useful for version control.

There are also “Tags”, “Text domain” and “License”, that you may fill if you plan to publish it.

This may surprise you, but you’ve just created your first child theme. If you copy it to a server, you can activate it in the themes menu.

It won’t look great, though. We still haven’t configured it well.

Creating PHP File

Functions file is there to properly connect the parent theme’s stylesheet and the child’s one. You can also add extra functionality, or update the existing one with it.

Creating the child themes functions.php file is identical to what we’ve already done. Though, the code is different of course.

After you create a file named functions.php, you need to copy and paste the following code inside:

<?php add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'parent', get_template_directory_uri() . '/style.css' ); }

The PHP file in your child’s folder must be placed in the same subfolder as the one in the parent theme. Likewise, this goes for all the files in the child theming process.

That’s it. You can now activate your child theme if you haven’t already. (It will look exactly the same as the parent one)

Creating A Theme Screenshot

At this point, you can go all fancy about it, and upload the thumbnail picture for it too. The image must be called “screenshot” and be placed in the child theme directory. (We are using the image from the original Twenty Seventeen theme)

In general. the most suitable formats for the picture are jpg and png. If you are creating the screenshot by yourself, the recommended dimensions are “1200×900”.

Next, we will show you an alternative way of doing what you’ve just done, and then show you some of the PHP and CSS possibilities.

The Plugin Way – How to Create a WordPress Child Theme

Making child themes can be created rather fast by using WordPress plugins. In this tutorial, we are using one called “Childify Me“. This child theme plugin will create a child theme’s style.css file and child themes functions.php file automatically. It will also make a custom screenshot for the themes menu.

The instructions are pretty straight forward:

Firstly, install and activate the plugin.
Go to Appearance>Customize.
There will be a new option in the bottom left of the screen called “Childify Me”, click on it.
Pick a name for your theme and click on “Create“.
Basically, that’s it.

In the themes menu, you can now select this theme, see its information, and activate it if you wish to.
how to create and install a child theme on WordPress

Remember, like we said, activating the child while you are still not sure of the theme style changes you made, is not recommended.

Modifying A Child Theme in WordPress

After you’ve created the child theme, comes the “customizing WordPress theme” part of the process (the fun part). Coding can sometimes look scary, but fear not, it is not that hard when you put a little effort into it. Besides, we won’t go much into changing the theme’s functions.php since that can be a little more advanced.

CSS, on the other hand, has a much simpler way of organizing codes and you can easily understand the basics. So, if you don’t have any prior knowledge on this subject, follow along.

Firstly, let’s see how we can find parts of the page we want to change.

Finding The Right Element To Edit

To find exactly what you are looking for, can be a little tricky if you don’t know what you are doing. The thing is that the name of each object on the page can vary from one theme developer to another. In truth, this is what makes it hard to predict what we should put in our child theme style.css.

For this purpose, we can use an “Inspect” option in the Google Chrome browser. You can find it at the bottom of a drop-down menu after pressing right-click anywhere on the page.

The new section will open on the right side of your page, where you will see both the HTML code and CSS. To select a specific element on the page you are trying to change, click on the little arrow icon from the picture below.

Now that you have that option active, let’s find the name of our site’s title object. Click on it with the left mouse button.

This will highlight the desired item in the HTML code section, where we can see that it is defined by <a> tag.

We can modify its appearance by just changing the style of <a> tag as a whole. Still, since <a> tag is used for most links, we usually don’t want to do that. So let’s be more specific.

You can clearly see that the <a> tag is inside of a <p> tag labeled “site-title”. This is exactly what we are looking for.

One other thing before we continue, sometimes, as is the case here, the theme can have special events. “has-header-image” is one of these events and it basically means that we can target this element in a specific situation when the site has a header image.

Editing The Theme style.css File

Now that we know what is the name of the object we want to change, we can start doing just that.

To teach you everything about CSS for WordPress Child Theme, this article would be more than a hundred pages long, but you can go a long way with just the basic stuff.

To write any CSS code, you need to:

State the name of the element you want to affect (and be as specific as you can like we mentioned). If you found the name in the “class” attribute, put a dot before the name. For “id” use the hashtag symbol. (so it can be either “.site-title” or “#site-title)
Put your line of code inside curly braces “{ }”
Finish every line with “;”

Given that, we are going to change the color of the text in the title. Let’s use a color that will instantly stand out. (light green for the “has-header-image” situation, and red for without)

If you want to follow along, copy the following code after header comment:

body.has-header-image .site-title a { color: #00ff36; } .site-title a { color: red; }

The result should look like this when there is a header image:

And like this, when there is none:

The True Power Of Child Themes

Obviously, what we saw in the example above is just a small, and fast change. Just imagine what you can do if you either learn more about CSS or copy interesting codes from the Internet.

Try this “little” code, for example:

/* Theme Name: Twenty Seventeen Child Theme URI: http://example.com/twenty-seventeen-child/ Description: Twenty Seventeen Child Theme Author: Fix Runner Author URI: https://fixrunner.com Template: twentyseventeen Version: 1.0.0 */
h1 { font-size: 2em; margin: 0.67em 0; }
#secondary.widget-area li { padding: 0.5em 1em; }
#recent-posts-2.widget.widget_recent_entries{ background-color: #ffeeaa61; }
#archives-2.widget.widget_archive{ background-color: #ffeeaa61; }
#meta-2.widget.widget_meta{ background-color: #ffeeaa61; }
.navigation-top { background-color: #fea; }
body.has-header-image .site-title, body.has-header-image .site-title a { color: #fea; }
.content-area { background-color: #ffeeaa61; padding: 1.5em; text-align: left; }
h2.widget-title { padding: 1em; }
.wrap { margin-left: auto; margin-right: auto; max-width: 90%; }
ul, ol { margin: 0 0 1em; padding: 0em 2em; }
ul { list-style-type: circle; }
code { font-weight: bold; color:#0f1017; }
.comment-body { margin: 5em; }
.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar { border: 0px solid #333; padding: 2px; }

And just like that, it is a whole new theme. The parent’s style is changed to a more narrow and yellowish look. There are more changes here and there but that is not important. Even though it seems like there is more work here, it actually uses the same method as what we explained before.

A Small Guide To WordPress PHP

So, as we said, using Child Theme for WordPress, you can update the parent theme functions without the chance of ruining anything. This can be done with a couple of separate PHP files or using theme hooks. First, let’s talk about PHP in general.

To explain PHP we are going to use a simple example. In it, we will create a widget slot called “footer-widget-example” in the footer. (Bonus Footer Widget is the label that will be in the customization menus, but the real id is the “footer-widget-example”)

To do this first you need to:

Open your child theme’s functions.php.
Copy the following code after “<?php”:
register_sidebar(array( 'name' => 'Bonus Footer Widget', 'id' => 'footer-widget-example', 'before_widget' => '<div class="footer-widget-example">', 'after_widget' => '</div>' ) );
Save the file and close it.

Whenever you want to let WordPress backend know there is a new item it needs to worry about, you must register that item. The register_sidebar () is a command that does just that. In addition, just like with CSS we need to close our commands with “;”.

Secondly, we need to display that element in the footer. If you open the footer.php of your parent’s theme you will see a line similar to this one:

<?php get_template_part( 'template-parts/footer/footer', 'widgets' ); ?>

To clarify, what this means is that the PHP file responsible for footer widgets is in the “template-parts/footer/” location.

So let’s find and edit it:

Follow that path in the parent’s theme directory.
Copy and paste the file in your child theme’s folder. (with the same subfolder structure)
Open it and paste the following after “<?php”:
if ( is_active_sidebar('footer-widget-example')): dynamic_sidebar( 'footer-widget-example'); endif;
So, the whole file should now look something like this:
<?php /** * Displays footer widgets if assigned * * @package WordPress * @subpackage Twenty_Seventeen * @since 1.0 * @version 1.0 */ ?> <?php if ( is_active_sidebar('footer-widget-example')): dynamic_sidebar( 'footer-widget-example'); endif; if ( is_active_sidebar( 'sidebar-2' ) || is_active_sidebar( 'sidebar-3' ) ) : ?> <aside class="widget-area" role="complementary" aria-label="<?php esc_attr_e( 'Footer', 'twentyseventeen' ); ?>"> <?php if ( is_active_sidebar( 'sidebar-2' ) ) { ?> <div class="widget-column footer-widget-1"> <?php dynamic_sidebar( 'sidebar-2' ); ?> </div> <?php } if ( is_active_sidebar( 'sidebar-3' ) ) { ?> <div class="widget-column footer-widget-2"> <?php dynamic_sidebar( 'sidebar-3' ); ?> </div> <?php } ?> </aside> <?php endif; ?>
Save and close.

The line “if (is_active_sidebar('footer-widget-example')): ” asks to make sure if the footer-widget-example is active. If it is then the dynamic_sidebar('footer-widget-example'); line will display it. The “endif” therefore closes that “question”.

That’s it, now you have another slot for widgets. You can now go to the “Customize” menu and choose it.

Creating a WordPress Child Theme – Theme Hooks

A hook is basically a pluggable function that attaches itself to the original theme’s function. Whether adding a new theme’s function is what you want or altering one that already exists, these WordPress functions can help you with that.

Instead of making a couple of different PHP files, you can wrap your code into a function, and put it in functions.php file. That way you can have less unnecessary files in the child theme folder. This is what we call an action hook.

Here is a small example:

function action_hook_example( ) { echo "As seen on Fixrunner.com"; } add_action( 'wp_footer', 'action_hook_example' );

If you want to follow along, copy this in your functions.php. So, what is the result of this code?

This function will print the text that reads “As seen on Fixrunner.com” in the footer. Now let’s explain how you can use this method for your purposes?

To make an action hook you must:

Firstly, make a function by using “function ()” command (ours is named “action_hook_example”).
Program it to do what you require accordingly. Our function uses an “echo” command, that prints (returns) text.
Connect it to another function (in our example this is “wp_footer”) with add_action or similar commands.
Finally, save the file and test it.

You can also modify an existing function using a filter hook. This is surely a great device in any WordPress developer’s workflow. You can do this by using the “add_filter()” command. This way you are getting a custom WordPress function from an old one.

Bonus tip of the day: If you want your WordPress websites to use a custom page template, or you want to create your layout quickly, use a WordPress page builder like Visual Composer. A website builder can surprisingly speed up your work.

Conclusion

In this step by step guide, we explained what a WordPress child theme is, how to create it, and when you should use it in the first place. With the help of child theming, customizing your WordPress themes is both much simpler and safer.

Also, as we said, if you are using a cheaper managed WordPress hosting for your WordPress sites, try doing everything locally beforehand. On the other hand, web hosts (or VPS hosting providers) like wp engine are a great choice if you choose to do it all online.

Now that you know all that, go wild with your designs! Lastly, to see more WordPress tutorials or WordPress related posts, check the rest of our blog.