WordCampGR 2012: Developing Child-Theme Friendly Themes

Developing Child-Theme Friendly Themes

Chip Bennett, WordCamp St. Louis, 18 August 2012
@chip_bennett

Audience:
●
Developers
● Out of scope: how to create a child Theme
●
http://codex.wordpress.org/Child_Themes

Why Develop Child-Theme Friendly Themes?

The Basics:
●
Understand the Template Hierarchy
●
Understand Template Directory vs Stylesheet Directory
Intermediate:
●
Template-part files
●
Callback all the things in functions.php
Advanced:
●
Template content filters
●
Extensible Theme Options

2 WordCamp Grand Rapids: 18 Aug 2012

Why Develop Child-Theme Friendly
Themes?
“If you build it, they will come.”


Why Simplify?

●
End-User Modification
●
Developing Child-Theme Friendly Themes will
facilitate end-user Theme modifications


Why Simplify?

●
●
Developing Child-Theme Friendly Themes will facilitate
end-user Theme modifications

●
Support
●
lighten your support workload


Why Simplify?

●
●
Developing Child-Theme Friendly Themes will facilitate
end-user Theme modifications

●
Support
●
Developing Child-Theme Friendly Themes will lighten your
support workload

●
Theme Maintenance
●
facilitate maintenance and and bug-fixing


Basics:
Understand the Template Hierarchy
Simplifying Theme template files


Basics: Understand the Template Hierarchy

What is the
Template
Hierarchy?



What is the
Template
Hierarchy?

http://codex.wordpress.org/
Template_Hierarchy


Does your template file list
look like this?



Does your template file list
look like this?
404.php
archive.php
attachment.php
author.php
category.php
date.php
front-page.php
home.php
index.php
search.php
tag.php



Does your template file list Or perhaps this?
look like this?
404.php
archive.php
attachment.php
author.php
category.php
date.php
front-page.php
home.php
index.php
search.php
tag.php



look like this?
404.php index.php
archive.php
attachment.php
author.php
category.php
date.php
front-page.php
home.php
index.php
search.php
tag.php



look like this?
404.php index.php
archive.php
attachment.php
author.php
category.php
date.php
front-page.php
home.php
index.php
search.php
tag.php

Consider using
conditional tags


look like this?
404.php index.php
archive.php
attachment.php
author.php
category.php
date.php
front-page.php
home.php
index.php
search.php
tag.php

Consider using conditional Consider using template-
tags part files.


Key Points



Key Points
●
Don't include template files you don't need



Key Points
●
●
Don't over-complicate conditional content in
template files



Key Points
●
●
Don't over-complicate conditional content in template files
●
Use template-part files to keep DRY


Basics:
Template vs Stylesheet Directory
What's in a name?


Basics: Understand Template Directory vs. Stylesheet Directory

Stand-Alone Themes



Stand-Alone Themes
●
Stylesheet directory and Template directory are the same



Stand-Alone Themes
●
●
Both correspond to the containing directory for the current
Theme



Stand-Alone Themes
● Stylesheet directory and Template directory are the same
● Both correspond to the containing directory for the current Theme
● That is: the directory that contains style.css for the current Theme



Stand-Alone Themes
●
●
Both correspond to the containing directory for the current Theme
●
That is: the directory that contains style.css for the current Theme
Child Themes



Stand-Alone Themes
●
●
●
Child Themes
●
Stylesheet directory



Stand-Alone Themes
●
●
●
Child Themes
●
●
Corresponds to the containing directory for the current
Theme



Stand-Alone Themes
●
●
●
Child Themes
●
●
Corresponds to the containing directory for the current Theme
●
That is: the directory that contains style.css for the current
Theme



Stand-Alone Themes
●
●
●
Child Themes
●
●
●
●
Template directory



Stand-Alone Themes
●
●
●
Child Themes
●
●
●
●
Template directory
●
Corresponds to the containing directory for the template (i.e.
Parent) Theme



Stand-Alone Themes
●
●
●
Child Themes
●
●
●
●
Template directory
●
Corresponds to the containing directory for the template (i.e. Parent)
Theme
●
The template is defined in the current Theme's style.css file,
via the Template: <theme-name> header tag (e.g. Template:
twentyeleven)



Why does it matter?



Why does it matter?
●
Use Template directory for anything that should not be
overridden by the Child Theme:



Why does it matter?
●
●
Theme options



Why does it matter?
●
●
Theme options
●
Bundled resources (images, scripts, fonts, etc.)



Why does it matter?
●
●
Theme options
●
●
Default custom header/background image



Why does it matter?
●
●
Theme options
●
●
●
This, in the parent Theme functions.php, will break
a child Theme:



Why does it matter?
●
●
Theme options
●
●
●
This, in the parent Theme functions.php, will break a child
Theme:
●
require_once( get_stylesheet_uri() .
'/options.php' );



Note: Stylesheet/Template Directory Functions vs Globals




Stylesheet Directory




Use this:
get_stylesheet_directory_uri()




Use this:

not this:
STYLESHEETPATH




Stylesheet Directory Template Directory
Use this:

not this:
STYLESHEETPATH




Use this: Use this:
get_stylesheet_directory_uri() get_template_directory_uri()

not this:
STYLESHEETPATH




Use this: Use this:

not this: not this:
STYLESHEETPATH TEMPLATEPATH




Use this: Use this:

not this: not this:
STYLESHEETPATH TEMPLATEPATH

The STYLESHEETPATH and TEMPLATEPATH globals are slated
for deprecation: http://core.trac.wordpress.org/ticket/18298.



Note: Referencing Template Files



●
What about template-part files, or custom page
templates?



●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child,
or both



●
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these
files:



●
●
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()



●
●
●
●
●
get_template_part()



●
●
●
●
●
get_template_part()
●
locate_template()



●
●
●
●
●
get_template_part()
●
locate_template()
●
All functions search both the Stylesheet directory and
the Template directory



●
●
●
●
●
get_template_part()
●
locate_template()
●
Both functions search both the Stylesheet directory and the
Template directory
●
Use get_*() functions in template files to include
template-part files



●
●
●
●
●
get_template_part()
●
locate_template()
●
Template directory
●
Use get_*() functions in template files to include template-part
files
●
Use locate_template() in either template files or
functional files



●
●
●
●
●
get_template_part()
●
locate_template()
●
Template directory
●
Use get_*() functions in template files to include template-part
files
●
Use locate_template() in either template files or functional
files
●
Let's take a look at template-part files.


Intermediate:
Template-Part Files
Because you always want to keep your Themes DRY


Intermediate: Template-Part Files

The locate_template() file-search cascade



●
locate_template(), and therefore all of the get_*()
functions, look for files in a specific order:



●
locate_template(), and therefore all of the get_*() functions,
look for files in a specific order:
●
Stylesheet directory before Template directory



●
●
●
More-specific before less-specific



●
●
●
●
Example: get_template_part( 'loop', 'page' )



●
●
●
●
●
Searches for loop-page.php in Stylesheet directory



●
●
●
●
●
●
Searches for loop-page.php in Template directory



●
●
●
●
●
●
●
Searches for loop.php in Stylesheet directory



●
●
●
●
●
●
●
●
Searches for loop.php in Template directory



●
●
●
●
●
●
●
●
Searches for loop.php in Template directory
●
We can take advantage of this cascade to make our
Themes more child-Theme friendly!



Why Use Template-Part Files?



●
Using template-part files ensures DRY



●
●
“Core” template-part files



●
●
– header.php: get_header()
– footer.php: get_footer()
– sidebar.php get_sidebar()



●
●
●
Arbitrary template-part files



●
●
●
– loop.php: get_template_part( 'loop' )



●
●
●
– loop.php: get_template_part( 'loop' )
– loop-header.php
– loop-footer.php
– post-header.php
– post-content.php
– post-footer.php



●
●
Using template-part files allows more targeted
child-Theme overrides of template content



●
●
Using template-part files allows more targeted child-Theme
overrides of template content
●
Using template-part files allows for contextual
child-Theme overrides of template content



How to use template-part files



●
Basic usage:
●
get_template_part( 'loop' );
●
get_header();



●
Basic usage:
●
●
get_header();
●
Intermediate usage:
●
get_template_part( 'loop', 'page' );
●
get_header( 'page' );



●
Basic usage:
●
●
get_header();
●
Intermediate usage:
●
●
●
Advanced usage:
●
get_template_part( 'loop', theme_get_context() );
●
get_header( theme_get_context() );



●
Basic usage:
●
●
get_header();
●
Intermediate usage:
●
●
●
Advanced usage:
●
get_template_part( 'loop', theme_get_context() );
●
get_header( theme_get_context() );
●
PROTIP: wp-includes/template-loader.php


Intermediate:
Callback All The Things
Your Theme is a novel, Child Themes are fan fiction, and
every plot should have a hook


Intermediate: Callback All The Things

Why use callbacks?



Why use callbacks?
●
Function calls not explicitly hooked into an action
hook via callback will fire at after_setup_theme,
which may not be the appropriate action hook for the
function being called.



Why use callbacks?
●
Function calls not explicitly hooked into an action hook via
callback will fire at after_setup_theme, which may not be the
appropriate action hook for the function being called.
●
Also, function calls not explicitly hooked into an
action hook via callback cannot be overridden via
remove_action().



Why use callbacks?
●
Function calls not explicitly hooked into an action hook via
callback will fire at after_setup_theme, which may not be the
appropriate action hook for the function being called.
●
Also, function calls not explicitly hooked into an action hook
via callback cannot be overridden via remove_action().
●
By using callbacks appropriately, child Themes can
more easily override parent-Theme functionality.



Callback all the things
Before
add_theme_support( 'custom-background' );
add_theme_support( 'custom-header' );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'post-thumbnails' );
register_nav_menus( array(
'header' => 'Header Menu'
) );



Before
) );

After
function themename_setup_theme() {
) );
}
add_action( 'after_setup_theme', 'themename_setup_theme' );


Before
register_sidebar( array(
// Args array
) );



Before
// Args array
) );

After
function themename_widgets_init() {
// Args array
) );
}
add_action( 'widgets_init', 'themename_widgets_init' );


Advanced:
Template Content Filters
Content modification more powerful than template-part
files


Advanced: Template Content Filters

What is a template content filter?



●
A template content filter is simply a custom Theme
filter



●
A template content filter is simply a custom Theme filter
●
Example core filter:
– echo apply_filters( 'the_content', $content );



●
●
●
Example core filter modification:
– function
themename_filter_the_content( $content ) {
return $content . '<p>Yes, there really is a
Kalamazoo.</p>';
}



●
●
●
Example core filter modification:
– function themename_filter_the_content( $content ) {
return $content . '<p>Yes, there really is a
Kalamazoo.</p>';
}
add_filter( 'the_content',
'themename_filter_the_content' );



●
●
To use a template content filter, simply pass a static
template text string through an apply_filters() call.



●
●
To use a template content filter, simply pass a static template
text string through an apply_filters() call.
●
For example, site footer text:



●
●
●
●
© Site Name, proudly powered by WordPress, design by Theme
Name
●
Instead of making a Theme option, use a filter:



●
●
●
●
Name
●
– $footer_text = '© Site Name, proudly powered by
WordPress, design by Theme Name';
echo apply_filters( 'themename_footer_text',
$footer_text );



How would a child Theme use a template content filter?



●
Using the site footer text example:



●
●
The child Theme would include a callback and
add_filter() call in functions.php, to modify the site
footer text:



●
●
The child Theme would include a callback and add_filter()
call in functions.php, to modify the site footer text:
– function
childthemename_filter_site_text( $footer_text ) {
$footer_text .= 'Y'all come back now,
hear?';
return $footer_text;
}



●
●
The child Theme would include a callback and add_filter()
call in functions.php, to modify the site footer text:
– function childthemename_filter_site_text( $footer_text )
{
$footer_text .= 'Y'all come back now, hear?';
return $footer_text;
}
add_filter( 'themename_footer_text',
'childthemename_filter_site_text' );


Advanced:
Extensible Theme Options
Using the Settings API for fun and profit*

* Profit not guaranteed


Advanced: Extensible Theme Options

Why Bother With Extensible Theme Options?



●
For most of the same reasons for supporting child
Themes



●
For most of the same reasons for supporting child Themes
●
To leverage your Settings API-compatible, DRY
Theme options



How to Use Extensible Theme Options



●
Once again, use custom filters



●
●
Assuming all of your Theme option parameters are
contained in an array, returned by a function, this is
easy:



●
●
Assuming all of your Theme option parameters are contained
in an array, returned by a function, this is easy:
●
function themename_option_parameters() {
$parameters = array(
'option_1' => array(
// option parameter key=>value pairs
)
);
return $parameters;
}



●
Simply replace this:
●
return $parameters;



●
●
return $parameters;
●
...with this:
●
return
apply_filters( 'themename_option_parameters',
$parameters);



●
●
return $parameters;
●
...with this:
●
return apply_filters( 'themename_option_parameters',
$parameters);
●
Now, a child Theme can easily add to, remove from,
or modify all of your Theme options



How would a Child Theme Use Extensible Theme Options?



●
Using the same callback/add_filter() pair in
functions.php



●
Using the same callback/add_filter() pair in functions.php
●
Example #1, adding a new Theme option:



●
●
●
function childtheme_filter_option_parameters( $parameters )
{
$parameters['option_name'] = array(
// option parameter key => value pairs
);
return $parameters;
}



●
●
●
function childtheme_filter_option_parameters( $parameters ) {
$parameters['option_name'] = array(
// option parameter key => value pairs
);
return $parameters;
}
add_filter( 'themename_option_parameters',
'childtheme_filter_option_parameters' );



●
Example #2, deleting a Theme option:



●
Example #2, deleting a Theme option:
●
{
unset $parameters['option_name'];
return $parameters;
}



●
Example #3, modifying an existing Theme option:



●
Example #3, modifying an existing Theme option:
●
{
$parameters['option_name']['default'] = 'some new default
value';
return $parameters;
}


Feedback

You’ve heard from me; now I want to hear from you



Questions?


WordCampGR 2012: Developing Child-Theme Friendly Themes

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (7)

Ähnlich wie WordCampGR 2012: Developing Child-Theme Friendly Themes

Ähnlich wie WordCampGR 2012: Developing Child-Theme Friendly Themes (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

WordCampGR 2012: Developing Child-Theme Friendly Themes