Webmasters Gallery

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.

• The 9 Best Free HTML Editors for Web Developers (Windows-Edition)
• The 5 Best Free HTML Editors for Web Developers (Mac-Edition)

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:

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”.

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.

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;  }

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     // 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 -->

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

<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();  ?>

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:

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    // Copy from here  /**  * Static Share Buttons With Print-Button  * Adjust the URL of Your Facebook-Page. The Second Link From Below.  *  */  function tb_share_buttons() {  ?>  <div class="share-container">  <div class="share-buttons">  <a class="facebook social" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;t=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Teilen</span></a>  <a class="twitter social" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&amp;text=<?php echo rawurlencode(strip_tags(get_the_title())) ?> <?php echo urlencode(get_permalink($post->ID)); ?>" target="blank" rel="nofollow"><span>Twittern</span></a>  <a class="googleplus social" title="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&amp;url=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;title=<?php echo rawurlencode(strip_tags(get_the_title())) ?>" target="blank" rel="nofollow"><span>Google+</span></a>  <a class="fb-like social" href="https://www.facebook.com/TechBrain-552504691587032" target="_blank" rel="nofollow" title="Meine Facebook-Seite Liken"><span>Like</span></a>  <a class="druck social-tooltip" href="javascript:window.print()" title="Beitrag ausdrucken">Drucken</a>  </div>  </div>  <?php }    function tb_fontawesome() {  ?>      <link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.5.0/font-awesome.min.css" type='text/css' media='all' />  <?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 // copy below this line, exchange the section .entry-content ?>    <div class="entry-content">  <?php  /* translators: %s: Name of current post */  the_content( sprintf(      __( 'Continue reading %s', 'twentyfifteen' ),      the_title( '<span class="screen-reader-text">', '</span>', false )  ) );    wp_link_pages( array(      'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfifteen' ) . '</span>',      'after'       => '</div>',      'link_before' => '<span>',      'link_after'  => '</span>',      'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentyfifteen' ) . ' </span>%',      'separator'   => '<span class="screen-reader-text">, </span>',  ) );  ?>  <!-- Die statischen Share-Buttons. Anzeige nur auf single.php -->  <?php if ( is_single() ) : ?>  <?php echo tb_share_buttons(); ?>  <?php endif; ?>  <!-- Ende statische Share-Buttons  -->    </div><!-- .entry-content -->

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

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

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

<?php    //Copy from here  function twentyfifteen_child_widgets_init() {  register_sidebar( array(  'name'          => 'Footer Widget',  'id'            => 'footer-widget',  'description' => __( 'An additional widget area in the footer' ),  'before_widget' => '<div class="footer-widget">',  'after_widget'  => '</div>'  ) );  }  add_action( 'widgets_init', 'twentyfifteen_child_widgets_init' );

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

<?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>