child themes - wordcamp dublin 2017

Child Themes

Won’t someone think of the children?

By Damien CarberyPhoto: https://flic.kr/p/ccHYYL by Justkids

Intro - What's the problem?

Editing core files is bad.

Editing themes is bad.

Child themes are easy.

Why do you need a child theme?

Perfect … Except for just one thing

A child theme can help.

Photo: https://flic.kr/p/4bnRok by m.a.r.c.

Let’s create a child theme

Just one file

/*

Name: Child Theme

Template: twentyfifteen

*/

That’s it. Done. Now go Activate it.

What can you do now?

● Change the styles● Change the layout of posts, pages, archives

or individual ones● Add new features e.g. add support for

WooCommerce

Changing styles

This is the simplest, least technical thing that you can do.

Changing styles Change the page font from “Noto Serif” to Arial:

body { font-family: Arial, serif; }

Changing styles

Changing stylesChange the header colours from #333 to red:

h1, h2, h3, h4, h5, h6 {color: #f00;}

Changing styles

Changing styles

Change ul marker from disc to a circle:

ul {list-style: circle;

}

Changing styles

Beyond style changes

Beyond style changes You can copy a file from the

parent theme and modify it.

Twenty Fifteen displays the full post content on archive pages. Let’s change it to show excerpts.

Excerpts in Archives

Copy the template file and make your change.

archive.php displays the archive.

It uses content.php.

That calls the_content() so change it to the_excerpt()

Excerpts in Archives ....

You have to edit carefully and check your work.

Now test the change - oops, single pages, single posts are showing excerpts. The fix:

The code will be:if (is_archive() ) { the_excerpt();}else {the_content( sprintf( 'Continue reading %s', the_title( false ) ) );}

Adding new files

Display a specific page or post differently from all the rest.

You can make use of the template hierarchy to display a specific page or post differently.

An ‘About page, with a slug of 'about', you can create a ‘page-about.php’ file in the child theme.

WooCommerce

Fix or enhance the WooCommerce in your theme.

If the parent theme doesn’t fully support WooCommerce, or you want to tweak how it displays something, you can do this.

Let’s have a look at a quick example...

WooCommerce..

Change that button

Change "Return to shop" text on empty cart to "Go buy something already!"

WooCommerce..

Change that button

wp-content/plugins/ woocommerce/ templates/ cart/

cart-empty.php is copied to wp-content/themes/ child-theme/ woocommerce/ cart/ cart-empty.php

How does it all work?

Photo: https://flic.kr/p/muJmAv by Christina T.

Find the file

Template directory & stylesheet directory

First some terms:

● Template directory = parent theme directory

● Stylesheet directory = child theme directory

Find the file

Search order

WordPress searches for the appropriate file in the child theme directory, then the parent theme directory.

For a page, slug ‘about’, ID 2 it will look in:child-theme/page-about.phpparent-theme/page-about.phpchild-theme/page-2.phpparent-theme/page-2.phpchild-theme/page.phpparent-theme/page.php

The child theme always wins!

Beyond CSS and page templates

functions.php

Much more control … if you are comfortable with php.

functions.php is run automatically after all the active plugins have been loaded.

The child theme’s functions.php runs directly before the parent theme’s functions.php.

functions.php...

Override the parent theme

A well written theme, like Twenty Fifteen, will run its code at the correct time, using the appropriate actions.

You can override these by changing the priority in add_action()

functions.php...

Correct the stylesheet loading.

Twenty Fifteen does not load the stylesheet correctly. It only loads the child theme’s spreadsheet.

We can use @import or redo the loading.

functions.php...

Correct the stylesheet loading… the fix

We run our code after the parent theme. The code unloads the child theme stylesheet and then reloads it, making the child theme stylesheet depend on the parent theme’s file and so loads after it in the html.

Correct the stylesheet loading...

add_action( 'wp_enqueue_scripts', 'ct_styles', 11 );

function ct_styles() { wp_dequeue_style( 'twentyfifteen-style' );

wp_enqueue_style( 'twentyfifteen-style', get_template_directory_uri() . '/style.css' );

wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('twentyfifteen-style') );}

Or: http://justintadlock.com/archives/2014/11/03/loading-parent-styles-for-child-themes

What about bad parents

Photo: https://flic.kr/p/7Rdiq6 by IZATRINI.com

Bad parent themes

Sometimes they do it their way … the wrong way

Most themes on wordpress.org get the basics right but you may find exceptions. Example:wp_head();echo '<link src="/path/to/".$colour.".css">';

Bad parent themes

This stylesheet cannot be overloaded without editing header.php.

Ideally it should be loaded via the ‘wp_enqueue_scripts’ action. Report it to the developer!

Bad parent themes

Allow child themes to override all files.

A theme may include other files that a child theme would like to override e.g. image files or javascript files.

Example:wp_enqueue_scripts('cool-stuff', get_template_directory_uri() . '/js/cool.js',array( 'jquery' ) );

Bad parent themes

Use get_theme_file_uri()

Twenty Fifteen hardcodes the js/html5.js file instead of using this technique.

We have to wp_dequeue_script() and wp_enqueue_script() to load our version. A fix...

wp_enqueue_scripts('cool-stuff', get_theme_file_uri( '/js/cool.js' ),array( 'jquery' ) );

Summary - Child themes are great

● Simple to create.● Changes are not lost when parent theme

updated.● You can change as much or as little as you

need.

Thanks!

Questions and Corrections to:

Damien Carberydamien@damiencarbery.com

http://www.damiencarbery.com

@daymobrew

Photo: Mine