Blog

Many of our customers ask themselves ”do child themes allow you to change design?”. They want to tweak their themes to include new elements, add different fonts and change colors. Although the majority of our themes have an option to write custom CSS classes, this approach is limited if you want to do some bigger changes to the theme like adding or removing blocks of content and doing template manipulation.

It may seem easy to just go and edit the theme files directly, however this approach has one major drawback: your changes will be lost (overwritten) whenever the theme gets an update from the developer. So in order to avoid that, we will use a special feature called WordPress  child themes.

What are child themes?

Think of child themes as extensions to your parent theme. What happens when you load a child theme is that WordPress will load the base parent theme first and then proceed to use the individual child theme files to replace the original ones (if they exist, of course). So a child theme can have custom CSS styles, but it can also have a custom page.php file for example, replacing the parent theme page template in WordPress. If, for example, a child theme doesn’t have a template for single posts (single.php), WordPress will use the parent template instead.

So whenever you make changes to a child theme, you are actually extending or replacing the theme, without changing the original. This way, if the developer releases an update, your child theme remains intact as it doesn’t touch the parent theme files in any way.

Child themes are also great because they allow you to save your changes and apply them across a number of sites at once, without having to change code every time you install WordPress.

What you will need

Before we begin, here are the requirements to creating a child theme:

1. Access to WordPress admin or FTP access to server where it’s installed.
2. A text editor (even Notepad will do).
3. A couple of minutes and a willingness to follow instructions 🙂

Creating your first child theme

Creating a child theme isn’t hard at all. It will take less than 10 minutes to create a basic child theme that uses the parent theme stylesheet for base styles and a custom stylesheet for your own additions. So let’s see how we can do this.

Step 1: Create a new theme folder

Just like a regular theme, a child theme requires a separate folder. Best practice is to append “child” to the name of the parent theme. So if we for example would be customizing Megalith, we would name the folder “megalith-child”. You can create this on your computer and later upload it through a FTP client or by creating a zip and uploading it through the WordPress interface.

Step 2: Create a new style.css

Inside the new folder, you will have to create a new style.css file.

Here’s is the required part that WordPress needs to see before you can enable the theme in the dashboard. This must be present at the top of the file. Here’s how we would do it if we’re creating a child theme for the Megalith theme.

/*
 Theme Name: Megalith Child
 Theme URI: https://teslathemes.com/wp-themes/megalith/
 Description: Megalith Child Theme
 Author: TeslaThemes
 Author URI: https://teslathemes.com
 Template: megalith
 Version: 1.0.0
*/

One important thing to note is that the “Template:” part must match the folder name of the parent theme. This field is case sensitive, so make sure to adjust accordingly. Edit the other fields as you see fit.

After you’ve added this piece of code at the top of the style.css file, you can start adding your custom CSS code right below.

Step 3: Create a functions.php file

The last step is to create a functions.php file that will tell WordPress to import the parent theme stylesheets.

Now previously, this step wasn’t required and theme developers could just use the CSS @import statement to include parent theme css files. However the WordPress folks no longer recommend this method of loading files. Using functions.php is now the best way of doing so.

In the same directory that you created the style.css, create a functions.php file:

<?php

    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        wp_enqueue_style( 'megalith', get_template_directory_uri() . '/style.css' );
    }

?>

This will tell WordPress to import the style.css of the parent theme. Note that if the parent theme has more than one stylesheet (i.e. screen.css, mobile.css, ie.css, etc..) you will have to duplicate the wp_enqueue_style line for each file. For example, the Megalith theme uses a screen.css, so we’ll include another line in the functions.php file:

wp_enqueue_style( 'megalith', get_template_directory_uri() . '/css/screen.css' );

Step 4: Upload theme to your site

Now that we’ve created the minimum essential files for a child theme to work, it’s time to get this child theme into WordPress.

Two ways of doing this:

Upload the files with a FTP client like Filezilla. You will need to have the login details for your server.

OR

Create a zip archive of the child theme folder (most recent installations of Windows and MacOS have integrated zip support and can be accessed by right-clicking on a folder) and upload it through WordPress by going to the Appearance, Themes tab in the dashboard.

Step 5: Activate!

Now all that’s left is to activate and use the theme. Go to Appearance / Themes and search for the child theme you just created. If you did everything right, you should see your child theme there. All that’s left is to click Activate.

Changing template files

Let’s say that you want to change an element or a feature of the theme. For example, lets take the TwentyFifteen theme that comes with WordPress and change some of its functionality.

By default, when viewing single posts in this theme, the post thumbnail is shown at the top. What if you wanted to remove this function?

What we have to do is take the content.php file from the parent theme and make a copy of it in our child theme directory. Then we will edit the file from this:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 <?php
 // Post thumbnail.
 twentyfifteen_post_thumbnail();
 ?>

<header class="entry-header">
 <?php
 if ( is_single() ) :
 the_title( '<h1 class="entry-title">', '</h1>' );
 else :
 the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
 endif;
 ?>

to this…

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
 <?php
 if ( is_single() ) :
 the_title( '<h1 class="entry-title">', '</h1>' );
 else :
 the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
 endif;
 ?>

As you can see, we’ve removed the part that contained the twentyfifteen_post_thumbnail() function which was responsible for generating the thumbnail. In general, WordPress functions are labeled pretty clearly so you can tell what a function does by its name.

For more information, check out this article to see which files are responsible for which templates in WordPress themes. In case you’re trying to customize one of our themes and you don’t know which file to edit or you’re not sure where to find a theme element, don’t be afraid to ask about it in the support forum.

Custom functionality

In the first part of this tutorial we added the required functions.php file and used a function to include the parent theme stylesheet(s). But there’s one significant difference in how WordPress loads this file: unlike the other theme files, the functions.php of a child theme does not overwrite the functions.php of the parent theme. It is in fact loaded right before the parent file so it behaves like an extension to the main functions.php

So if you want to change a parent’s theme functionality (assuming that the theme is doing it’s magic through functions.php) and the parent theme is declaring it’s functions through the conditional function

if ( ! function_exists( 'theme_special_nav' ) )

then you can do so by simply creating a function with the same name in the child theme functions.php file

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
       // Do something.
    }
}

This way the child theme will be the first one to define the function and so the interpreter will no longer load and run the original parent function because it has already been defined.

Using the functions.php you can also use and define custom fonts as we wrote in a previous tutorial.

Wrapping up

You know now what it takes to create a child theme. This can come in handy whenever you want to tweak a theme to make it unique for your site. The other benefit of child themes is that your tweaks are kept safe regardless of updates and can be moved easily whenever you move or reinstall WordPress.

We recommend that you also check out the Wordpress Codex page for child themes and this W3schools CSS tutorial to get better at writing CSS code.

Happy tweaking!