Blog
WordPress

How To Setup & Use A WordPress Child Theme

Andy Forsberg
11 Jan 2022
5 min read

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
  2. 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/
  3. Create a style.css file
  4. 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.
  5. Activate your new child theme
  6. Login to your WordPress Admin Dashboard and go to Appearance > Themes and click the Activate button in your new child theme.
  7. Customize parent theme via child theme
  8. 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.
  9. Use filters whenever possible
  10. 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!

Share this post
FEATURED BLog

Get the Latest Updates

Get notified via email when I post new content.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.