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?

WordPress Child Themes

By Arūnas Liuiza

WordPress Child Themes

  • 2,891