How To Setup & Use A WordPress Child Theme

What is a WordPress Child Theme?

A child theme is a theme that inherits the functionality of a parent theme. It is a separate theme, that allows you to modify the parent theme without having to modify any of the parent theme’s files.

Why should I use a WordPress Child Theme?

Child themes are particularly useful if you want to customize a non-custom theme that has updates. With a child theme, you can update the parent theme without losing the custom changes you have made to it. It can also make development more efficient, because your child theme will only contain the files from the parent theme that you’ve actually made changes to. This makes it a lot easier to find your past changes to make additional changes in the future.

How to setup a WordPress Child Theme

  1. Create a folder

    In the directory /wp-content/themes/ create a new folder with the same name as the theme you want to create a child theme of, but add “-child” to the end of it. For example this blog uses the theme “Newspaper”, so the child theme folder would be named “Newspaper-child” like this /wp-content/themes/Newspaper-child/

  2. Create a style.css file

    style.css is the only file needed to activate a child WordPress theme. Just copy & paste the following into a text editor and replace all three instances of the theme name with the name of the theme you want to create a child theme of:

    /*
 Theme Name:   Newspaper Child
 Template:     newspaper
*/

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

    If you’d like to add all the details of your child theme, use the following Twenty Fourteen Child style.css code instead:

    /*
 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");

    Then save & upload your new style.css file into the new child theme folder you created.

    If you don’t feel like doing this manually, you could instead use any of the following plugins to generate a child theme for you: One-Click Child Theme, Child Theme Configurator or Orbisius Child Theme Creator.

  3. Activate your new child theme

    Login to your WordPress Admin Dashboard and go to Appearance > Themes and click the Activate button in your new child theme.

  4. Customize parent theme via child theme

    Simply download any files you’d like to customize, make your edits and place them in the same relative path in your child theme as they exist in your parent theme. If the same file exists in your child theme, in the same relative location as in your parent theme, then WordPress will load the child theme file instead of the parent theme file.

    For example if you wanted to customize the header.php file and it was at this location /wp-content/themes/Newspaper/header.php, you would simply save a new version of header.php, then save & upload your edited version to this location in the child theme /wp-content/themes/Newspaper-child/header.php – then the child theme’s header.php file will be loaded instead of the parent theme’s header.php file.

    This is true of all files except for the functions.php file. The functions.php file in the child theme is included at the top of the parent theme’s functions.php, rather than being overwritten.

    Importing the parent theme’s style.css file into the top of the child theme’s style.css file can be helpful, because then you can add all your custom styles into the child theme style.css file and they will override the styles in the parent theme’s style.css file.

  5. Use filters whenever possible

    If you want to inject something into one of your plugins, you can do this with filters via the child theme’s functions.php file. Say I wanted to inject a text link to my blog into the Sexy Author Bio WordPress Plugin below the bio. Because the plugin has the following line of code:

    apply_filters( 'sexyauthorbio_author_description', get_the_author_meta( 'description' ) )

    I can throw the following lines of PHP code into the child theme’s functions.php file in order to inject a link to my blog below the author bio:

    add_filter('sexyauthorbio_author_description', 'add_blog_link_to_sexyauthorbio');
function add_blog_link_to_sexyauthorbio($content) {
    $output = $content;
    $output .= 'Visit Andy's Blog';
    return $output;
}

    This way if I update the Sexy Author Bio WordPress Plugin in the future, my blog link won’t be overwritten. It will continue to work so long as the plugin author (in this case me, since it’s my plugin) doesn’t rename the filter currently named “sexyauthorbio_author_description”. So whenever possible, this method should be used so you don’t have to worry about re-hacking plugins every time you update them to the latest version.

Have any other tips for using child themes?

Would love to hear of other elegant ways anyone is customizing parent themes and plugins inside a child theme. Hacking plugins and themes after every update is lame, so anything you can do to avoid it is awesome! If you have any other tips for avoiding this, please share in the comments!

RELATED ARTICLESMORE FROM AUTHOR

5 COMMENTS

  1. Andy, I once read something about WordPress not supporting language files in child themes. Can you confirm that, or am I missing something in de child theme? Looks like my child theme doesn’t pick up the file…

    • Richard,

      WordPress child themes do support language files in child themes.

      See the WordPress Codex: http://codex.wordpress.org/Child_Themes

      Internationalization

      Child themes, much like other extensions, may be translated into other languages by using gettext functions. For an overview, please see Translating WordPress & I18n for WordPress Developers.

      To internationalize a child theme follow these steps:

      Add a languages directory.
      – Something like my-theme/languages/.

      Add language files.
      – Your filenames have to be he_IL.po & he_IL.mo (depending on your language), unlike plugin files which are domain-he_IL.xx.

      Load a textdomain.
      – Use load_child_theme_textdomain() in functions.php during the after_setup_theme action.
      – The text domain defined in load_child_theme_textdomain() should be used to translate all strings in the child theme.

      Use GetText functions to add i18n support for your strings.

      Sounds like you must be missing something…

  2. Hi Andy- Great article about the umportance of Child Themes and how easy they are to set up. I want to mention up the outdated WordPress practice of using @import though.

    I’ve read countless tutorials about importing the parent themes stylesheet into your child-theme stylesheet with the @import rule. This is a bad habit because the @import rule causes each css file to be downloaded one at a time. This slows down your pagespeed and UX (user experience) Instead of using @import in your child-theme stylesheet.css file. The better alternative is to enqueue the parent theme stylesheet link into the child-themes functions.php file. The best practice is to concatenate all of your css files into one stylesheet. Doing so will make a noticeable difference in your page speed. Go ahead try it for yourself. Your users will be happy and your SEO will definitely improve. I usually combine my css and js files right before I launch. I still keep my seperated files so everything is easy to debug or change in the future. (Combining css and js files into one main.css and a all.js is a whole other article. So back to business! )

    There are many ways include your parent themes css and js. I usually use wp_enqueue_styles () to add all css and wp_enqueue_scripts () for the js files.

    For instance, if you are adding or upgrading your parent themes framework to foundation 5 or bootstrap. You would first create a function to deregister the old css and js files first. Next register the news files and finally enqueue them.

    The last thing you would do is hook into the wp_enqueue_styles() and wp_enqueue_scripts() action using addaction().

    Andy I would write an article on Penguin Initiatives explaining this process in more detail with accompanying code examples for your readers. Let me know?

  4. Rather than using import it would be better if you should create a functions.php in your child theme folder and use wp_enqueue_style() to enqueue stylesheet.

    <?php
    add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
    function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style') );
    }

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.