June 17, 2020
5min Read
Domantas G.
If you love your current theme but want to modify its features and look, the proper way to do so is by customizing its child theme. This tutorial will explain why this practice is necessary and guide you through the process so that you can create and edit a WordPress child theme regardless of your technical skills.
Easily create and customize themes with Hostinger’s WordPress Hosting!
Since a child theme inherits the characteristics of a master or a parent theme, you can customize its code without breaking the original’s functionality. This way, if a theme gets an update, all of the changes you made won’t be overwritten.
Another reason to use a child theme is that it offers a fail-safe solution if you ever mess up your edits. Plus, it allows you to efficiently track the parts you have changed since the files of a child theme are separate from its parent’s.
As briefly alluded earlier, a child theme is stored in a separate directory from the parent theme, each with its own style.css and functions.php files. You can add other files as necessary, but those two are the bare minimum required for a child theme to function correctly.
Using the relevant .css and .php files, you can modify everything from styling, layout parameters to actual coding and scripts used by a child theme even if the attributes aren’t present in its parent theme.
Think of it as an overlay. When a visitor loads your website, WordPress first loads the sub-theme, and then fills the missing styles and functions using parts from the master theme. As a result, you get the best out of your customized design without sacrificing the theme’s core functionality.
The following instructions use Twenty Seventeen as the base. You can use another theme if you prefer. We’re also going to use Hostinger’s File Manager to add and edit the files, though FTP works as well.
Now, without further ado, here’s how to create a child theme in WordPress:
IMPORTANT: Replace the spaces in a folder or a file’s name with hyphens (-) to prevent errors.
/* Theme Name: Twenty Seventeen Child Theme URL: http://yourdomain.com Description: Twenty Seventeen Child Theme Author: Your Name Author URL: http://yourdomain.com Template: twentyseventeen Version: 1.0.0 Text Domain: twentyseventeen-child */
<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ?>
As you can see, creating a WordPress child theme is no more complicated than working with a master theme!
To personalize your child theme, you need a basic understanding of CSS rules and knowledge on how to inspect elements so that you can pinpoint their CSS code and the class they’re assigned to.
Now, let’s take a look at the basics of customizing one. To perform this, click Customize -> Additional CSS from your active child theme.
Insert the following CSS rule if you wish to change the background color of your WordPress child theme:
.site-content-contain { background-color: #DEF0F5; position: relative; }
The value next to background-color: corresponds to the hex code of the color you choose. In this example, since we are changing it from white to light blue, the result looks like this:
You can create a pleasing display of your widgets by adding some color to the sidebar with the following CSS code:
.widget { background: #B9EBFA; padding: 25px; }
Again, don’t forget to edit the color code accordingly. You should get a result like this:
To change the font type, size, and color of your WordPress child theme, insert the code below:
p { color: teal; } p { font-family: Georgia; font-size: 18px; }
The p tag stands for paragraph. As you can see below, the above rule changed the look of the paragraph’s fonts based on the values specified.
To change the font of other text parts, like the title or the header, inspect the elements to see their CSS parameters first. For the sake of illustration, let’s try changing the title’s font color.
You can do the same to any other elements you wish to change.
Just like how a WordPress child theme’s custom CSS overrides the style of its parent theme, template files allow you to create your own layouts by revoking the default ones.
Your new template must have the same file name and be in the folders that correspond to the original. It’s a good idea to copy the master template file to your WordPress child theme directory and work from that.
The main template files are in the theme’s main folder. For instance, the template for viewing a single post is single.php, and the template for pages is page.php.
Twenty Seventeen also splits its templates into template-parts that are referenced in the primary template using the WordPress function get_template_part(). For example, if you wish to edit page.php, you can start by locating the template parts to see if those are the bits you need to edit. In our example file, line 28 reads:
get_template_part( 'template-parts/page/content', 'page' );
How do we read this? template-parts/page/ is the folder path. Meanwhile, “content” refers to the character in the file name before the hyphen and “page” is after the hyphen.
Together they form the full path of wp-content/themes/twentyseventeen/template-parts/page/content-page.php.
Following the structure, if you want to change the layout of content-page.php, you need to copy it to your child theme folder and place it in this location: wp-content/themes/twentyseventeen-child/template-parts/page/content-page.php.
And that’s it, happy editing!
Another significant advantage of creating a WordPress child theme is the ability to have a separate functions.php file, which, just like plugins, is used to add (or remove) certain features using PHP code.
For example, the following lines will disable the right-click feature in your theme:
function your_function() { ?> <script> jQuery(document).ready(function(){ jQuery(document).bind("contextmenu",function(e){ return false; }); }); </script> <?php } add_action('wp_footer', 'your_function');
WordPress child themes offer a powerful way to create an entirely new project based on the existing master theme’s features without breaking its core function. With a bit of simple coding and directory management, you can modify the child theme as little or as much as you want, providing a wide range of possibilities for your design.
For more WordPress development tutorials, check out our WordPress tutorials section here. Don’t hesitate to leave a comment below if you have any questions!
August 28 2018
Hey Domantas, thanks for the quick and easy guide. I did notice the css commenting is structured wrong in Step 6. You'll want to start with /* and end with */. Hope you don't mind my two cents. Keep it up!
February 20 2019
FYI - When I added your function.php code to twentynineteen-child theme I lost my logo. Not a big deal because I was able to add it back in the customize section under appearance. Otherwise works great. Thank you!
April 30 2019
That is such a simple and effective guide, thank you so much! The only thing I'd miss is how to add a preview image when choosing the theme. It just looks so empty, since the child theme has no image. Thanks again!
June 07 2019
In #11 and #12 you state functions.php and function.php - only one works which is functions.php
Replied on September 26 2019
hey Rob, Thanks for pointing this out. Fixed!
July 01 2019
Thank you for complete and easy explanation. Great support
July 29 2019
Can someone tell me why isn't it better if I just clone the theme folder, rename it, and I'm good to go?
Replied on September 24 2019
Hi SI, You will lose all your custom changes if you update your theme. That is the main purpose of creating child themes.
September 25 2019
I followed this for the Twenty Fourteen theme. However, I get duplication of the sidebar elements. One is simply stacked above the other.
Replied on September 26 2019
Hey George, Most likely you registered 2 sidebars. Check official WordPress documentation https://developer.wordpress.org/themes/functionality/sidebars/
November 23 2019
First, thank you so much for your tutorial. I have been known among my friends and family for being the least tech savvy, but I've been able to follow most of this tutorial. Only the following bit was confusing for me: "It refers to the characters in the file name before the hyphen page – refers to the file name after the hyphen." I am using cPanel File Manager v3. The gist I got from this section is that by clicking on the specific template file and searching (ctrl+f) for template_parts, I can find the exact location of that part of the layout and copy it properly in the child theme, AFTER which I can make any desired changes to the layout through the copy in the child theme?! Any clarifying/reassuring words on this would be oh so deeply appreciated! Links to an explanation you might have already written or something would also be a Godsend! God bless you for making this tutorial. Seriously, I love you. My next hurdle will be making the actual changes lol
December 04 2019
Hello, Nicola! Yes, you are correct! That bit about the hyphen is just how to read the file name if they are referenced inside the code, because it referenced both the location of the file and the file name itself. Hope this helps and good luck!
July 25 2020
Hello, Very amazing article and about those code to switch off right click. This was the code I was looking for but it is better than any plugins. Very very helpful. All the best and thank you.
July 31 2020
Hi, I tried this but in my themes page, I get the following text: Broken Themes The following themes are installed but incomplete. Name Description Storefront Child The parent theme is missing. Please install the "Storefront" parent theme. If I follow the prompts to reinstall Storefront, it notifies me that there is an error as the theme is already installed. Any suggestions? Thanks
Replied on November 06 2020
Hey there! Perhaps you are not using the storefront theme, but have it installed? The child theme could require you to use the theme actively. You can check the section about switching between themes here.
August 21 2020
Thank you, this article is so helpful
September 22 2020
I made my child theme following your example, but my child theme main menu and content pages seems to be somewhat padded on each side compared to the original theme which presents in full width and I cannot seem to find a solution to it. Any ideas?
Replied on November 18 2020
Hey Sean. Not being able to see the issue with screenshots, I'd advise you either message our Success team, or give the theme creator a try, as it could be theme specific issue.
Domantas G.
Replied on September 12 2018
Hey JL, You are correct! Fixed. Thanks for pointing this out!