Build your themes
child-ready

Child Theme

Does not exist without another theme, called parent theme

Inherits the functionalities and the templates from its parent

Your modifications will be preserved when the parent theme is updated.

WordPress theme

• a directory
• in "theme directory" (default: wp-content/themes)
• must contain style.css
• template must be defined

Themes

Parent Theme

Child Theme

Templates

Any template file found in the child directory (STYLESHEETPATH) overrides its counterpart from the parent directory (TEMPLATEPATH).

New template files can be added to the child directory.

/* wp-includes/template.php */
if ( file_exists(STYLESHEETPATH . '/' . $template_name)) {
  $located = STYLESHEETPATH . '/' . $template_name;
  break;
} else if ( file_exists(TEMPLATEPATH . '/' . $template_name) ) {
  $located = TEMPLATEPATH . '/' . $template_name;
  break;
}
						

Functions.php

/* wp-settings.php */
if ( TEMPLATEPATH !== STYLESHEETPATH && file_exists( STYLESHEETPATH . '/functions.php' ) )
  include( STYLESHEETPATH . '/functions.php' );
if ( file_exists( TEMPLATEPATH . '/functions.php' ) )
  include( TEMPLATEPATH . '/functions.php' );
						

Functions.php

New function

Create functions.php in your child theme and add an new function.

/* pehaa-theme-child/functions.php */
function my_child_function() {
  ...
}

						

Functions.php

Modifications

/* pehaa-theme/functions.php */
function my_function() {
  ...
}

						

How do I modify my_function?

/* pehaa-theme-child/functions.php */
function my_function() {
  ...
}
						

Fatal error: Cannot redeclare my_function()

/* pehaa-theme-child/functions.php */
function my_function() {
  ...							
}
						

/* pehaa-theme/functions.php */
if ( !function_exists( 'my_function' ) ) :
  function my_function() {
    ...
  }
endif;
						

OK: my_function is declared in the child theme.

Important child-ready theme tip:
make the user functions pluggable by declaring them conditionally.

Style.css

I guess you do it this way

/* child style.css */
@import url('../parent-theme/style.css');
/* Theme customization starts here */
						

/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
}
						

The @import method has a negative impact on web page performance.

Style.css

I guess you do it this way

/* child style.css */
@import url('../parent-theme/style.css');
/* Theme customization starts here */
						

/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
}
						

Codex : Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice.

Style.css

Codex

/* child : functions.php */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
						

/* twentyfifteen-child : functions.php */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
						

/* twentyfifteen : functions.php */
add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );
function twentyfifteen_scripts() {
  ...
  // Load our main stylesheet.
  wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );
  ...
}
						

3 situations

					
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
  $deps = array();
  if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
    wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
    $deps[] = 'T-style';
  }
  if ( apply_filters( 'load_stylesheet_css', true ) ) {
    wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
  }
}
						

Parent theme is activated : S-style is loaded

The 3rd paramenter of 'wp_enqueue_style' (dependencies) ensures that the 'T-style' (parent) will be loaded before the 'S-style' (child).

					
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
  $deps = array();
  if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
    wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
    $deps[] = 'T-style';
  }
  if ( apply_filters( 'load_stylesheet_css', true ) ) {
    wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
  }
}
						

Child theme is activated : both T and S are loaded (S after T)

The 3rd paramenter of 'wp_enqueue_style' (dependencies) ensures that the 'T-style' (parent) will be loaded before the 'S-style' (child).

Situation 2 :

Build your site css from scratch in the child

					
/* child situation 2 : functions.php */
add_filter( 'load_template_css', 'do_not_load' );
function do_not_load() {
  return false;
}
						

					
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
  $deps = array();
  if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
    wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
    $deps[] = 'T-style';
  }
  if ( apply_filters( 'load_stylesheet_css', true ) ) {
    wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
  }
}
						

Situation 3 :

Do not modify css in the child at all

	
/* child situation 3 : functions.php */
add_filter( 'load_stylesheet_css', 'do_not_load' );
function do_not_load() {
  return false;
}
						

					
/* parent : functions.php */
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
  $deps = array();
  if ( apply_filters( 'load_template_css', is_child_theme() ) ) {
    wp_enqueue_style( 'T-style', get_template_directory_uri().'/style.css', $deps );
    $deps[] = 'T-style';
  }
  if ( apply_filters( 'load_stylesheet_css', true ) ) {
    wp_enqueue_style( 'S-style', get_stylesheet_uri(), $deps );
  }
}
						

Hooks : Actions & Filters

apply_filters( $tag, $value, $var, ... );
						

The callback functions attached to filter hook $tag are invoked.

do_action( $tag, $args );
						

Execute functions hooked on a specific action hook.

add_filter( $tag, $function, $priority, $acccepted_args );
add_action( $tag, $function, $priority, $acccepted_args );
						

Hook a function to a specific filter action, $priority specifies the order in which the functions associated with a particular action are executed.

Example 1

	
/* twentyfifteen-child : functions.php */
add_action( 'twentyfifteen_credits', 'pehaa_credits' );
function pehaa_credits() {
  echo 'Customized by PeHaa.';
}
						

	
/* twentyfifteen : footer.php */
do_action( 'twentyfifteen_credits' );
						

Example 2

					
/* parent : functions.php */
require get_template_directory() . 'my_file.php';
						

					
/* parent : functions.php */
require apply_filters( 'my_file_directory', get_template_directory() ) . 'my_file.php';
						

					
/* child : functions.php */
add_filter( 'my_file_directory', 'my_stylesheet_dir' );
function my_stylesheet_dir() {
	return get_stylesheet_directory();
}