Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

How To Create And Customize A WordPress Child Theme

The WordPress platform is a magnet for those who want to take matters into their own hands, who want complete control over their websites and want to be independent in running them. WordPress does make it really easily to completely customize a website. If you have a bit of knowledge of HTMl, CSS and/or PHP, there is nothing you can’t change. [Links checked March/29/2017]

I mean, just compare the default themes, Twenty Fifteen111 and Twenty Fourteen2. Hard to believe they are running on the same platform, isn’t it? Therefore, it is only natural for you to want to adapt the look of your website to fit your vision. I doubt there are many WordPress users out there who don’t constantly think about what to implement next. However, a problem arises.

Further Reading on SmashingMag: Link

Customizing WordPress: You Might Be Doing It Wrong Link

When trying to make changes to a website, a staggering number of people opt to edit their theme directly. This means they are changing or adding files in their current theme’s folder. This creates a number of problems.

The biggest disadvantage is that any modifications made to the theme in this way will be lost once the theme is updated by the developer. As a consequence, users either won’t be able to keep their theme up to date (which is bad for security) or will find all of their customizations gone when they do.

Either way, the situation is far from an ideal.

A much better idea is to use a child theme. This allows you to make any number of changes to a website without touching any of the original theme files.

Sound good? Great, because in this article we will take a detailed look at what WordPress child themes are, how to create them and how to use them to customize your website — the right way.

I know! I’m as excited as you are!

What Are Child Themes And Why Use Them? Link

When talking about child themes, we first have to talk about parent themes. A theme only becomes a parent theme when someone builds a child theme for it. Until then, it is just a theme, such as the ones you find in the WordPress directory6. Every theme that includes all of the files required in order to be considered complete can be a parent theme.

Yet, while any such theme can be a parent theme, some are better suited to this purpose than others. For example, frameworks such as Genesis by StudioPress7 are specifically made to be customized by child themes.

What is a child theme, then? Well, from the WordPress back end, a child theme doesn’t behave any differently. You can find and activate it under “Appearance” → “Themes,” just like you would with any other theme.

The big difference is that a child theme depends completely on its parent in order to work. Without its parent theme present, it will not do a thing and cannot even be activated.

That’s because a child theme isn’t a standalone entity, but instead modifies or adds to the files of an existing theme. It uses everything present in the parent theme and changes only those parts that you want to be different.

This allows you to alter styles, functions, layout, templates and more. In fact, you can customize the parent theme beyond recognition. However, without it being present, none of it will work.

Advantages Of Child Themes Link

There are numerous advantages to going the child theme route:

  • Instead of having to create a complete theme from scratch, you can build on something that already exists, thus speeding up development time.
  • You can take advantage of the functionality of sophisticated frameworks and parent themes, while customizing the design to your needs.
  • You can upgrade the parent theme without losing your customizations.
  • If you aren’t satisfied with your customizations, just disable the child theme and everything will be as it was before.
  • It’s a great way to start learning about how themes work.

A child theme can contain image folders, JavaScript, CSS, template files and many other things. The beautiful thing, though, is that they don’t have to. You can include as much or as little customization as you want.

In fact, a child theme really only needs three things: a folder, a style sheet and a functions.php file. That’s it. And the two files can even pretty much be empty.

When to Use a Child Theme Link

So, should you always build a child theme whenever you want to make any changes to a WordPress website? No, it really depends.

If you plan to make only minor modifications, such as color changes or a different font, then a custom CSS plugin8 might be all you need (other options are Jetpack9 and SiteOrigin CSS10). Many themes nowadays also offer the option to add custom code natively.

However, if you plan to introduce larger changes, such as a complete design overhaul, multiple template changes or anything else of that magnitude, then a child theme is definitely the way to go.

Set Up A Basic Child Theme Link

All right, now that we know how awesome child themes are and what they can do for us, let’s go over how to create one step by step. For our example, we will use Twenty Fifteen111, the latest default theme for WordPress. Don’t worry, it’s really easy and you will get it in no time.

Side note: The steps below can be performed directly on your server via an FTP client. However, I recommend that you first set up everything locally, then zip your child theme folder and install it like a normal theme via the “Theme” menu. This will make the whole thing much easier.

Create a Folder in wp-content/themes Link

As mentioned, a child theme needs three things: its own folder, a style sheet and a functions.php file. We will start with the folder.

Like any theme, child themes are located in wp-content/themes in your WordPress installation. So, navigate there now and create a new folder for your child theme.

A best practice is to give your theme’s folder the same name as the parent theme and append it with -child. Because we are using the Twenty Fifteen theme, we will call our folder twentyfifteen-child.

Creating a folder for our WordPress child theme12
Creating a folder for our WordPress child theme. (View large version13)

You are free to use any name you want to; just make sure not to include any spaces because that might cause errors.

Create a Style Sheet Link

Now that we have our folder, we will need a style sheet. In case you are not aware, a style sheet contains the code that determines the design of a website. Themes can have multiple style sheets, but we will be content with one for the moment.

Making a style sheet is easy: Simply create a new text file and call it style.css. Done! However, in order for it to actually work, we will have to paste the following code, the so-called “style sheet header,” right at the beginning of the file (code courtesy of the WordPress Codex14):

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fifteen-child
*/

Here is what each line means:

  • Theme name
    This is the name that will show up for your theme in the WordPress back end.
  • Theme URI
    This points to the website or demonstration page of the theme at hand. This or the author’s URI must be present in order for the theme to be accepted into the WordPress directory.
  • Description
    This description of your theme will show up in the theme menu when you click on “Theme Details.”
  • Author
    This is the author’s name — that’s you, in this case.
  • Author URI
    You can put your website’s address here if you want.
  • Template
    This part is crucial. Here goes the name of the parent theme, meaning its folder name. Be aware that it is case-sensitive, and if you don’t put in the right information, you will receive an error message, so double-check!
  • Version
    This displays the version of your child theme. Usually, you would start with 1.0.
  • License
    This is the license of your child theme. WordPress themes in the directory are usually released under a GPL license; you should stick with the same license as your parent theme.
  • License URI
    This is the address where your theme’s license is explained. Again, stick with what your parent theme says.
  • Tags
    The tags help others find your theme in the WordPress directory. Thus, if you include some, make sure they are relevant.
  • Text domain
    This part is used for internationalization and to make themes translatable. This should fit the “slug” of your theme.

If you feel a bit overwhelmed (already?), you might be happy to know that not all of this information is actually required. In fact, all you really need is the theme name and template.

The rest is important only if you plan to publish your theme, which I am not. For this reason, my child theme’s header looks like what’s shown below. Feel free to copy it and make your own adjustments.

/*
 Theme Name:   Twenty Fifteen Child Theme
 Description:  A child theme of the Twenty Fifteen default WordPress theme
 Author:       Nick Schäferhoff
 Template:     twentyfifteen
 Version:      1.0.0
*/

Activate Child Theme Link

Once your folder and style sheet are present, go to “Appearance” → “Themes” in the WordPress back end and find your child theme there. When you click on “Theme Details” now, you will see the contents of the style sheet header. That’s what that info is for.

The WordPress child theme header15
The WordPress child theme’s header. (View large version16)

All right, now click on the button that says “Activate.” Good job! Your theme is now activated. However, if you look at your website, it should look something like this:

WordPress child theme without style sheet17
WordPress child theme without style sheet. (View large version18)

Don’t worry, everything is fine. You haven’t screwed up. Get your face out of the paper bag. The reason why your website is empty is because it doesn’t have any styles yet. No styles means you get treated to an all-text experience.

I just wanted to show you that, in theory, having a style sheet and a folder is enough to create a child theme. And if it worked for you, then you’ve already done it! I’ll be the first to admit, though, that it could look a little better. Let’s get to that now.

Create functions.php Link

Next up is the functions.php file. You have probably heard of this file before, but let’s quickly go over what it is for.

The functions.php file allows you to change and add functionality and features to a WordPress website. It may contain both PHP and native WordPress functions. Plus, you are free to create your own functions.

In short, functions.php contains code that fundamentally changes how a website looks and behaves. Got it? Nice, I knew I could count on you.

Creating the file is as easy as creating a style sheet, if not more so. All you need is a text file named functions.php, and then paste in the following code:

<?php
//* Code goes here

Seriously, that’s it. Just add that opening php tag and you are good to go. Of course, you could get all fancy and write some information in the header (don’t forget to comment it out so that WordPress doesn’t try to execute it), but this will do for our purpose. Add it to your theme’s folder as well.

Now, let me say this: You don’t need functions.php. If you don’t plan to use PHP to modify your theme, then you can completely do without it. A style sheet and other files might be enough for you.

However, I wanted to include this part, first, so that you would know about this important file and, secondly, because of the next step.

Inherit Parent Styles Link

So, you are probably aware that your website is still mostly text. It’s time to change that. How? I’ll show you.

Because you are using a parent theme, you probably have a good idea of how your website is supposed to look. For our example, Twenty Fifteen, we want to get to this point:

WordPress default Twenty Fifteen theme19
WordPress’ default Twenty Fifteen theme. (View large version20)

To get here, you will need to inherit the information in your parent theme’s style sheet. There are two ways to do this.

One is via CSS and the @import rule. By copying the code below into your style.css file, you are telling your child theme to use the info contained in your parent theme’s style sheet to present your content.

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

Be aware, however, that this is the old way of inheriting parent styles and is no longer recommended. The reason for that is performance.

If you need to import several style sheets (which is not unheard of), then using @import will cause them to download consecutively. This can slow down the page’s loading time by several seconds (which, I probably don’t have to tell you, isn’t a good thing).

The second, recommended way to load the parent’s style sheet — and the reason why we created functions.php earlier — is to use wp_enqueue_style(). This WordPress function21 safely adds style sheet files to a WordPress theme.

In our case, the corresponding code looks a little something like this:

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Be sure to paste this at the beginning of your functions.php file, and save it (remember to upload the file if you are using an FTP connection). Now check your front end; it should look like this:

WordPress child theme successfully activated22
WordPress child theme successfully activated. (View large version23)

Pretty, right? Congratulations, you did it! You created your very first WordPress child theme. If I were there, I’d pat you on the shoulder.

However, you might object, rightly, that it looks exactly like the parent theme. So, what’s the point of going with a child theme?

Don’t worry. Next you will learn how to customize the child theme to look exactly the way you want.

Extra Points: Add Theme Image Link

If you want to get all fancy, you could add a theme image. This image will show up in the theme menu in WordPress.

All you need to do is create a PNG file, named screenshot.png, and place it in your theme’s folder (in our case, twentyfifteen-child). Make sure to put it in the top-level directory and not in a subdirectory such as images.

The recommended size is 880 × 660 pixels, although it will be shown as 387 × 290. The larger dimensions ensure that the image will show up well on high-resolution screens.

Other image formats such as JPEG and GIF would also work, but PNG is recommended. You can do this now for extra props or wait until you are done customizing the theme, because the image is usually a screenshot of the theme’s design.

Customizing Your WordPress Child Theme Link

If you have done everything correctly, then your child theme should now be activated and look exactly like its parent. This is where the fun begins.

Now we can start customizing our theme and change things around to get the result we are looking for. Customizations can be done in many different ways, and we will go over a whole lot of them.

Implementing Custom Styles Link

One of the easiest ways to make changes to your theme is via CSS. This allows you to customize colors, dimensions, fonts and other fundamental design elements.

If you are proficient in CSS, you could actually change the entire layout of your website. However, introducing such drastic changes is usually done differently. We will get to that.

For now, all you need to know is that, with style.css in place, you can override any styles in the parent theme by adding code to the child theme’s style sheet.

Important: If you’ve called the parent theme’s styles in your style.css file, then be sure to add any custom styles below the @import statement, as in the following snippet. (Although you do know you’re supposed to use functions.php, right?)

/*
 Theme Name:   Twenty Fifteen Child Theme
 Description:  A child theme of the Twenty Fifteen default WordPress theme
 Author:       Nick Schäferhoff
 Template:     twentyfifteen
 Version:      1.0.0
*/

// Custom styles go here

Twenty Fifteen is a beautifully designed theme. I really like the generous white space, which lets the content breathe and is soothing to the eye.

Twenty Fifteen layout24
Twenty Fifteen’s layout. (View large version25)

However, let’s say you are not a fan and want to cram a few more words into each line. No harm in that. In that case, you would use a tool like Firebug26 to figure out which styles need to be modified. Your search would turn up the following:

.entry-header {
   padding: 0 10%;
}
.entry-title, .widecolumn h2 {
   font-size: 3.9rem;
   line-height: 1.2308;
   margin-bottom: 1.2308em;
}
.entry-content, .entry-summary {
   padding: 0 10% 10%;
}

We would make a few adjustments that achieve what we have in mind and copy them to the style.css file of our child theme.

.entry-header {
   padding: 0 5%;
}
.entry-title, .widecolumn h2 {
   margin-bottom: 0.5em;
}
.entry-content, .entry-summary {
   padding: 0 5% 10%;
}

Voilá! Here is the result:

WordPress child theme with custom styles27
WordPress child theme with custom styles. (View large version28)

Whether that is better than before is another question, but you get the idea: Adding custom styles to a child theme will override styles in the parent theme.

Overriding Parent Theme Files Link

You can not only target individual style declarations via the style sheet, but also override entire components of the parent theme.

For every theme file present in the parent directory, WordPress will check whether a corresponding file is present in the child theme and, if so, use that one instead. This means that a header.php file in the child theme will override its equivalent in the parent folder.

So, if you don’t like something about a page’s layout, just copy the respective file, implement your changes, and upload it to the child theme’s folder. The modifications will then appear in the child theme, while the original file will remain untouched.

For example, if we take content.php from the Twenty Fifteen theme’s folder and open it with an editor, among others things, we will find the following code:

<?php
   // Post thumbnail.
   twentyfifteen_post_thumbnail();
?>

<header class="entry-header">
   <?php
   if ( is_single() ) :
      the_title( '<h1 class="entry-title">', '</h1>' );
   else :
      the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
   endif;
   ?>
</header><!-- .entry-header -->

Let’s see what happens when we reverse the order of these two, like this:

<header class="entry-header">
   <?php
      if ( is_single() ) :
         the_title( '<h1 class="entry-title">', '</h1>' );
      else :
         the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
      endif;
   ?>
</header><!-- .entry-header -->

<?php
   // Post thumbnail.
   twentyfifteen_post_thumbnail();
?>

As you can see below, after saving and uploading the file to the child theme’s folder, the featured image of each blog post will now appear underneath the post’s title.

Override parent theme files with the child theme29
Override parent theme files with the child theme. (View large version30)

Granted, it could use some styling, but you get the idea. You can use this method to make all kinds of changes to your website. Just remember to give the child theme the same folder tree structure as the parent. For example, if a file you want to modify is found in a folder named page-templates in the parent theme, then you would create a folder of the same name in your child theme’s directory and place the file there.

Working With Template Files Link

We’ve learned that we can overwrite any file in the parent theme by placing a copy in the child theme’s folder and customizing it. However, using files that exist only in the child theme is also possible. Template files are a good example of this.

Let’s say we want to build a full-width page template for our child theme. I’ll be the first to admit that the Twenty Fifteen theme does not lend itself to full-screen presentation, but let’s do it anyway for demonstration purposes, shall we?

To create a full-width page in Twenty Fifteen, we need to do four things: create a custom page template, a custom header and a footer file, and then add some customized CSS. Let’s start with the page template.

For our custom page template, we simply copy page.php from the parent theme, rename it to custom-full-width.php and place it in a folder named page-templates in our child theme.

Now, let’s introduce a couple of changes to the code so that it looks like this:

<?php
/*
 * Template Name: Custom Full Width
 * Description: Page template without sidebar
 */

get_header('custom'); ?>

   <div id="primary" class="content-area">
   <main id="main" class="site-main" role="main">     

   <?php
   // Start the loop.
   while ( have_posts() ) : the_post();

   // Include the page content template.
   get_template_part( 'content', 'page' );

   // If comments are open or we have at least one comment, load up the comment template.
   if ( comments_open() || get_comments_number() ) :
      comments_template();
   endif;

   // End the loop.
   endwhile;
   ?>

   </main><!-- .site-main -->
   </div><!-- .content-area -->

<?php get_footer('custom'); ?>

The only thing we’ve done here is introduce a header that tells WordPress that this is a page template, and we’ve changed the get_header and get_footer calls so that they will include two files named header-custom.php and footer-custom.php.

Let’s go to the page that we want to see in full width and, under “Page Attributes,” change the page template to our newly created “Custom Full Width” template.

How to activate a WordPress page template
How to activate a WordPress page template.

Now it’s time to create our custom header and footer theme files. First, go to the parent theme, copy both header.php and footer.php to our child theme’s folder, and rename them to header-custom.php and footer-custom.php, respectively.

So far, our page looks the same as before. It’s time for some customization. Let’s start with our custom header.

<?php
/**
 * The template for displaying the header
 *
 * Displays all of the head element and everything up until the "site-content" div.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
   <meta charset="<?php bloginfo( 'charset' ); ?>">
   <meta name="viewport" content="width=device-width">
   <link rel="profile" href="http://gmpg.org/xfn/11">
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
   <!--[if lt IE 9]>
   <script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
   <![endif]-->
   <?php wp_head(); ?>
</head>

<body class="full-width-body" <?php body_class(); ?>>
<div id="page" class="hfeed site">
   <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyfifteen' ); ?></a>

   <header id="masthead" class="site-header full-width" role="banner">
   <div class="site-branding full-width">
   <?php
      if ( is_front_page() && is_home() ) : ?>
         <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
         <?php else : ?>
         <p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
         <?php endif;

      $description = get_bloginfo( 'description', 'display' );
      if ( $description || is_customize_preview() ) : ?>
         <p class="site-description"><?php echo $description; ?></p>
      <?php endif;
   ?>
   <button class="secondary-toggle"><?php _e( 'Menu and widgets', 'twentyfifteen' ); ?></button>
   </div><!-- .site-branding -->
   </header><!-- .site-header -->

   <div id="content" class="site-content full-width">

We’ve done a number of things here. We have given the <body> element a custom class, named full-width-body. We have also added a full-width class to site-header, site-branding and site-content, so that we can assign them custom CSS.

As a last step, we have gotten rid of all sidebar elements (both the sidebar div and the call to get_sidebar), because we don’t want them on our full-width page.

The only change we’ve made in footer-custom.php is to add the full-width class to the footer element, like so:

<footer id="colophon" class="site-footer full-width" role="contentinfo">

All that’s left to do is input some code in our style sheet:

.full-width-body::before {
   display: none;
}

.site-content.full-width {
   float: none;
   margin: 0 auto;
}

.site-header.full-width {
   background-color: #fff;
   box-shadow: 0 1px 0 rgba(0, 0, 0, 0.15);
   margin: 0;
   padding: 2% 0;
}

.site-branding.full-width {
   margin: 0 auto;
   width: 58.8235%;
}

.site-footer.full-width {
   float: none;
   margin: 0 auto;
}

Ta-da! And here is our full-width page:

Custom full-width page template for Twenty Fifteen theme31
Custom full-width page template for Twenty Fifteen theme. (View large version32)

It could use some polishing, but let’s be satisfied for the moment. For more shenanigans with page templates, check out my previous article on Smashing Magazine: How To Create And Customize A WordPress Child Theme33.

Using functions.php Link

We’ve touched on functions.php. Use this file to include PHP and native WordPress functions in your theme. This will give you a lot of options for customization.

Note: The child theme’s functions.php file is loaded in addition to the file of the same name in the parent theme. In fact, it is executed right before the parent theme’s function.php — unlike style.css, which replaces the original file. Consequently, do not copy the full contents of your parent theme’s functions.php file to the file in your child theme. Rather, use the latter to modify functions in the parent theme.

Back to customizing our child theme. In this example, I want to add a widget area to the footer of the website. To do that, we first need to register a widget in our functions.php file.

<?php

register_sidebar( array(
   'name'          => 'Footer Widget',
   'id'            => 'footer-widget',
   'before_widget' => '<div class="footer-widget">',
   'after_widget'  => '</div>'
) );

Note: The opening <?php tag is the beginning of the functions.php file. Don’t include it if one is already there!

This will make the newly created widget area show up in our back end. However, for it to be usable on the website, we need to add the following code to footer.php:

<?php if ( is_active_sidebar( 'footer-widget' ) ) :
      dynamic_sidebar( 'footer-widget' );
   endif;
?>

Once more, we will copy footer.php from the Twenty Fifteen parent theme and paste it in our child theme. This time, however, we will leave its name as is.

After that, we need to add the call to our new footer widget so that it looks like this:

<?php
/**
 * The template for displaying the footer
 *
 * Contains the closing of the "site-content" div and all content after.
 *
 * @package WordPress
 * @subpackage Twenty_Fifteen
 * @since Twenty Fifteen 1.0
 */
?>

   </div><!-- .site-content -->

   <footer id="colophon" class="site-footer" role="contentinfo">
      <div class="site-info">
      <?php if ( is_active_sidebar( 'footer-widget' ) ) :
            dynamic_sidebar( 'footer-widget' );
         endif;
      ?>
         <?php
            /**
             * Fires before the Twenty Fifteen footer text for footer customization.
             *
             * @since Twenty Fifteen 1.0
             */
            do_action( 'twentyfifteen_credits' );
         ?>
         <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyfifteen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyfifteen' ), 'WordPress' ); ?></a>
      </div><!-- .site-info -->
   </footer><!-- .site-footer -->

</div><!-- .site -->

<?php wp_footer(); ?>

</body>
</html>

Minimal styling is needed in style.css:

.footer-widget {
   margin: 2% 0;
}

Now, when we add a search widget to our new widget area, the front page will look like this:

Twenty Fifteen child theme custom footer widget34
Twenty Fifteen child theme custom footer widget. (View large version35)

Not so hard, was it?

Using Theme Hooks Link

A better way to modify a child theme via functions.php is to use hooks. If you have never heard of theme hooks before, think of them as little anchors in a theme’s files that allow you to add content, functions and other stuff right there, without having to edit the core files themselves.

There are two types of hooks: action hooks and filter hooks. Action hooks allow you to add custom functionality to existing functions. Filter hooks are a way to modify the functions present in the hook’s location.

Let’s go over an example to make it clearer. We will be using an action hook. Let’s go back to our last example, where we added a widget area to our theme’s footer. Instead of modifying the footer.php file in our child theme, we can achieve the same by using an action hook.

Let’s write a little function:

function custom_footer_widget() {
   if ( is_active_sidebar( 'footer-widget' ) ) :
      dynamic_sidebar( 'footer-widget' );
   endif;
}

You will notice that this is essentially the same code that we pasted in footer.php earlier, only this time wrapped in a function (and without the opening and closing php tags around it, since we are pasting this in functions.php).

The advantage of this is that we can now add the entire function to a hook in our parent theme’s core files, without having to edit the file itself. In this case, we are targeting twentyfifteen_credits in the parent theme’s file. It is responsible for the footer credits (“Proudly powered by WordPress”) in the Twenty Fifteen theme, and it appears in footer.php like this:

do_action( 'twentyfifteen_credits' );

All it takes to add our new function for the widget area to this hook is one more line in the functions.php of our child theme:

add_action( 'twentyfifteen_credits', 'custom_footer_widget' );

Boom! Now, the widget area will show up in the exact same spot where we had it before, without our having to copy or add any code to the theme’s footer file. Neat, huh?

Note: If you are following along and are going the functions.php route, don’t forget to delete the modified footer.php file from your child theme; otherwise, the widget area will show up twice.

A lot more can be done with hooks in child themes. Some theme frameworks provide loads of hooks so that you can modify anything directly from functions.php.

However, that topic is beyond the scope of this article. If you are interested in learning more, some excellent resources can be found online. A good starting point is Daniel Pataki’s A Quick and In-Depth Guide to WordPress Hooks36.

Summing Up Link

As you have hopefully seen, building a child theme in WordPress is not very complicated. All it takes is a folder plus two files.

Yet, despite its simplicity, a child theme is quite powerful. It allows us to completely and safely customize a website without editing any core files.

The benefits of this are numerous: You can build on top of an existing theme or framework without having to write a theme from scratch; your changes are safe from theme updates; and, if things go awry, you will always have a functioning theme to fall back on.

Plus, you are getting a top-notch education in building WordPress themes on the side. Not too bad, right?

For this reason, learning about child themes is an important step in the career of any WordPress designer or developer and for those who want more control over their WordPress websites. I hope this article helps you get started.

What is your experience with building child themes for WordPress? Do you have anything to add? Anything you’d do differently? Please share it in the comments.

(ml, dp, al,jb)

Footnotes Link

  1. 1 https://wordpress.org/themes/twentyfifteen/
  2. 2 https://wordpress.org/themes/twentyfourteen/
  3. 3 https://www.smashingmagazine.com/2015/06/wordpress-custom-page-templates/
  4. 4 https://www.smashingmagazine.com/2015/04/building-custom-wordpress-archive-page/
  5. 5 https://www.smashingmagazine.com/2015/04/extending-wordpress-custom-content-types/
  6. 6 https://wordpress.org/themes
  7. 7 http://my.studiopress.com/themes/genesis/
  8. 8 https://wordpress.org/plugins/wp-add-custom-css/
  9. 9 http://jetpack.me/support/custom-css/
  10. 10 https://wordpress.org/plugins/so-css/
  11. 11 https://wordpress.org/themes/twentyfifteen/
  12. 12 https://www.smashingmagazine.com/wp-content/uploads/2015/09/01-create-theme-folder-opt.jpg
  13. 13 https://www.smashingmagazine.com/wp-content/uploads/2015/09/01-create-theme-folder-opt.jpg
  14. 14 https://codex.wordpress.org/Child_Themes
  15. 15 https://www.smashingmagazine.com/wp-content/uploads/2015/09/02-WordPress-child-theme-header-opt.jpg
  16. 16 https://www.smashingmagazine.com/wp-content/uploads/2015/09/02-WordPress-child-theme-header-opt.jpg
  17. 17 https://www.smashingmagazine.com/wp-content/uploads/2015/09/03-WordPress-child-theme-without-stylesheet-opt.jpg
  18. 18 https://www.smashingmagazine.com/wp-content/uploads/2015/09/03-WordPress-child-theme-without-stylesheet-opt.jpg
  19. 19 https://www.smashingmagazine.com/wp-content/uploads/2015/09/04-Twenty-Fifteen-WordPress-default-theme-opt.jpg
  20. 20 https://www.smashingmagazine.com/wp-content/uploads/2015/09/04-Twenty-Fifteen-WordPress-default-theme-opt.jpg
  21. 21 https://codex.wordpress.org/Function_Reference/wp_enqueue_style
  22. 22 https://www.smashingmagazine.com/wp-content/uploads/2015/09/05-WordPress-child-theme-successfully-activated-opt.jpg
  23. 23 https://www.smashingmagazine.com/wp-content/uploads/2015/09/05-WordPress-child-theme-successfully-activated-opt.jpg
  24. 24 https://www.smashingmagazine.com/wp-content/uploads/2015/09/06-Twenty-Fifteen-Content-Layout-opt.jpg
  25. 25 https://www.smashingmagazine.com/wp-content/uploads/2015/09/06-Twenty-Fifteen-Content-Layout-opt.jpg
  26. 26 https://addons.mozilla.org/en-US/firefox/addon/firebug/
  27. 27 https://www.smashingmagazine.com/wp-content/uploads/2015/09/07-Child-Theme-Custom-Styles-opt.jpg
  28. 28 https://www.smashingmagazine.com/wp-content/uploads/2015/09/07-Child-Theme-Custom-Styles-opt.jpg
  29. 29 https://www.smashingmagazine.com/wp-content/uploads/2015/09/08-WordPress-child-theme-override-parent-theme-files-opt.jpg
  30. 30 https://www.smashingmagazine.com/wp-content/uploads/2015/09/08-WordPress-child-theme-override-parent-theme-files-opt.jpg
  31. 31 https://www.smashingmagazine.com/wp-content/uploads/2015/09/10-Twenty-Fifteen-Custom-Full-Width-Template-opt.jpg
  32. 32 https://www.smashingmagazine.com/wp-content/uploads/2015/09/10-Twenty-Fifteen-Custom-Full-Width-Template-opt.jpg
  33. 33 https://www.smashingmagazine.com/2015/06/wordpress-custom-page-templates/
  34. 34 https://www.smashingmagazine.com/wp-content/uploads/2015/09/11-WordPress-child-theme-custom-footer-widget-opt.jpg
  35. 35 https://www.smashingmagazine.com/wp-content/uploads/2015/09/11-WordPress-child-theme-custom-footer-widget-opt.jpg
  36. 36 https://www.smashingmagazine.com/2011/10/definitive-guide-wordpress-hooks/

↑ Back to top Tweet itShare on Facebook

Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling the world with his wife. You can get in touch with him via Twitter or through his website.

  1. 1

    Is it possible to have grandchildren themes? This may come in handy for my workflow.

    2
    • 2

      Yes and no. In other words, you can “fake” a grandchild theme by working around the fact that you can’t have a grandchild theme – by creating a plugin. :)

      2
  2. 3

    Nick,

    What an INCREDIBLE article. I’ve always been curious as how to create a child theme, and your explanation couldn’t have been more simple. Thanks for the great read and the great examples as well.

    14
  3. 5

    Thank you so much. I appreciated the concrete examples to follow along with, the screen caps, the code and the *code explained*. I have been fiddling with a child theme but this provides the foundation I didn’t have. Now to go back and tidy up!

    u rock

    0
  4. 7

    Thank you for sharing this child theme because every day the word press themes are updating for that reason it causes the website disturbance. This theme helps to the clients without any effects in the website.

    -1
  5. 8

    The article itself is really comprehensive, but I find the title to be incorrect – “How To Create And Customize A WordPress Child Theme.” You do not really customize a Child Theme, but rather you customize a Parent Theme with a Child Theme. As you have written beautifully in the article: “Without its parent theme present, it will not do a thing and cannot even be activated.”

    Other than that, a thorough and great article for beginners.

    -2
  6. 10

    Really helpful, thanks for writing it! I was still using @import, so better go update that. Any chance you could update the article with how to add custom .js files to child themes? Always gets me stuck, especially when it involves jQuery.

    1
  7. 12

    Torsten Landsiedel

    January 22, 2016 2:01 pm

    The problem with child themes is: If you copy a template from the parent theme and customize it. You are now responsible for this code!

    If the parent theme got an update, your template is not affected (Yeah!) and your customizations are still in place. But if the parent theme adds new functionality or fixes a security bug you are still also on the old template (Booh!), so no new functionality for you and still a security problem.

    I’ve made a plugin to keep track of changes in the parent theme:
    https://wordpress.org/plugins/child-theme-check/
    (like seen in WooCommerce Status Report)

    But theme developers have to add a version number in each template file to use all the power of the plugin.

    It would be really great if you help me spread the word about these problems and the plugin.

    Here is my talk at WordCamp Cologne 2015 about the topic (just in German, sorry) and the slides (also just in German):
    http://wordpress.tv/2015/07/15/torsten-landsiedel-das-child-theme-dilemma/
    http://de.slideshare.net/zodiac1978/child-themedilemma

    4
  8. 15

    Very nice tutorial and a great reference for anyone. I have found no matter how much you know, there is so much more to know. And frequently it’s easier to have “go to references” to check. Thank You!

    I use child themes on every client site. But one issue has me perplexed. How do you force the Child Theme to display a certain thumbnail image when you open the Admin Themes section?

    Thanks again

    0
    • 16

      Ben, to cutomize a Child Theme thumbnail image you must simply put an screenshot.png (exactly that name) image on your Child Theme folder. The image size: 800 x 660.

      Best regards

      0
  9. 17

    Instead get_template_directory_uri() . ‘/style.css’ to load your main stylesheet, you need to put get_stylesheet_uri().

    This works in that way because get_template_directory_uri() always refers to the parent theme when it’s called in a child theme. So when your child theme is active, WordPress first loads your child theme’s stylesheet and then your parent theme’s stylesheet later in the section. Since the parent theme’s stylesheet is loaded later, the styles in that stylesheet “win”.

    0
  10. 18

    Enterprise Monkey

    January 23, 2016 6:43 am

    Such an excellent tutorial for all of us, especially for newbies. Last day, my friend was asking how to customize WordPress child theme, and I shared this post with him. In this post, we can find every necessary steps that are too helpful. This post is very simple and showing your hard work Nick. Thank you.

    0
  11. 20

    nice and valuable child theme post.

    Thanks a lot…

    Regards

    0
  12. 22

    Read through the article, with a big warning sign in the back of my mind – and so far, it’s still there. One has to explicitely stress the point of how the parent-child-system works – because as soon as you starting including stuff from the parent theme, esp. classes, things can go totally down the drain, like .. explode in your face, run havoc and more.

    The parent is loaded AFTER the child – and that means you CANNOT properly get class inheritance working (cause the parent classes are loaded AFTER the child). Which is a total PITA if you work with frameworks. Yes, one can figure out how to still get it working (includes lots of “if( !class_exists”, include_once() and fun like OOP Patterns and using constants), but it’s really nasty, messy and also very fragile.

    Next on, the parent-child system plays nice with “official” default WP themes, but as soon as you take on most “premium” themes, including quite a lot found at the official WP directory, you might be in for above nasty surprise. Even simple stuff like replacing the header.php might fail, because of the usage of some framework – which, at the loading time of the child theme, is not yet available, because it’ll load only afterwards, with the parent theme!

    BTW: The latter one is a Real Life example – had that just a few weeks ago. Wish everyone (= theme developers) would just use Action and Filter hooks instead of using hardcoded template tags or globalized object calls; would make my developer life MUCH more easy and relaxed. Yeah, and of corpse, the client is happier, too, because of less money wasted for getting the theme behave nicely, which then might be used for something else (eg. improving other parts of the actual site, or future work, or even another project for the same client).

    The list goes on .. but the major PITA in this is theme developers entirely ignoring the child-parent-theme loading order; even when they are used to publish their themes ath the official WP theme directory, most of them just test the usual “ultra-simple” child theme with the above mentioned minimum.

    So beware, in the wild: Quite a lot of those fancy “premium” themes you find at platforms like ThemeForest + Co. are NOT playing nice with child themes. That’s why I usually try to persuade my clients, if they havent purchased a theme yet, to get them from one of the “theme smithies” that play nice & fair (eg. Kriesi.at or Elmastudio).

    Just my big .02 cents,
    cu, w0lf.

    1
    • 23

      Erik van der Bas

      January 27, 2016 11:59 am

      Good to know! So big changes in those kind of themes might be very hard to achieve. And there isn’t a way to load the parent theme first I suppose?

      2
      • 24

        Poisonedcoffee

        February 1, 2016 10:45 am

        There is a very easy way around that.
        You can enqueue parent css earlier in functions.php (by overriding the theme_init function (or whatever it is called).

        1
    • 25

      I have never encountered problems like that yet but thanks for the warning and your comment!

      0
  13. 26

    Erik van der Bas

    January 27, 2016 11:52 am

    Thank you kind sir!

    I work a lot with wordpress, create full themes and plugins as well, but never had the time to dive into child themes. So this is very helpful! I can implement that directly into some projects.

    0
  14. 28

    Poisonedcoffee

    February 1, 2016 10:43 am

    Was it really necessary?
    Does this article adds anything to the codex page that was around for years now?

    -9
    • 29

      Hey there, in theory you can find most things in the Codex. However, the information there can also be very complex for beginners (it was for me), which is why I like to break down stuff so that newbies have a better start into WordPress.

      Thanks for the comment!

      7
  15. 30

    Thanks for this awesome post.

    0
  16. 31

    Thank you for the posting! I’m lazy and I have been using plugins to create child themes, such as “Child theme configurator” and “One-click child theme”. These are quite handy though I don’t know whether they are following the best practises.

    0
    • 32

      Hey there, I have never used these plugins myself, so I can’t vouch for their quality. However, with the information above, you should now be set to create your own child themes.

      Good luck!

      0
  17. 33

    Using a WordPress Child theme has been made a simple task by the author of this article. It is very informative with clear instructions that do not use too many technical jargons. Bookmarking this page, right away!

    0
  18. 35

    Thanks so much for this article!
    I’ve struggled with this on and off for several years, and this article has made it straightforward and understandable.

    0
  19. 36

    Unfortunately I got lost at the Inherit Parent Styles step. I copied and pasted the code into my php file, but somehow this caused the site to inherit the styles for the twenty-fifteen theme, not the actual style for the parent folder that I’m using (constructzine-lite). What changes do I need to make to functions.php in order to inherit the correct parent style? Thanks!

    0
  20. 38

    Hemang Rindani

    March 7, 2016 7:19 am

    Great article. WordPress is true sense is a great Enterprise Web Content Management solution which comes with unlimited functionalities to satisfy businesses with its extraordinary services. It has easy to use UI and the built-in fully functional tools like themes, module and plugins are ready to take on any challenge. Business clients throw infinite requirements to CMS development company and sometime it is required to design a theme different from the actual theme, this is where child themes are useful. Child theme is developed by inheriting all the code of actual theme to retain its functionalities. This child theme can further be modified to suit the exact business requirements. Benefit of child theme is that this customized theme can support various projects and can be used across any site designed with WordPress CMS.

    0
  21. 39

    Once I create and activate the child and go back into the “Appearance” section of the WordPress software, will I be making changes to the child theme or will they be applied back to the parent.

    I get that I can manually edit the css and php file directly. But for instance if I just want to go Appearance > Customize > Colors and change it to Dark, will that get saved in the child theme or this for more specific things like changing the positioning of text? General things like colors are safe from the version to version upgrades?

    0
  22. 40

    You have made a mistake in your instructions.

    In the screenshot twentyfifteen-child is the name of the folder.

    But then you say the text domain needs to be the same as the “slug” of your child theme.

    Yours isn’t. Here’s what you have:

    Text Domain: twenty-fifteen-child

    0
  23. 41

    Hey I am new to WordPress and I am currently trying to customize the illdy template I found. I am currently stuck on the functions.php step, when I copy and paste the code into the functions.php file to call the parent theme it does not seem to work as a full tag in the text file and displays it on top of page in html text.

    0
    • 42

      Oh ok. It was a an html entity. Well html entities don’t execute on the functions.php file for some strange reason.

      0
    • 43

      This is exactly what happened to me. Can you be more specific on how it was resolved?

      0
      • 44

        I have the same problem as you guys. I didn’t find a way to solve it, but I did find where the problem stems from:

        The php code snippets in the article (and on other Smashingmagazine articles) show as these HTML entities – I see &lt (“and” sign + a small L + a small T) instead of < ("smaller than" sign).
        When I copied the php code – it was copied with the wrong characters.

        I viewed the article on Firefox, Chrome and IE, and it was the same on all three. When visiting other webpages with php code – the code appears just fine.
        When refreshing the page, I see the "right" characters for a few seconds, and then they get replaced with the entities.

        This is very unfortunate, I started following this guide, but have to stop as I don't want to manually configure every entity.

        Can you help, Nick? Anyone?

        1
        • 45

          I have made some progress…

          I replaced the &lt:?php with <?php at the top of the functions.php file. That seems to now get the functions.php recognized. Then added the following code in that functions.php file. My web page now comes up looking nearly the same as the original. However, I lost the background colors, and the border color and the header image that I had optioned into the original. I think I've missed enqueue-ing in some other style sheet of some kind. At least it's going in the right direction.

          2
          • 46

            YES! Gawd, that was killing me..breaking my child theme, and it took me over 20 minutes of testing, re-uploading, and testing again to figure out what was wrong.

            A fabulous tutorial…with the minor detail that YOU NEED TO REPLACE

            &lt;?php
            with
            <?php

            in your functions.php file or the whole thing won't work.

            1
  24. 47

    This entire tutorial is made useless by the fact that characters like the “greater than” and “less than” characters are converted. How is anyone supposed to follow this if copying the code results in errors.

    The following doesn’t created a div with the word test inside, it just prints everything on the screen.

    &lt;div id="primary" class="content-area"&gt;

    test

    &lt;/div&gt;&lt;!-- .content-area --&gt;

    3
    • 48

      If you copy and paste the code in something like Notepad (Windows Accessories), it should get rid of the formatting. I copied this from the article, pasted in Notepad and pasted in my Child Theme editor and it was fine. I know it’s an extra step, but you won’t have to reformat yourself.

      0
  25. 49

    Hi Nick. Thanks for this tutorial, which was easier for me to follow than the codex page.
    My question: What about plug-ins, menus and widgets?
    – When I activated my Child-Theme, I also had to activate the parent themes custom plug-ins (they were installed, but not activated). Other plugins, like Contactform7 were already activated…
    – My main menu was there and ready to use…
    – My widgets used in header and footer were not there, I had to redo them from scratch…
    Can you explain? :-)
    Thank you!

    1
  26. 50

    Paula Holmes

    May 15, 2016 7:29 pm

    Thank you so much for this helpful article!

    I made a silly mistake to my sparkling child theme and your tutorial helped me get my site back to normal. I will be more careful in the future.
    Thanks

    0
  27. 51

    Hey Nick

    Thanks for the awesome article above. Loving it

    0

↑ Back to top