How to create a child theme in WordPress - a step-by-step guide

How to create a child theme in WordPress – Step by step guide

You want to modify your WordPress website’s theme but don’t want the hassle of losing your customizations everytime you update it? The answer to your problem is a child theme! In this blog post I’ll guide you through, step-by-step, how to create a child theme in WordPress from scratch. Let’s do this!

What is a WordPress child theme?

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. (Source WordPress.org)

What are the benefits of using a child theme in WordPress?

Although a child theme isn’t necessary for all WordPress users, it does have a lot of useful features for the creative WordPress adventurer.

Benefit 1

Normally, if you decide to modify your theme’s core template files or stylesheets these modifications will be lost when you next upgrade. To preserve your modifications it’s best practice to use a child theme and add just the modifications to that. You can then update the parent theme and your modifications will remain in place.

Benefit 2

What happens if you modify your child theme and something goes wrong? With a child theme you can simply switch to your parent theme (unmodified) rather than frantically upload a recent backup of your theme (if you have one!).

So in essence, a child theme adds a safety net when it comes to customization and can make you more efficient with your time.

What does a basic child theme consist of?

In its most basic form a child theme contains:

  • a folder (in which lives…)
  • a style.css file
  • a functions.php file

Create a child theme in WordPress

The child theme folder should be placed in wp-content/themes within your website’s file structure.

For clarity I’d recommend appending your folder title with -child. Eg. zaposphere-child

The title of your child theme folder should not contain spaces. Use hyphens instead to avoid errors.

Step 1. How do I create a style.css file?

In a basic text editor that allows you to create .txt files (TextEdit for Mac users) enter the following information in a new document. If you have more sophisticated software, like Dreamweaver, create a new stylesheet document.

/*
 Theme Name:   Zaposphere Ultimate Child
 Theme URI:    http://www.zaposphere.com
 Description:  My Child Theme
 Author:       That awesome guy
 Author URI:   http://www.zaposphere.com/about/
 Template:     zaposphere-ultimate
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         awesomeness, responsiveness, WordPress
 Text Domain:  zaposphere-ultimate-child
*/

Next, replace the example text above with the details relevant to your theme.

  • The theme name can be anything, your entry will just affect how it’s named throughout the admin area.
  • The template refers to the name of the folder of your chosen parent theme.
  • The text domain refers to a theme parameter name, generally used in translation plugins. It’s best to set this to the name of your child theme folder.
  • Additional CSS styles can then be added to the document below this text

Save the file as style.css (if possible) otherwise save as style.txt and rename the file to style.css on your computer.

For Mac TextEdit users, convert your document to plain text before saving.

make textedit document plain text before saving

Step 2. How do I create a functions.php file?

If you own web publishing software like Dreamweaver, create a new PHP document. Otherwise, using the same method as above, create a new basic text document and enter the following code:

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

}

The code above tells the site where to look for the appropriate stylesheets. Your child theme’s stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Try this instead…

<?php

function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Make sure there are no characters, spaces or paragraph breaks before the opening < character nor after the last semi-colon ; character.

Save the file as functions.php (if possible) otherwise call it functions.txt and rename the file to functions.php on your computer.

If your parent theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure you enqueue those dependency styles as well. (replace the stylesheet names in red with those used in your theme)

<?php

function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/ie.css' );
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/main.css' );
   wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style )
    );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

Step 3. Where does the child theme folder live?

Once you’ve created a folder with your style.css and functions.php files in it, the folder needs to be placed in your wp-content/themes folder. Access to your website’s file structure can be gained either through your web host’s control panel (File Manager) or with an FTP client software like FileZilla.

[aside]The child theme does not live in a sub-folder of your chosen parent theme! Place the folder alongside the parent folder in the wp-content/themes directory.[/aside]

Step 4. How do I activate my child theme?

Log in to your website as an administrator and go to Appearance>Themes. You should now see a new theme that you can activate! Try it and take a look. It shouldn’t look any different to normal. If it doesn’t look right, try re-saving your menus (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images).

Step 5. How do I modify templates in a child theme?

In order to modify theme template files you will need to copy them first from your parent theme folder and place the copy in your child theme folder.

The version in the child theme folder will overwrite the version in the parent theme. If you delete the child theme copy your website will revert to the original copy in the parent folder. As long as the file has the same name it will override the matching file in the parent theme folder.

As well as modifying existing files you can also add new template files into the child theme folder. I’d recommend duplicating and renaming a similar template file and modifying that to suit. Make sure you give it a unique name!

The child theme functions.php file and its differences

Do not copy the content of functions.php of the parent theme into functions.php in the child theme.

The functions file acts differently to other template files. Instead of overwriting its equivalent in the parent folder it will load the content in addition to (and sequentially before) content in the parent’s functions.php file.

Additional customization possibilities using a child theme

In additional to adding new styles, templates and functionality to your child theme you can also remove unwanted functions. Removable functions include: theme supports, custom post types, taxonomies, menus, widgets, sidebars, shortcodes, additional image sizes, metaboxes, javascript, stylesheets, actions and filters.

However to explain all that I’ll need to create a new blog post ;)

Step-by-step summary – How to create a child theme in WordPress

  • Step 1. Create a new plain text document, paste in the text, modify the text to suit, save it as style.css
  • Step 2. Create another plain text document, paste in the text, save it as functions.php
  • Step 3. Place the two files in a folder (append the title with -child and don’t use spaces)
  • Step 4. Upload the folder and its contents to your wp-content/themes folder
  • Step 5. Log into your site and activate your new theme (Appearance>Themes)
  • Step 6. Check the site and possibly re-save your menus and settings
  • Step 7. Add new styles into your child theme stylesheet/s, add new functions into your functions.php file
  • Step 8. To modify template files, first copy them from your parent folder keeping the same filename
  • Step 9. To add new template files, first copy a similar template file from your parent theme and rename it before placing it in your child theme folder
  • Step 10. Sit back and feel proud of yourself for learning something new. Use that time to share this post with others and add your story in a comment below. ^_^

 

If you’d like to learn more about anything mentioned above, please leave me a comment below. Thanks for your support. Until next time. Stay awesome! ^_^

Posted in Engineering Deck, Functionality, WordPressTagged , , , ,

Free WordPress tips for your inbox

Have our latest blog posts delivered straight to your inbox.

Comments 9

  1. Hi there,

    I am trying to implement my child theme. Thus far the theme shows up and has been activated in the WordPress backend (admin pages). I used to use the @import style with this site previously and am trying to switch over now to the newer style.

    My parent theme has multiple style sheets – 2 in addition to the style.css. This is the code I am using for my functions.php:

    My style.css looks like this:

    /*
    Theme Name: MTSqaured Child Theme
    Theme URI: …
    Description: MTSquared Child Theme
    Author: Craig Twofoot
    Author URI: http://www.craigtwofoot.com
    Template: gt3-wp-oyster
    Version: 2.5
    */

    The gt3-wp-oyster is the name of the folder that contains my parent theme. Should this just be the actual name of the them which is “Oyster”? Let me know.

    I have my style.css file in place. Keep in mind this was working before and now it’s not. Directory/folder structure is fine. My child style.css and my child’s functions.php are in the child folder. I have copied over and edited some of the parent’s PHP files with the same filename to override the parent’s files but that is not working. I have added new stylesheets to the /css folder within my child theme and none of those stylesheets are taking effect.

    Any help is appreciated,

    Craig

    1. Hi Craig, thanks for your comment.

      First off, are you sure your theme Oyster is not already a child theme of MTSquared? You can’t make grandchild themes. :(

      I couldn’t see your functions.php snippet in your comment, but may I suggest you double check the additional css file paths in your functions.php file. Perhaps where you enqueue your child styles you need to replace this:

      get_stylesheet_directory_uri() . '/style.css',

      with this:

      get_stylesheet_directory_uri() . '/css/style.css',

      …so that you target the files that live in the subfolder. Also, don’t worry about the fact that your parent theme is called Oyster yet the parent theme folder/directory is called gt3-wp-oyster, that’s not unusual. You need to use the folder name.

      Let me know if this helps you diagnose your issues.

      1. Thanks for your help.

        Just to clarify, my parent theme is Oyster. My Child theme is MTSquared. The child theme WAS working up until recently, it could be because of a plugin update, etc. I am not sure. The child theme is still present and is set as active in my wordpress installation, HOWEVER, it is no longer loading any of my child stylesheets (ones copied over from the parent theme and then modified). Because I was having this issue I decided that I would get away from the old @import method that I had been using in my style.css file and move to the more modern method of enqueuing stylesheets. This is how I came across this post. I followed your instructions above as closely as I could but it is still not working. Please see my functions.php code below and tell me if I am doing this correctly or not.

        Note that YES, the style.css files are in the root folder of the theme. That is not a mistake, that is how the parent theme creator had it so that is how I left it.

        1. It doesn’t seem to like the code snippets…

          function theme_enqueue_styles() {
          wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
          wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/css/theme.css’ );
          wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/css/responsive.css’ );
          wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( ‘parent-style’ ) );
          wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/css/responsive.css’, array( ‘parent-style’ ) );
          wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/css/theme.css’, array( ‘parent-style’ ) );
          }

          add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

          1. It’s possible your parent styles are overriding your child style modifications. I believe you need to set ‘parent-style’ as a dependency/variable to ensure the child theme styles load after the parent styles and therefore take precedence.

            In order to do this I suggest you try this:

            function theme_enqueue_styles() {

            $parent_style = ‘parent-style’;

            wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
            wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/css/theme.css’ );
            wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/css/responsive.css’ );
            wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_style ) );
            wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/css/responsive.css’, array( $parent_style ) );
            wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/css/theme.css’, array( $parent_style ) );
            }

            add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );

            =======

            Let me know if this helps.

  2. Hi there,

    I tried adding in the variable but it did not help. :(

    The company that makes the theme is being very unhelpful. All that they have informed me is that this theme is a child theme already? I do not know how this is possible. Perhaps you can explain it to me? After messaging back and forth with the theme company I realized English is not their first language which is also not helping.

    From my limited understanding of a parent and child theme relationship I would have a folder in my wordpress installation folder under the “themes” folder that would be the parent theme (in this case the “gt3-wp-oyster” folder) and then create another folder which would be for my child theme (in this case my “mtsquared” folder). I then place a new style.css file and a new functions.php file into that child folder (mtsquared).

    For the coding files: any .php files found in the child theme folder that have the same file name as one found in the parent folder will be used in favour of the file found in the parent theme folder.

    For styling files: it is my understanding that I must enqueue all the styling files as per my code above in the functions.php file found in the child theme folder. This will load all of the original styling sheets and then load the ones found in the child theme folder that I have added new styling code too – thereby overriding some of the styling from the original files if I so choose.

    Hopefully you will be able to explain where my understanding of the parent/child theme has gone wrong or what I am doing wrong in the process. Also, it’d be very helpful to know how a company could sell me a theme that is a child theme? I am almost certain this is just a language barrier mistake but would like confirmation.

    Thanks,

    Craig

    1. I feel your pain. :( I’ve not come across this issue before and I suspect the parent theme is being referenced in a different way. The symptoms you are describing (php mods working but not css mods) are known issues with grandchild themes. Grandchild themes just aren’t supposed to be used. The fact that you were provided with a child theme and not its parent is pretty bad practice or just plain misleading.

      The possible ways forward are:
      • Remove enqueuing all parent theme CSS files in your grandchild (mtsquared) theme functions.php file (assuming you’ve got copies of them all in your grandchild theme)
      • OR (If your theme provides it) Insert custom CSS into your parent theme settings.
      • OR install the JetPack plugin and activate Custom CSS. (then use Appearance>Edit CSS to add styles)
      • OR revert to your parent theme and modify the PHP and CSS directly and consider changing themes when you next need to upgrade.

      I hope this helps.

  3. Hello,

    Yes, thank you. It is very unfortunate that this is what I am stuck with but it can’t be helped now. I ended up keeping my “child” (or grandchild) theme active and copying over the footer.php files and modifying them to include my custom css files in the footer. This solution is not ideal but it does the trick. This way I can still update my theme and if something breaks then I know it’s in the footer files and I just go in and edit them again.

    I really do appreciate all your help very much and hope that if others run into a frustrating situation like this in the future they do not have to spend the time I did figuring all of this out!

    Thanks again,

    Craig

Ask a question or write a comment here…