What is a child theme?

 

The easiest way to think about a WordPress child theme is that it is an extension of another theme. Once you create a child theme, the main theme becomes a “parent theme”. The child theme is nothing without it’s parent and cannot even be activated in your WordPress Theme dashboard. For a child theme to work you’ll need the child theme activated alongside the installed parent theme.

 

 

This is because the child theme does not include all of the functionality it requires to work on its own and instead imports certain files from it’s parent theme. It uses all of this basic functionality and then adds or changes only the parts that you want to customise.

By creating and using a child theme you can alter literally any aspect of the parent theme. Using some CSS, HTML and some PHP you can transform the original parent theme into something completely different without having to change any of the original/parent theme’s files.

 

Why use a child theme?

 

The last point above is an important one so we’ll state it again – “without having to change any of the original or parent theme’s files”. If you’ve ever changed any of your theme’s core files (maybe you added code to your themes functions.php or changed the colour of an element in style.css) and then updated, you’ll have learnt the hard way.

 

 

Every time an update is released for your theme and you run it, all of the custom code that you added to ANY of the theme’s files will be overwritten and effectively deleted. There is no way around this if you want to keep your theme up to date, which is essential for security as well as receiving the latest features.

The only way around this is to create a child theme. Any code that you add to this new theme will not be deleted as you continue to update your parent theme. Pretty useful!

 

When should you use a child theme?

 

When it comes to customising a WordPress theme you can accomplish this in a few different ways. If you know that you’ll only want to change a few elements of your theme, such as the colours of your headers or the padding of certain elements then you can get away with installing a custom CSS plugin like this one.

If you’re using Divi, or a theme with similar functionality, then you can add custom CSS to the box within “Theme options” instead.

Where a child theme comes in really handy though is when you want to amend other theme files such as the header.php file or 404 file as well as how the website looks. With your child theme you can amend any aspect of your theme and are not limited to custom CSS plugins.

 

How to create a child theme

 

Although a lot of people are put off by child themes, it’s actually really easy to create one. In fact, a child theme really only needs three things: a folder, a style sheet and a functions.php file. The two files within the folder can even pretty much be empty and only require a few lines of code to work. Obviously as you start adding custom code they will grow, but initially you’ll have to add very little to get it working.

If you’re in a rush you can download our ready made child theme for Divi here. It’s better to learn through doing though and if you’re feeling up to it just follow the instructions below to create your own.

Note: There’s a few ways that you can accomplish the below. If you have a code editor like Brackets or Text edit, you can follow all of the instructions below locally using your computer. If you don’t, it’s probably easier for you to log into your hosting cPanel and use the File Manager to create the folder and files below instead. Your last option is to use a ftp client to access your hosting File Manager, but we always find this way a bit more fiddly.

 

Step one – create a folder

 

The first step to making your child theme is to create a new folder. Best practice dictates that you call this folder the name of your parent theme, followed by “-child” but it really is up to you.

 

 

For this example we are creating a child theme of Divi, so we are going to call our folder “Divi-child”. The only limitations for naming your folder is you cannot use spaces. Using a space such as “Divi child theme” is likely to cause you problems later down the line.

 

Step two – create a style.css file

 

The next thing you’ll need to do after you’ve created and named your folder is to save a file called “style.css” within it. Once you’ve created your file you need to open it and add a few lines. If you are tinkering and don’t intend to submit your child theme to the WordPress directly, you can get away with only adding these details:

 

/*
 Theme Name:   Divi child theme
 Description:  A child theme of the Divi theme by Elegant Themes
 Author:       LP Design
 Template:     Divi
 Version:      1.0.0
*/

 

Your theme name and description are quite simple. Similarly, the author is your name and the version can be left as 1.0.0. The only essential detail here is the Template, which needs to match the name of your parent theme exactly.

 

 

Once you’ve copied and pasted the above and amended with your specific details you’re done with the style.css file. In future when you want to change the appearance of the child theme with CSS, this is where you will add it, anywhere below the details you’ve just copied and pasted.

 

Step three – create a functions.php file

 

The third step involves creating another file. Open your new child theme folder and create a file called functions.php. This file is another simple one to complete, and all you’ll need to do is copy and paste the code below into it.

 

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

?>

 

This code pulls the functionality and css from your parent theme into your child theme. It will pull all code from the parent theme and check your child theme files for any changes. If there are any amendments, for instance you’ve changed the colour of the menu bar, it will ignore the parent theme and use your code instead.

 

 

Step four – add a thumbnail image

 

This step is optional and only cosmetic in nature. This thumbnail image is what will appear in the Theme WordPress dashboard. All you need to do is create a PNG file, named screenshot.png, and place it in your theme’s folder (in our case, Divi-child). Make sure to put it in the top-level directory and not in a subdirectory such as images.

 

 

The recommended size is 880 × 660 pixels, although it will be shown as 387 × 290.

Easy!

 

Step five – upload your child theme

 

Finally, all is left to do is upload your theme. If you’ve created it locally on your computer you’ll need to zip it down and upload it through your WordPress dashboard. If you’ve created it using file manager you’ll need to move your child theme folder into wp-content > themes.

Once activated you’re free to start customising without worrying about losing your changes!

 

Bonus – adding and customising extra files

 

So you’ve now got a child theme active and that’s great – you can change the appearance of the parent theme until it’s unrecognisable. But what happens if you want to change how the header works or 404 page looks?

If you find yourself needing to alter any files of the parent theme you can relax as it’s just as easy as the steps you followed above. All you need to do is copy the file you want to edit from the parent theme into your child theme, keeping the file structure the same.

 

 

For example, if you want to amend the imaginary “Lightbox.php” file thats found in the folder of your parent theme > includes, you’ll need to create an “includes” folder in your child theme folder and copy the lightbox.php into this. Similarly, if you wanted to copy a file thats found in you parent theme’s main folder, then all you’ll need to do is copy it straight into your child theme’s main folder.

Once you’ve copied the file you can edit it or add custom code to the end of the document.

Happy editing!

 

Creating a child theme in WordPress in 5 quick and easy steps ultima modifica: 2017-12-05T15:56:11+00:00 da Liam Pedley