Child Themes 101

A phrase you hear a lot when new to WordPress is “Child Theme” and if you are just starting out in the world of WordPress and find that the more you learn the more you enjoy it, it wont be long before you start making custom changes to your websites – because we love to tinker ;)

I made a tremendous mistake in my early days of working with WordPress themes by getting carried away with editing the main theme files to fully customize a site. Then one day I learned that I needed to update my theme for compatibility with a WordPress update and without knowing what was about to happen I wiped out 120+ hours of custom CSS. The world ended… cats fell from the sky and I nearly cried… joking ;)

What I had failed to learn about was the use of child theme! Child theme’s are not needed in all cases as some people prefer to use the settings that come built into themes, but if you want to start adding custom CSS modifications or changes to theme PHP files then knowing how to create and install a child theme is an absolute must!

Tools Needed:

  • A Website hosting plan.
  • A WordPress theme.
  • A text editor. Rich and I both use the wonderful Sublime Text editor
  • An image editor. If you don’t have like Photoshop – Gimp is a freebie.

Step One:

Open your WordPress dashboard and navigate to Appearance → Themes and upload your Macho Theme

child-themes-1

Then on the next screen click on the Add New button at the top of the screen, this will then take you to the Add Themes page where you have an option at the top to upload your theme. Go ahead with uploading and following the steps, once uploaded Activate the theme.

Step Two:

Go to Appearance → Editor and this will open the style sheet for the Macho Theme where we will double check the theme details in order to create our child theme as we will need the themes name to use as our template name.

child-themes-2

Step Three:

Open your text editor, in this example I am using Sublime Text, and click on File → New then save the file as style.css as this is the file name that WordPress will look for when we upload our child theme. Now we have a blank CSS file open and can start to add what is needed for it all to work.

child-themes-3

In this blank style sheet we need to include a few lines of required content, these will be a name for your child theme, then template name of the parent theme (that we found in step two) and a link to the parent themes style sheet. You can add other details here that will show up in the theme details, like a link to your profile, a description for your theme, tags and so on but they are not essential.

Click here for more information about what you can and can not include. All of these details, apart from the link that calls for the parent theme stylesheet, need to be commented out like this screenshot below:

child-themes-4

And here is example CSS code that you would adapt:

/*
Theme Name:     Macho Child
Theme URI:      http://demo.themebeans.com/macho
Description:    Make your changes to this child theme.
Author:         ThemeBeans
Author URI:     https://themebeans.com
Version:        1.0
Template:       macho
*/

@import url('../macho/style.css');

Notice that we have included our theme name, the template name of the parent theme and a link to the parent theme’s style sheet using @import. Once this is all in place save your new style sheet.

Step Four:

For most child themes all you need is the style.css file and a screenshot but we are creating a child theme to use with Macho, which includes a few extra folders/structure. We are going to add a custom style sheet for mobile.css, style-edd.css as well as adding a functions.php file.

Adding a functions.php file really allows us to fully customize many features and to help you get started ThemeBeans have already included in the framework bean_feature_setup functionality so that you can customize straight away. Click here to learn more about our framework. So now in your text editor create a new file and name it functions.php and add the following;

<?php
/*
 * This is the child theme's functions.php file.
 * This loads before the parent theme functions.
 */

function bean_feature_setup()
{
        $args = array(
            'primary' => array(
                'adminstyles'       => true,
                'customizer'        => true,
                'edd'               => true,
                'fonts'             => true,
                'hideadminbar'      => false,
                'meta'              => true,
                'seo'               => true,
                'widgets'           => true,
                'widgetareas'       => true,
                'whitelabel'        => false,
                'updates'           => false,
                ),
            'plugins' => array(
                'notice'            => true,
                'portfolio'         => true,
                'shortcodes'        => true,
                'twitter'           => true,
                'instagram'         => true,
                'social'            => true,
                'pricingtables'     => true,
                ),
            'comments' => array(
                'posts'             => true,
                'pages'             => false,
                'portfolio'         => false,
                ),
            'debug' => array(
                'footer'            => false,
                'queries'           => false,
                ),
            );

    return apply_filters( 'bean_theme_config_args', $args );
}
add_action('bean_init', 'bean_feature_setup');

As you can see above there are many options for your framework that you can turn on and off with false or true statements (we will cover these and more in a future post).

Next we create the style sheet for mobile so we can then easily customize our sites in various screen sizes and for Easy Digital Downloads. Again in your text editor create two files and save them as mobile.css and styled-edd.css, in the mobile.css file we will import the styling from the parent theme by adding the following

/* IMPORT FROM PARENT THEME STYLESHEET */
@import url('../../../macho/assets/css/mobile.css');

And in the styled-edd.css file include:

/* IMPORT FROM PARENT THEME STYLESHEET */
@import url('../../../macho/inc/edd/style-edd.css');

Step Five:

Now we need a nice screen shot image for your child theme that will display in the WordPress dashboard, the ideal size for this is 880px by 660px so it does not end up looking stretched when the theme details are opened. You can create a branded image or something for a client and if you don’t have a great image editor for this then I included a link to GIMP in the tools required at the top of this post. This image file must be a png image and named screenshot.png for WordPress to use it.

Step Six:

Now we name our child theme folder ready for uploading, the name that we give to this folder will become the theme directory name and we can’t have spaces in the name, in my example I am calling my theme “Macho Child Theme” so the folder name need to be “macho-child”, again right click on the desktop and create a folder that you will add your files to, we are naming out folder macho-child.

In the main file drag and drop into it your screenshot.png, style.css and functions.php file, then in the main file right click and create two sub folders one named “assets” and the other named “inc”. We do this to basically match the parent theme’s folder structure. All our themes are organized in the same fashion, to create a stable & familiar working environment.

Then open the “assets” folder and create another sub folder named “css” within it. In this “css” folder place your mobile.css file, then we need to open the “inc” folder and create a sub folder named “edd” to which we will add our style-edd.css file (since Macho utilizes this extra stylesheet).

This is the file structure we just created, to fit within the context of the Macho parent theme:

  • macho-child
    • functions.php
    • style.css
    • screenshot.png
    • assets
  • css
    • mobile.css
  • inc
    • edd
      • style-edd.css

Step Seven:

As we are going to upload our child theme via the WordPress dashboard we need to compress the folder into a zip file, right click on the folder then choose the option Send to → Compressed (zipped) folder.

In the WordPress dashboard go to Appearance → Themes and upload your child theme (the zipped folder) the same way we did in Step One, then activate your child theme.

That’s it we are all done with creating and installing a basic child theme that will enable you to add custom CSS to without it being lost when you update your parent theme.

All in all:

Don’t forget that every theme package includes a ready-to-go handy-dandy child theme – already coded up for your use. This tutorial serves as a guide for creating your own – and to provide an understanding of how each one is composed. Cheers!

For more updates, follow @themebeans and @richard_tabor on Twitter.

Archive