Gabfire Themes BlogStay up to date with the latest news & announcements from Gabfire Themes

How to Create a WordPress Child Theme

We’ve all been there: the crossroads of updating your theme and overwriting the edits you made to it. Either you have

image courtesy of wpsmackdown.com/

image courtesy of wpsmackdown.com

to leave your theme out of date or erase all the work you put into customizing it. Maybe you’re lucky and the changelog specifies which files are new so you can update manually, but this can be meticulous and time wasting. There must be an easier way!

Why Child Themes are Useful

Child themes are the root of customization. They allow you to customize your themes, while keeping the main theme intact so updating won’t erase your changes. Basically, a child theme is a ‘new’ theme that simply loads the framework from the parent theme. This way, whenever you update the parent theme, the child theme is ‘updated’ too. Neat!

Note: For minor CSS changes, use the Custom CSS box located in your Theme Options; for any PHP customization, use a Child Theme.

How to Create a WordPress Child Theme for 2014 Theme

The process to create a WordPress child theme is relatively easy, but some themes may take extra effort. For this example, we’ll use the latest WordPress Theme 2014.

1. Create Child Theme Directory

The first step is to create a ‘new theme’ that WordPress can load in Appearance>Themes. FTP to your server, navigate to /wp-content/themes/ and create a new folder called ‘twentyfourteen-child’.

How to Create a WordPress Child Theme

Note: The name of this folder does not matter, it is for internal labeling purposes and WordPress does not read it.

2. Create Child Theme Stylesheet

This is where things get interesting. Open your new child theme directory and create a new file called style.css.

How to Create a WordPress Child Theme

In this file, you’ll get to name your theme and set up all the metadata that shows in Appearance>Themes. This file will also tell WordPress where the parent theme is, so make sure to use the correct URI.

Default style.css code:

Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

@import url("../twentyfourteen/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

Note: The ../ notation refers to the parent folder. In this case, it refers to /wp-content/themes/.

3. Extend the Functions.php File

The cool thing about a child theme is that it can overwrite the parent theme files without actually editing them. Simply add the same file to the child theme directory and it will overwrite it. For example, if you wanted a different header, you would add header.php to your child theme directory.

This is not the case for functions.php however. For child themes, creating a new functions.php will simply extend the old file. This is so you can add new functions without the need to duplicate the entire functions.php file. In your child theme directory, create a file called functions.php and make sure to add the PHP tag to the top and bottom. Afterwards, you can add any new functions!

How to Create a WordPress Child Theme

Default functions.php code:

// Custom Function to Include

function favicon_link() {

    echo '' . "\n";

}

add_action( 'wp_head', 'favicon_link' );
?> //Closing PHP tag

Note: To quickly make small modifications to page templates, just copy the parent theme file to the child theme directory.

That’s It

You can now activate your child theme in Appearance>Themes and can edit any theme files you want without disrupting the critical theme updates!
So, what changes will you make to your child theme?

Comments (5)

  1. Manolo Permalink Reply

    just a question… why don’t you include a child theme bundled in yours? so i can upgrade without making too much damage :-)

    thanks!

    Manolo

    • Mehmet Ozek Permalink Reply

      We include child theme to our most recent themes. Also its extremely easy to create a child theme with our new framework Manolo

  2. adam9999k Permalink Reply

    There are lots of great, free plugins that can generate child themes.

    • Manolo Permalink Reply

      Thanks @adam.. didn’t know that
      Thank Mehmet … I m stuck in an OOOLD version for this child theme things so now it hits a nerve!

  3. using Atahualpa theme it says
    Broken Themes
    The following themes are installed but incomplete. Themes must have a stylesheet and a template.

Leave a Reply

LATEST THEMES