• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

Similar to how Photoshop allows you to edit images using adjustment layers without altering the original image, you can use the same concept when customizing WordPress themes. Non-destructive customization has the advantage of being able to revert changes and keep the original files completely intact and untouched. The quickest and easiest way to begin non-destructive editing is by creating a child theme.

What is a Child Theme?

A child theme is a theme that inherits properties and functions from another theme called the parent theme. You can then edit, modify and add new features or functions because the files in the child theme overwrite the parent theme.

3

What You’ll Need

Before we start editing all the files, you’ll need to get a few things ready. First, you’ll need FTP access to your WordPress website or something like MAMP to host your own WordPress site. Without a live WordPress website, you won’t be able to see the changes you are making. Next, you’ll need your text editor of choice. And finally a parent theme such as the default Twenty Twelve theme that comes with WordPress.

1

1. Creating a Child Theme

All that is needed to create a child theme is one folder and one file. Head to the “/wp-content/themes/” folder within your FTP client. You’ll notice a few folders named after all the themes you installed. Create a new folder and give it a descriptive name such as “twentytwelve-child” or “parenttheme-child”.

Go into the folder and create a CSS file and name it style.css, and then add the the following information into the CSS file filling out the fields however you see fit.

/*
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Twelve theme
Author: Your name here
Author URI: http://example.com/about/
Template: Folder name of the parent theme
Version: 0.1.0
*/
Once you’ve completed this step you should have a working child theme.

2. Importing Parent Theme CSS

Now that you have the necessary folder and files created, we are going to import the parent theme’s CSS. Add this line of code to your CSS file:

@import url(“../parenttheme/style.css”);

This will tell your child theme to inherit all the CSS properties and settings stored in the parent theme’s CSS.

3. Activate Your Child Theme

To activate your new child theme, simply head to your WordPress dashboard and find the Appearance > Themes page. If you followed the previous steps properly you should see your child theme in the list of selectable themes.

Simply hit Activate and your WordPress website will now be using your child theme. If you take a look at your live WordPress website you won’t see any changes because we haven’t made any changes to the parent theme yet.

4. Customizing the Child Theme

This is where the fun starts, now that everything is setup we can begin changing and altering the parent theme to our liking. As we explained before, the child theme files overwrite the files stored in the parent theme folder. Therefore we can create variations of the parent theme without editing the core files. You need to remember to have a working version of your parent theme uploaded in your themes folder at all times and make sure your @import points to the right location.

Start changing some CSS properties and then view your website to see the changes.

5. Using functions.php

If you intend to add or edit some of the WordPress functions within your parent theme you should create a functions.php file inside your new child theme folder. Add new functions inside the new file and they will be loaded alongside the functions from the parent theme.

2

The functions.php in your child theme doesn’t overwrite the one from your parent theme, instead they will be both loaded. If you make changes directly to the core functions.php you may have to rewrite those changes after every update. Using a functions.php file within your child theme solves this issue.

6. Editing PHP Files

Making changes to the PHP files from your parent theme is the same concept as editing the CSS. Any files within your child theme will overwrite the parent theme counterparts. For example if you wanted to edit the header.php you’ll need to create a new header.php in the child theme folder and write the changes you want inside this file. WordPress will then use this new header.php instead of the parent theme version.

You can also add new PHP files inside your child theme that don’t exist in the parent theme. This will allow to create more specific pages and templates that can be used by WordPress.

7. Reverting Changes

Whenever you need to revert the changes you’ve made, all you need to do is activate the parent theme and now you’ll be back to where you started. This is the beauty of using child themes, you can create several variations and switch between them easily while still retaining the original theme.

Child themes are a fantastic non-destructive method to customizing your WordPress theme. Not only do they allow you to experiment and make changes without affecting your parent theme, it is also good practice to use child themes instead of directly editing your theme files.

Brian L, a WordPress enthusiast, is also an advocate of customizing WordPress themes using the unique ThemeMask method.


This post is by a guest author, if you would like to submit a guest post to WPLift, we'd love to hear from you. Please get in touch.

Leave Yours +

3 Comments

  1. This is a very helpful, clear and practical article. Thanks for publishing it. As someone who is quite comfortable with child themes, I still found it valuable to re-read the basics in such a condensed format.

    One minor suggestion. Early in the article, you say that the child theme’s files “overwrite” those of the parent theme. This can be scary for beginners and a bit misleading. They wonder if they have to copy the entire parent file and modify the copy. I use the word “override” rather than overwrite and it seems to communicate more clearly.

    Just a thought.

  2. Good reading. One thing though on point 5. You wrote regarding function.php file of child theme ” they will be loaded alongside the functions from the parent theme.” That actually isn’t true. The child function.php is loaded *before* the parent function.php but without overriding any of the parent function.php functionality. So this way you can modify any of the functions in the child php, and if the same function is wrapped in the parent file with (see wrapper below) then only the child theme function by same name will be executed.
    `
    if(!function_exists(‘name-of-function’))
    {

    }
    `

  3. In case I want to make changes to style.css, should I go to the parent theme style.css and make changes?

  • Comments are Closed

Search

Our Sponsors