Working with Child Themes

Utsav singh @rathourBlogs at: http://codepixelz.com

(@codepixelzmedia)Dev @ Jasper IT Solutions

Why bother?Because we should.

Better way to theme

Automattic recommends.

Next developer will thank you.

Bother to Explain?

Of course NotThat is why I am here.

A quick survey:

Who among here...

• Understands what a child theme is?

• has created and used child themes?

Scenario #1

Scenario #2

Let me make some crazy changes to the theme code.

Oh wow! An Update. *clickity click*

Been there before?How does it feel?

Enter:

• Inherits the functionality of parent theme

• Allows you to:- Modify Parent theme- Add Features to the Parent theme

• Safest and easiest way to modify

Child Theme

Like Father Like Son

Like Father Like Son

Is just like the parent.

A little modification here and there

A little features added here and there

Why use Child Theme?Changes are lost while updating, parent theme

Speeds up Development Process

Overrides the parts of parent theme that you specify, without actually changing the theme itself.

Great another week or two of learning

Nope, this is easier than most of you have thought it would be.

This is moreover like any other theme.

How to create a Child Theme?

How to create a Child Theme?

How to create a Child Theme?

/*

Theme Name: Twenty Thirteen Child Theme

URI: http://codepixelz.com/twenty-thirteen-child/

Description: Twenty Thirteen Child Theme

Author: Utsav Singh Rathour

Author URI: http://codepixelz.com

Template: twentythirteen

Version: 1.0.0

*/

Create style.css inside the folder and add this

How to create a Child Theme?

How to create a Child Theme?

Why this Kolaveri D?

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

What next?Go Ahead, make CSS changes that you wanted to make.

Customize

But I have more than just CSS to change

Working with Templates

Simply create a file with same name and it

overwrites same file from Parent theme

Eg: header.php in child replaces parent’s header.php

Working with Templates

• Parent’s header.php

wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );get_search_form();

• Child’s header.php

wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) );//get_search_form();

Including a File

• require_once( get_stylesheet_directory() . '/my_included_file.php' );

why get_stylesheet_directory()?Because get_template_directory() returns Parent themes path.

• get_template_part( 'content', get_post_format() );

Note: It looks for say, content-video.php on child theme, if not found; before falling back to content.php on child. Searches for the file in parent.

Handling Functions

• Child’s, functions.php is loaded before Parent’s functions.php

• you can make the user functions replaceable by a child theme, by declaring them conditionally

Handling Functions

Make sure your parent theme has functions defined this way.

if ( ! function_exists( 'theme_special_nav' ) ) { function theme_special_nav() { // Do something. } }

But wait…

• Just because you can, doesn’t mean you should.

• Be wise: “Measure Twice, Cut Once”

• Almost anyone can become a parent, but not all are good parents. And same applies for themes.

Good Parent and Bad Parent

• Good Parent's functions look like:

if ( ! function_exists( 'do_this' ) ) {//Something here}

• Bad Parent's functions look like :

function do_this(){// Something here}

When not to use Child theme?

• When you are creating a theme and know, you won’t update

• Using a theme that never updates.

• Because it is confusing to client.

• Because it is a little slow.

Go Ahead! Experiment!Find more at: http://codex.wordpress.org/Child_Themes

Questions?