WordPress
Child Themes

Arūnas Liuiza

WordPress Core Contributor, WordPress Kaunas Meetup co-organizer, WordCamp (Lithuania, Riga, Stockholm) speaker and one of the editors of the Lithuanian WordPress translation team.

 

Free & premium WordPress plugin developer:

WordPress Expert on Codeable;

Founder of Arunas.co and EcoSim / Vini.lt;

Lecturer at Kaunas College.

I installed a theme

I need to change an image

General Rule

  • If there is a possibility some particular piece of code will get an update from the original author, you should not touch it.

In the ideal world

  • Do not modify WordPress Themes
    • Use Child Themes
       
  • Do not modify WordPress Plugins
    • Extend them via action and filter hooks
       
  • Do not modify WordPress Core
    • Extend it via action and filter hooks

/whois a child theme?

  • It's a WP theme, based on another (parent) theme;
     
  • You can change only the templates that You need to change;
     
  • You can safely update parent theme;
     
  • Introduced in WordPress ~2.7

Can any theme be parent?

  • In theory, any WordPress theme could be used as a parent theme.
    • If the theme author was doing everything according to best practices and recomendations
       
  • In WordPress.org directory - it is required for a theme to work as a parent theme.
     
  • There are themes, that are specially made to be parent:​

How to create
a child theme?

Step 1

  • Create a new directory in wp-content/themes
     
  • I recommend to keep the name related to the parent theme - parent-child
    • ​twentysixteen-child
    • genesis-child
    • divi-child
    • ... etc.

Step 2

  • Create a style.css file in the main directory of your new theme.
  • Add the following CSS comment to the top of that file.
/*
 Theme Name:   Twenty Seventeen Child Theme
 Description:  A child theme of the Twenty Seventeen default WordPress theme
 Author:       Arūnas Liuiza
 Version:      1.0.0
*/

Step 3

  • Define the theme as a child theme
     
  • By adding an additonal Template: parent_theme line
/*
 Theme Name:   Twenty Seventeen Child Theme
 Description:  A child theme of the Twenty Seventeen default WordPress theme
 Author:       Arūnas Liuiza
 Template:     twentyseventeen
 Version:      1.0.0
*/

Step 4

  • Activate your child theme.
     
  • It will show up in the list of themes, like any other theme.

Step 5

  • Create modified templates.
     
  • WordPress will first try to find a template file in child theme directory, then - in parent theme, and it will use the first one to be found.
     
  • Example. If you want to change single.php - make a copy of that file to your child theme, and make changes there.

Step 6 (if needed)

  • Create functions.php file in your child theme.
     
  • You can use it in the same way you use functions.php of the parent theme.
     
  • This file will not override parent theme, but it will be included before inclusion of parent theme's functions.php.

Step 7 (if needed)

  • Add a theme screenshot
     
  • Just to make your theme look more pretty in theme selection screen.
     
  • Create a screenshot.png file in your child theme's directory (recommended size - 880 × 660 pixels),
    • *.jpeg / *.gif files are also supported. 

Updates

  • If parent theme gets an update, just update it.
     
  • All changes you made in the child theme will remain untouched.
     
  • If parent theme has changes in files you modified via child, you have to move those changes to the child theme's files manually.

More Information

Questions?