Why should you use child themes in WordPress? What can a child theme do? What do bad parent themes look like?
Start off with the simple stuff (CSS changes), moving onto template file changes and finally onto writing PHP in functions.php.
6. Just one file
/*
Name: Child Theme
Template: twentyfifteen
*/
That’s it. Done. Now go Activate it.
7. 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
16. 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.
17. 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()
18. 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 )
) );
}
19. 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.
20. 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...
23. How does it all work?
Photo: https://flic.kr/p/muJmAv by Christina T.
24. Find the file
Template directory & stylesheet
directory
First some terms:
● Template directory = parent theme
directory
● Stylesheet directory = child theme
directory
25. 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.php
parent-theme/page-about.php
child-theme/page-2.php
parent-theme/page-2.php
child-theme/page.php
parent-theme/page.php
The child theme always wins!
27. 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.
28. 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()
29. 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.
30. 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.
32. What about bad parents
Photo: https://flic.kr/p/7Rdiq6 by IZATRINI.com
33. 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">';
34. 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!
35. 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' ) );
36. 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' ) );
37. 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.
