Share on facebook
Facebook
Share on twitter
Twitter

All You Need to Know About WordPress Child Themes

WordPress attracts tons of bloggers that want to handle things on their own. You gain full control, and there is nothing that you couldn’t adjust with a few lines of PHP, CSS, or HTML. On top of that, there are hundreds of small functions regarding the extension of the CMS available on the web. The world of WordPress could be so beautiful if it weren’t for the theme updates. With child themes, these become a lot less scary.

Do you know this problem? You install a theme, adjust it to meet your desires, and you’re satisfied and happy. But then, the next theme update comes around, and all of your changes are gone.

To prevent this from happening to you, this article will teach you how to create and use a child theme.

What’s a Child Theme and What do I Need it For?

Basically, a child theme is the child of a full-fledged, regular theme. It uses the files of the parent theme for display. This includes all template files, the style sheet for the design, the JavaScripts – everything. That’s why both themes have to be in the theme folder wp-content/themes at all times.

All Changes Remain, Even After an Update

A fresh set-up child theme looks exactly like its “parent” theme. This is the starting point for every customization of your design. Here, you can make any change you want, without any dangers, and these changes will remain even after an update of the original theme. That’s the big advantage.

Every WordPress theme that is capable of receiving updates should only be used with a child theme. It’s very simple, and in today’s article, we’ll teach you all the few pitfalls that can come up.

The Preparation for Creating a Child Theme

To create a child design, you need an FTP program, as well as an HTML editor. You can get both for free. To work with the FTP program, you’ll also need the FTP access information for your web host. Your host will provide this information.

  • I can recommend the FTP program “FileZilla” as it’s feature-rich, and free for both Windows, and Mac.
  • The HTML editor I’d recommend is the program “Brackets“. It’s free as well, and due to its many expansions, it can be tailored to your needs.

Of course, there are other, good HTML editors. Thus, we have compiled a list with programs for Windows, and for Mac.

Creating and Using Child Themes

I’ll use WordPress’ popular Twenty Fifteen Standard Theme as an example for the creation of a child theme. You’ll learn to create a child design, use an own stylesheet for the CSS, and to adjust theme files. I will also introduce you to all tripping stones that may come up when working with child layouts.

1 – The Creation and Activation of a Basic Child Theme

A child theme only requires three things: the index to the parent theme, a style.css file, and a functions.php.

First, create a folder on your desktop, and name it “twentyfifteen-child”. Next, please create an empty file named style.css using the HTML editor. Enter the following into the CSS file:

/*
  Theme Name:   Twenty Fifteen Child
  Description:  Twenty Fifteen Child Theme
  Author:       Your Name
  Author URI:   http://yourdomain.com
  Template:     twentyfifteen
  Version:      1.0.0
  Text Domain:  twenty-fifteen-child
  */
/* Enter All of Your Changes at the Bottom */

This Header Defines the Following Things:

  • The name of your theme
  • The description that states that it’s a child theme of the Twenty Fifteen Theme
  • Under Template, you’ll find the “address” that your theme needs in order to be able to display the template files. It’s the name of the parent theme’s theme folder. When creating a child theme for another theme, of course the folder name of your theme has to be included. So, if you need a child theme for the popular “Hueman” theme, this will say “hueman”.
  • Under Text Domain, your child theme finds the translation files, so that the theme will continue to be displayed in the language you chose.

Next, set up an empty file called functions.php. The following has to go into this file:

<?php   /* =============================================================================   The functions.php for Your Child Theme  ============================================================================= */        /**   * This Function is Necessary. It Installs the Parent Theme's CSS   * The CSS of Your Child Theme Will be Installed Automatically.   */   add_action( 'wp_enqueue_scripts', 'tb_theme_enqueue_styles' );  function tb_theme_enqueue_styles() {      wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );    }    /* =============================================================================  From This Point Downwards is Where You Can Enter Your Changes  =============================================================================== */

Optional: Create a Preview Image For Your Theme

Each theme has a screenshot, so it is easy to tell apart from the other themes in the dashboard. All you have to do for that is to set up a preview image with the name screenshot.png. This graphic goes into the folder of the child theme. There, it has to be placed within the main index, not into a separate folder.

The recommended size is 880 x 660 pixels. However, it will be displayed in 387 x 290 pixels. The large file size allows the screenshot to be displayed well on retina screens. You may also use other image formats like JPG, or GIF, but PNG is recommended. I have created the following preview image for the child theme:

Screenshot Twenty Fifteen Child-Theme

Feel free to download and use it.

2 – Activating the Child Theme

Now, upload the folder twentyfifteen-child into the theme index (wp-content/themes) of your WordPress, and activate your new child theme under “Design => Themes”.

child-theme-aktivieren

Now, the child theme is active. Thanks to the new screenshot, it is very easy to find within your theme index. Of course, there have not been any changes made to the design yet, so your adjustments will have to follow.

Das Child-Theme direkt nach der Aktivierung, es sind noch keinerlei Änderungen zu sehen.
The Child Theme Right After the Activation, No Changes to be Seen.

3 – Customizing Child Themes – CSS

Now, write all adjustments into your child theme’s style.css. A few very simple adjustments would be changing the background color, the color, size, and font of the header, and so on. With just a few lines of CSS, we’ve already changed the theme’s design entirely:

/*   
Theme Name:   Twenty Fifteen Child   
Description:  Twenty Fifteen Child Theme   
Author:       Andreas Hecht   
Author URI:   http://techbrain.de   
Template:     twentyfifteen   
Version:      1.0.0   
Text Domain:  twenty-fifteen-child  
*/    

/* Enter All of Your Changes Below */
    
body {      color: #666;      background: #444;  }    
h1.site-title {      font-size: 38px;  }  
h1.site-title a {      color: #900;  }    
#main {      padding-top: 10px;  }    
h2.entry-title {      font-family: Arial, sans-serif;      font-size: 38px;  }    
h2.entry-title a {      color: #900;  }
Das leicht modifizierte Child-Theme
The Slightly Modified Child Theme Already Has a Completely Altered Appearance.

4 – Working With Template Files

Your new theme is fully customizable, you can also use your own templates, or revise the files of the parent theme. WordPress checks the child theme folder for template files first. If there are none, the files from the parent theme will be used.

This means, that a file header.php in the child theme folder is being used, instead of the file in the parent theme. If you want to change the display of a specific file, simply copy it from the parent theme into your child. Now you are able to either change the entire display, or add certain elements only.

Two Examples: Changing Post Images and Static Share Buttons

Example 1: Reversing the Display of the Post Images

Copy the file content.php from your parent into the child folder. The original code of the file in the lines 14 to 27 looks as follows:

    
<?php if ( is_single() ) : the_title( '

', '

' ); else : the_title( sprintf( '

', esc_url( get_permalink() ) ), '

' ); endif; ?>

For the fun of it, let’s reverse the code, and insert the post image under the header.

<?php if ( is_single() ) : the_title( '

', '

' ); else : the_title( sprintf( '

', esc_url( get_permalink() ) ), '

' ); endif; ?>

Of course, our CSS needs some adjustments, so that the final result looks superb.

/*   Theme Name:   Twenty Fifteen Child   Description:  Twenty Fifteen Child Theme   Author:       Andreas Hecht   Author URI:   http://techbrain.de   Template:     twentyfifteen   Version:      1.0.0   Text Domain:  twenty-fifteen-child  */    /* Alle Deine Änderungen fuegst Du unterhalb ein */    body {      color: #666;      background: #444;  }  h1.site-title {      font-size: 38px;  }  h1.site-title a {      color: #900;  }  #main {      padding-top: 10px;  }  h2.entry-title, h1.entry-title {      font-family: Arial, sans-serif;      font-size: 38px;      padding-top: 20px;      margin-bottom: 20px;  }  h2.entry-title a{      color: #900;  }  h1.entry-title {      color: #444  }

Screenshot of the Final Result:

Das Endergebnis mit der umgekehrten Reihenfolge von Bild und Überschrift.
The Final Result With the Reversed Order of Image and Header.

Example 2: Adding Static Share Buttons

This task is also done using the content.php file. You don’t have to place another file in the child folder.

Part 1: The Snippet for the functions.php

            <?php }  add_action( 'wp_enqueue_scripts', 'tb_fontawesome' );

The buttons need two functions. Number one creates the buttons, and number two adds the required icon font “Font Awesome” to your header.

Part 2: The CSS

For the buttons to be displayed correctly, we need a bit of CSS. Depending on the theme, the width of the single buttons in line nine may need to be adjusted. I have already done that for our Twenty Fifteen child.

/* =============================================================================   STATIC SHARE-BUTTONS  ============================================================================= */    div.share-buttons.top {margin-top: 0 !important; max-width: 100%; margin-bottom: 15px }  div.share-container {padding-bottom: 20px; border-bottom: 3px solid #eee}  .share-buttons { padding: 10px; margin: 20px 0 0 0; background: #f5f5f5;  max-width: 100%; display: inline-block; overflow: hidden}  .share-buttons a, .share-buttons a:hover { color: #fff !important; text-decoration: none !important; border-bottom: none !important}  .share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.druck, .share-buttons a.fb-like { display: block; width: 112px;  font-size: 16px; font-size: 1rem; padding: 6px 0; text-align: center; opacity: 0.7; filter: alpha(opacity=70); color: #fff; float: left; font-family: Arial, sans-serif;}  .share-buttons a:hover, .share-buttons a:active, .share-buttons a:focus { opacity: 1; filter: alpha(opacity=100); text-decoration: none !important; color: #fff !important; border-bottom: none !important}  .share-buttons a.facebook { background: #3e64ad; }  .share-buttons a.twitter { background: rgb(0, 172, 237); }  .share-buttons a.googleplus { background: #cd3627; }  .share-buttons a.fb-like {background: #4267b2}  .share-buttons a.twitter, .share-buttons a.facebook, .share-buttons a.googleplus, .share-buttons a.fb-like { margin-right: 5px; }  .share-buttons a.druck { margin-right: 0;}  a.druck{background:#13475e;}  a.druck:before{content:'f02f';font-family:FontAwesome;font-size:16px;padding-right:8px}  a.facebook:before{content:'f09a';font-family:FontAwesome;font-size:16px;padding-right:8px}  a.twitter:before{content:'f099';font-family:FontAwesome;font-size:16px;padding-right:8px}  a.googleplus:before{content:'f0d5';font-family:FontAwesome;font-size:16px;padding-right:8px}  a.fb-like:before{content:'f164';font-family:FontAwesome;font-size:16px;padding-right:8px}

Part 3: The Correct Placement in content.php

    
<?php /* translators: %s: Name of current post */ the_content( sprintf( __( 'Continue reading %s', 'twentyfifteen' ), the_title( '', '', false ) ) ); wp_link_pages( array( 'before' => '', 'link_before' => '', 'link_after' => '', 'pagelink' => '' . __( 'Page', 'twentyfifteen' ) . ' %', 'separator' => ', ', ) ); ?>

The correct position is still within the DIV .entry-content, right above the closing

tag.

The Final Result of Our Efforts:

We get these beautifully formatted share buttons with icons for Facebook, Twitter, Google+, the Facebook page, and a button that activates the browser’s print function.

Die statischen Share-Buttons am Ende eines Artikels.
The Static Share Buttons at the End of an Article.

5 – Now, Let’s Get Serious. Including Files

One of the pitfalls when working with child themes. Many clueless beginners fail this seemingly simple task, because the snippets from the web are always meant for independent themes. That’s why they can’t work.

If you want, or have to include a file, the internet will give you the following code:

require_once( get_template_directory() . '/my_included_file.php' );

This small tag tries to load a file from the parent theme. That’s where the child theme’s templates are located. As we overwrite the parent theme’s stylesheet with ours, the following tag has to be used instead:

require_once( get_stylesheet_directory() . '/my_included_file.php' );

The tag above searches for the needed file from the child folder. Thus, always use the get_stylesheet_directory() variant, and you’ll get the desired result.

Check every snippet from the internet, to see if it has been modified for this small difference.

6 – Adding Widget Areas

Additional widget areas are possible without any problems. For example, we could create an area that wasn’t meant to contain widgets – the footer. Add the following code to the functions.php of your child theme:

 'Footer Widget',  'id'            => 'footer-widget',  'description' => __( 'An additional widget area in the footer' ),  'before_widget' => ''  ) );  }  add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );

Afterward, copy the footer.php from the “Twenty Fifteen” theme folder into your theme folder, and add this small code in beforehand:


At this point in the footer.php the code seems to be in good hands:

    
<a href="">

The Final Result:

Unser zusätzlicher Widget-Bereich im Footer.
Our Additional Widget Area in the Footer.

Child Theme Download

You can download the child theme for Twenty Fifteen that we just created.

The Creation of a Child Theme From an Existing, Modified Theme

It is so much easier to create a child theme from scratch. However, if you have already modified your theme a lot, without having a child theme set up in advance, it’s still possible. You have to transfer all changes into the child theme to make sure that any updates to the parent theme don’t delete any changes.

Read the following steps, and follow them precisely. This is complicated, and hard work with a lot of fiddling.

  1. First, make a backup of your theme. To do so, use your FTP access, and copy the theme folder to your desktop. Then, create a backup of that folder, and save it somewhere else. You’ll use one of the folders to work, while the other one serves as a backup, if everything goes wrong.
  2. Now, create a child theme, following the guide above. A folder, an empty stylesheet, an empty functions.php, and a screenshot.
  3. Get yourself a fresh version of your theme that has not been modified.
  4. Divide your HTML in the center, so that you can display the original file on the left, and the one from the modifed theme on the right. Check every template file to see if you made changes.
  5. Transfer all modifications from the functions.php into the version of your child theme.
  6. The altered files belong into the child theme folder. Also check if you have to swap out get_template_directory() for get_stylesheet_directory(). Further information above.
  7. Now for the part that really is a bit tricky. You have to compare the fresh Style.css function with the file you altered. Maybe your HTML editor has a function that lets you compare the two files, pointing out the differences. That would be helpful. I have never needed this type of function. If it is not available to you, you will have to use your own eyes to compare the files. All changes go into an own style.css file. After that, place it into the child theme folder equipped with all modifications.
  8. When you feel like you have put all altered theme files, and the extended CSS into the child theme folder, load the folder into your theme index wp-content/themes. Make sure that the fresh version of your theme is in there as well.
  9. Log into your WordPress, and make your way to the themes. Use the live preview to check your newly created child theme. If everything is displayed correctly, you’re good. If not, check in which areas you may have overlooked something.
  10. Revise the missing elements.
  11. Then, check the entire website, and all necessary functions again, using the live preview. If everything is fine, activate your child theme, and enjoy it.
  12. Never do this shit again:-)

Conclusion

Now, you’ve gotten to know pretty much all important aspects of creating a child theme, and you also know why you should always use one. As always, you’ll have to look up all other difficulties you may face on Google. Sadly, it’s practically impossible to cover everything in one article, as there are so many problems that can come up during the development of a child theme.

X