Embed Size (px)
Citation preview
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
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
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 [email protected]
http://www.damiencarbery.com
@daymobrew
Photo: Mine
