How to create a WordPress Child Theme for absolute beginners

There is a wide range of free and premium (paid) WordPress themes available out there for you to find the one that suits your needs. However, unless you run your own custom made WordPress theme, chances are that sooner or later you will need a few little tweaks and add-ons. The best way to customize your WordPress theme is to create a child theme. In this tutorial I will guide you slowly step by step so that you will successfully create your own child theme without any prior knowledge.

Why should you create a WordPress Child Theme?

There might be a few reasons, actually. The rule of thumb is, “Never modify the parent theme directly because all your modifications will get lost next time you update the parent theme.”

Never modify the parent theme directly because all your modifications will get lost next time you update the parent theme.

Having a child theme preserves the full functionality or the parent theme plus you can:

  • override CSS styles to change colours or other css properties
  • change templates for not just the parent theme but also for various plugins
  • change behaviour of the parent theme or plugins
  • add new things (like new templates, your own shortcodes or even customize the text editor in admin area)

Getting ready

To create a WordPress Child Theme you will need:

  • a self-hosted WordPress site (so not for example WordPress.com)
  • to be an administrator of your WordPress install
  • know how to upload files onto your webhosting server (usually via FTP)

You will also need to use a plain text editor (so NOT a rich text editor like MS Word or Open Office Writer). Ideally a text editor with syntax highlighting. If you don’t have one, head onto Atom.io website, and download and install Atom. It’s cross-platform and simply awesome!

Exploring your WordPress parent theme

In an ideal world, you would have a local WordPress install on your computer for testing purposes but since this is an absolute beginners tutorial, I don’t expect you would have one. What we are going to do instead is to download and repeatedly upload files via FTP onto your server (if you don’t know how, have a look through your web hosting provider documentation). You can use a free FTP client Filezilla.

Via web browser log into your WordPress website. In the Admin area go to Appearance => Themes and click on your Active theme => Theme Details.

WordPress theme details overview

You be able to identify:

  • a theme screenshot
  • a theme name
  • current version
  • author (as a link that takes you to the author’s website)
  • description
  • tags

You will be filling this information for you Child Theme in a moment so make sure you are clear about all the terms above and where they appear in the theme details.

Now that you know your parent theme’s name, you need to located it on your web server and download it via FTP to your computer.

Connect to your webserver via FTP client and navigate to your WordPress install folder => wp-content => themes.

Warning: Some WordPress installs have a custom structure or are installed in a subfolder. If you are not sure where to look, ask your web master for help. Also make sure you don’t accidentally move or delete anything or you could break the whole website.

In the themes directory you will see one or more WordPress theme folders. Copy your parent theme folder e.x. twentyseventeen to your Desktop and close the FTP connection. We won’t be editing anything in this folder. You will just use it for reference.

How to create style.css

On your Desktop create a new folder and call it the same name as the folder you’ve just downloaded + hyphen + child (all small letters, no spaces), e.x. twentyseventeen-child.

Right-click on the newly created folder and select Open With Atom. Atom will create a new project for you. On the left hand side right-click on the folder’s name and select New File. A pop up Enter the path for the new file will open. Type in style.css and press Enter.

Create style.css file in Atom

Copy and paste the following code into style.css file.


/*
 Theme Name:   Twenty Seventeen Child
 Description:  Twenty Seventeen Child Theme
 Author:       Jana Branecka
 Author URI:   http://jbworld.com
 Template:     twentyseventeen
 Version:      1.0.0
 Text Domain:  twentyseventeen-child
*/

Style.css with a stylesheet header

This is called the stylesheet header. I assume you are creating a child theme just for yourself. If you wanted to publish it to WordPress theme repository for other people to use, you should add also Theme URI, Licence, Licence URI and tags. See full code in Child Themes documentation.

Now change the code as follows:

  • Theme Name: can be anything but I recommend using the same name as your parent theme plus Child
  • Description: you can describe features of your child theme
  • Author: your name
  • Author URI: your website address
  • Template: must be the same name as your parent theme folder!
  • Version: start with 1.0.0 and then change it whenever you will make updates in the future
  • Text Domain: must be the same name as your child theme folder!

Press a keyboard shortcut CTRL + S to save the document.

How to enqueue style.css

Stylesheets need to load in the certain order. The ones loaded later overide the earlier loaded ones. We need to make sure our child theme style.css loads after the parent theme style.css.

On the left hand side of Atom window right-click on the child theme folder and select New File. A pop up Enter the path for the new file will open. Type in functions.php and press Enter.

Create functions.php file in Atom

Copy and paste the following code:


/**
 * Enqueue scripts and styles.
 */
function my_child_enqueue_styles() {

    $parent_style = 'handle';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'my-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_child_enqueue_styles' );

Now you need to do some detective work. First, open the parent theme folder on your Desktop. You should see a few folders, a few files with extension .php (one must be called functions.php), screenshot.png and at least one file ending .css. You need to identify the main stylesheet, usually called style.css or main.css. If it’s called something else than style.css, you need to modify this line in the code above:


wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );

Next, open functions.php in your parent theme folder. Press a keyboard shortcut CTRL + F and type get_stylesheet_uri().

Search for get_stylesheet_uri in Atom

This should find a line where the main stylesheet is enqueued. Just before get_stylesheet_uri() there is a handle in single quotes. Copy or retype the handle to $parent_style variable in your child theme functions.php.


$parent_style = 'twentyseventeen-style';

Thirdly, replace all occurencies of prefix my- or my_ to your child theme text domain.


/**
 * Enqueue scripts and styles.
 */
function twentyseventeen_child_enqueue_styles() {

    $parent_style = 'twentyseventeen-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'twentyseventeen-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );

Press a keyboard shortcut CTRL + S to save changes and you should be ready to upload your child theme onto the server.

Share the ♥ Join now to get free access to premium content and receive our newsletter. You can unsubscribe anytime.

Registration confirmation will be e-mailed to you.

Upload and Activate your Child Theme

Connect to your hosting server via FTP like you did before and again navigate to your WordPress install folder => wp-content => themes.

Copy the whole child theme folder from your Desktop into the themes folder on the server.

Via web browser log into your WordPress website. In the Admin area go to Appearance => Themes. All being well, you should see a child theme there with all the information you entered in the stylesheet header (just the picture is missing). Go ahead and Activate the theme.

Child theme details

Check the front end of your website. If you can’t see any changes, congratulations, you’ve successfully created a child theme and you can start adding your own functionality!

In case something goes wrong, deactivate the theme. Double check the code for typos, missing lines, quotes or semicolons and double check that you replaced correctly all code that was meant to be replaced. Re-upload the child theme and try again.

How to add a screenshot to WordPress theme

There is one last thing that we haven’t done yet. Surely you would want to have a fancy image in your Admin area to identify your child theme. The easiest way to create one is actually to use the parent theme screenshot as a template. I’m going to show you how to do that in Adobe Photoshop.

On your Desktop go to the parent theme folder and find screenshot.png. Open screenshot.png in Photoshop. The layer will be locked.

Open screenshot.png in Adobe Photoshop

From the topbar select Image => Mode => RGB Color.

Adobe Photoshop change image mode

Now you can edit the image as usual. For a child theme I decided to keep the original screenshot but add a title “Child”.

When you’re happy with your artwork, go to File => Save for Web, select PNG-8 file format and click Save.

Screenshot.png save for web

Navigate to the desktop to your child theme and click Save.

Connect to your web server via FTP and upload the screenshot to your child theme folder.

WordPress child theme screenshot

Conclusion

Hope you enjoyed this tutorial and you are ready to add some awesome features to your WordPress theme. You can for example try to abandon the visual editor and start using an enhanced text editor that suits your needs.

Love, jbWorld logo

Leave a Reply

Your email address will not be published. Required fields are marked *