Child Themes provide a great deal of power for the end user to modify and extend a Theme, and offload a considerable amount of development and support work for the developer. This presentation will cover the important aspects of developing a Theme with Child Theme-friendliness in mind, including proper referencing of bundled Theme resources, incorporating template action hooks, making Theme functions pluggable and filterable, and making Theme options extensible.
2. Developing Child-Theme Friendly Themes
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
3. Why Develop Child-Theme Friendly
Themes?
“If you build it, they will come.”
3 WordCamp Grand Rapids: 18 Aug 2012
4. Developing Child-Theme Friendly Themes
Why Simplify?
●
End-User Modification
●
Developing Child-Theme Friendly Themes will
facilitate end-user Theme modifications
4 WordCamp Grand Rapids: 18 Aug 2012
5. Developing Child-Theme Friendly Themes
Why Simplify?
●
End-User Modification
●
Developing Child-Theme Friendly Themes will facilitate
end-user Theme modifications
●
Support
●
Developing Child-Theme Friendly Themes will
lighten your support workload
5 WordCamp Grand Rapids: 18 Aug 2012
6. Developing Child-Theme Friendly Themes
Why Simplify?
●
End-User Modification
●
Developing Child-Theme Friendly Themes will facilitate
end-user Theme modifications
●
Support
●
Developing Child-Theme Friendly Themes will lighten your
support workload
●
Theme Maintenance
●
Developing Child-Theme Friendly Themes will
facilitate maintenance and and bug-fixing
6 WordCamp Grand Rapids: 18 Aug 2012
7. Basics:
Understand the Template Hierarchy
Simplifying Theme template files
7 WordCamp Grand Rapids: 18 Aug 2012
8. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
What is the
Template
Hierarchy?
8 WordCamp Grand Rapids: 18 Aug 2012
9. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
What is the
Template
Hierarchy?
http://codex.wordpress.org/
Template_Hierarchy
9 WordCamp Grand Rapids: 18 Aug 2012
10. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Does your template file list
look like this?
10 WordCamp Grand Rapids: 18 Aug 2012
11. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
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
11 WordCamp Grand Rapids: 18 Aug 2012
12. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
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
12 WordCamp Grand Rapids: 18 Aug 2012
13. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Does your template file list Or perhaps this?
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
13 WordCamp Grand Rapids: 18 Aug 2012
14. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Does your template file list Or perhaps this?
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
14 WordCamp Grand Rapids: 18 Aug 2012
15. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Does your template file list Or perhaps this?
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.
15 WordCamp Grand Rapids: 18 Aug 2012
16. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Key Points
16 WordCamp Grand Rapids: 18 Aug 2012
17. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Key Points
●
Don't include template files you don't need
17 WordCamp Grand Rapids: 18 Aug 2012
18. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Key Points
●
Don't include template files you don't need
●
Don't over-complicate conditional content in
template files
18 WordCamp Grand Rapids: 18 Aug 2012
19. Developing Child-Theme Friendly Themes
Basics: Understand the Template Hierarchy
Key Points
●
Don't include template files you don't need
●
Don't over-complicate conditional content in template files
●
Use template-part files to keep DRY
19 WordCamp Grand Rapids: 18 Aug 2012
20. Basics:
Template vs Stylesheet Directory
What's in a name?
20 WordCamp Grand Rapids: 18 Aug 2012
21. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Stand-Alone Themes
21 WordCamp Grand Rapids: 18 Aug 2012
22. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Stand-Alone Themes
●
Stylesheet directory and Template directory are the same
22 WordCamp Grand Rapids: 18 Aug 2012
23. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Stand-Alone Themes
●
Stylesheet directory and Template directory are the same
●
Both correspond to the containing directory for the current
Theme
23 WordCamp Grand Rapids: 18 Aug 2012
24. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
24 WordCamp Grand Rapids: 18 Aug 2012
25. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
Child Themes
25 WordCamp Grand Rapids: 18 Aug 2012
26. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
Child Themes
●
Stylesheet directory
26 WordCamp Grand Rapids: 18 Aug 2012
27. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
Child Themes
●
Stylesheet directory
●
Corresponds to the containing directory for the current
Theme
27 WordCamp Grand Rapids: 18 Aug 2012
28. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
Child Themes
●
Stylesheet directory
●
Corresponds to the containing directory for the current Theme
●
That is: the directory that contains style.css for the current
Theme
28 WordCamp Grand Rapids: 18 Aug 2012
29. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
Child Themes
●
Stylesheet directory
●
Corresponds to the containing directory for the current Theme
●
That is: the directory that contains style.css for the current Theme
●
Template directory
29 WordCamp Grand Rapids: 18 Aug 2012
30. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
Child Themes
●
Stylesheet directory
●
Corresponds to the containing directory for the current Theme
●
That is: the directory that contains style.css for the current Theme
●
Template directory
●
Corresponds to the containing directory for the template (i.e.
Parent) Theme
30 WordCamp Grand Rapids: 18 Aug 2012
31. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
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
Child Themes
●
Stylesheet directory
●
Corresponds to the containing directory for the current Theme
●
That is: the directory that contains style.css for the current Theme
●
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)
31 WordCamp Grand Rapids: 18 Aug 2012
32. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Why does it matter?
32 WordCamp Grand Rapids: 18 Aug 2012
33. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Why does it matter?
●
Use Template directory for anything that should not be
overridden by the Child Theme:
33 WordCamp Grand Rapids: 18 Aug 2012
34. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Why does it matter?
●
Use Template directory for anything that should not be
overridden by the Child Theme:
●
Theme options
34 WordCamp Grand Rapids: 18 Aug 2012
35. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Why does it matter?
●
Use Template directory for anything that should not be
overridden by the Child Theme:
●
Theme options
●
Bundled resources (images, scripts, fonts, etc.)
35 WordCamp Grand Rapids: 18 Aug 2012
36. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Why does it matter?
●
Use Template directory for anything that should not be
overridden by the Child Theme:
●
Theme options
●
Bundled resources (images, scripts, fonts, etc.)
●
Default custom header/background image
36 WordCamp Grand Rapids: 18 Aug 2012
37. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Why does it matter?
●
Use Template directory for anything that should not be
overridden by the Child Theme:
●
Theme options
●
Bundled resources (images, scripts, fonts, etc.)
●
Default custom header/background image
●
This, in the parent Theme functions.php, will break
a child Theme:
37 WordCamp Grand Rapids: 18 Aug 2012
38. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Why does it matter?
●
Use Template directory for anything that should not be
overridden by the Child Theme:
●
Theme options
●
Bundled resources (images, scripts, fonts, etc.)
●
Default custom header/background image
●
This, in the parent Theme functions.php, will break a child
Theme:
●
require_once( get_stylesheet_uri() .
'/options.php' );
38 WordCamp Grand Rapids: 18 Aug 2012
39. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
39 WordCamp Grand Rapids: 18 Aug 2012
40. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
Stylesheet Directory
40 WordCamp Grand Rapids: 18 Aug 2012
41. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
Stylesheet Directory
Use this:
get_stylesheet_directory_uri()
41 WordCamp Grand Rapids: 18 Aug 2012
42. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
Stylesheet Directory
Use this:
get_stylesheet_directory_uri()
not this:
STYLESHEETPATH
42 WordCamp Grand Rapids: 18 Aug 2012
43. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
Stylesheet Directory Template Directory
Use this:
get_stylesheet_directory_uri()
not this:
STYLESHEETPATH
43 WordCamp Grand Rapids: 18 Aug 2012
44. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
Stylesheet Directory Template Directory
Use this: Use this:
get_stylesheet_directory_uri() get_template_directory_uri()
not this:
STYLESHEETPATH
44 WordCamp Grand Rapids: 18 Aug 2012
45. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
Stylesheet Directory Template Directory
Use this: Use this:
get_stylesheet_directory_uri() get_template_directory_uri()
not this: not this:
STYLESHEETPATH TEMPLATEPATH
45 WordCamp Grand Rapids: 18 Aug 2012
46. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Stylesheet/Template Directory Functions vs Globals
Stylesheet Directory Template Directory
Use this: Use this:
get_stylesheet_directory_uri() get_template_directory_uri()
not this: not this:
STYLESHEETPATH TEMPLATEPATH
The STYLESHEETPATH and TEMPLATEPATH globals are slated
for deprecation: http://core.trac.wordpress.org/ticket/18298.
46 WordCamp Grand Rapids: 18 Aug 2012
47. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
47 WordCamp Grand Rapids: 18 Aug 2012
48. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page
templates?
48 WordCamp Grand Rapids: 18 Aug 2012
49. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child,
or both
49 WordCamp Grand Rapids: 18 Aug 2012
50. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these
files:
50 WordCamp Grand Rapids: 18 Aug 2012
51. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()
51 WordCamp Grand Rapids: 18 Aug 2012
52. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()
●
get_template_part()
52 WordCamp Grand Rapids: 18 Aug 2012
53. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()
●
get_template_part()
●
locate_template()
53 WordCamp Grand Rapids: 18 Aug 2012
54. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()
●
get_template_part()
●
locate_template()
●
All functions search both the Stylesheet directory and
the Template directory
54 WordCamp Grand Rapids: 18 Aug 2012
55. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()
●
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
55 WordCamp Grand Rapids: 18 Aug 2012
56. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()
●
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
●
Use locate_template() in either template files or
functional files
56 WordCamp Grand Rapids: 18 Aug 2012
57. Developing Child-Theme Friendly Themes
Basics: Understand Template Directory vs. Stylesheet Directory
Note: Referencing Template Files
●
What about template-part files, or custom page templates?
●
These files could be in either the parent, or the child, or both
●
WordPress provides smart include functions for these files:
●
get_header()/get_footer()/get_sidebar()
●
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
●
Use locate_template() in either template files or functional
files
●
Let's take a look at template-part files.
57 WordCamp Grand Rapids: 18 Aug 2012
59. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
The locate_template() file-search cascade
59 WordCamp Grand Rapids: 18 Aug 2012
60. Developing Child-Theme Friendly Themes
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:
60 WordCamp Grand Rapids: 18 Aug 2012
61. Developing Child-Theme Friendly Themes
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:
●
Stylesheet directory before Template directory
61 WordCamp Grand Rapids: 18 Aug 2012
62. Developing Child-Theme Friendly Themes
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:
●
Stylesheet directory before Template directory
●
More-specific before less-specific
62 WordCamp Grand Rapids: 18 Aug 2012
63. Developing Child-Theme Friendly Themes
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:
●
Stylesheet directory before Template directory
●
More-specific before less-specific
●
Example: get_template_part( 'loop', 'page' )
63 WordCamp Grand Rapids: 18 Aug 2012
64. Developing Child-Theme Friendly Themes
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:
●
Stylesheet directory before Template directory
●
More-specific before less-specific
●
Example: get_template_part( 'loop', 'page' )
●
Searches for loop-page.php in Stylesheet directory
64 WordCamp Grand Rapids: 18 Aug 2012
65. Developing Child-Theme Friendly Themes
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:
●
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
65 WordCamp Grand Rapids: 18 Aug 2012
66. Developing Child-Theme Friendly Themes
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:
●
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
66 WordCamp Grand Rapids: 18 Aug 2012
67. Developing Child-Theme Friendly Themes
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:
●
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
67 WordCamp Grand Rapids: 18 Aug 2012
68. Developing Child-Theme Friendly Themes
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:
●
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
●
We can take advantage of this cascade to make our
Themes more child-Theme friendly!
68 WordCamp Grand Rapids: 18 Aug 2012
69. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
Why Use Template-Part Files?
69 WordCamp Grand Rapids: 18 Aug 2012
70. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
Why Use Template-Part Files?
●
Using template-part files ensures DRY
70 WordCamp Grand Rapids: 18 Aug 2012
71. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
Why Use Template-Part Files?
●
Using template-part files ensures DRY
●
“Core” template-part files
71 WordCamp Grand Rapids: 18 Aug 2012
72. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
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()
72 WordCamp Grand Rapids: 18 Aug 2012
73. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
Why Use Template-Part Files?
●
Using template-part files ensures DRY
●
“Core” template-part files
●
Arbitrary template-part files
73 WordCamp Grand Rapids: 18 Aug 2012
74. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
Why Use Template-Part Files?
●
Using template-part files ensures DRY
●
“Core” template-part files
●
Arbitrary template-part files
– loop.php: get_template_part( 'loop' )
74 WordCamp Grand Rapids: 18 Aug 2012
76. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
Why Use Template-Part Files?
●
Using template-part files ensures DRY
●
Using template-part files allows more targeted
child-Theme overrides of template content
76 WordCamp Grand Rapids: 18 Aug 2012
77. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
Why Use Template-Part Files?
●
Using template-part files ensures DRY
●
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
77 WordCamp Grand Rapids: 18 Aug 2012
78. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
How to use template-part files
78 WordCamp Grand Rapids: 18 Aug 2012
79. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
How to use template-part files
●
Basic usage:
●
get_template_part( 'loop' );
●
get_header();
79 WordCamp Grand Rapids: 18 Aug 2012
80. Developing Child-Theme Friendly Themes
Intermediate: Template-Part Files
How to use template-part files
●
Basic usage:
●
get_template_part( 'loop' );
●
get_header();
●
Intermediate usage:
●
get_template_part( 'loop', 'page' );
●
get_header( 'page' );
80 WordCamp Grand Rapids: 18 Aug 2012
83. Intermediate:
Callback All The Things
Your Theme is a novel, Child Themes are fan fiction, and
every plot should have a hook
83 WordCamp Grand Rapids: 18 Aug 2012
84. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
Why use callbacks?
84 WordCamp Grand Rapids: 18 Aug 2012
85. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
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.
85 WordCamp Grand Rapids: 18 Aug 2012
86. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
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().
86 WordCamp Grand Rapids: 18 Aug 2012
87. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
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.
87 WordCamp Grand Rapids: 18 Aug 2012
88. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
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'
) );
88 WordCamp Grand Rapids: 18 Aug 2012
89. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
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'
) );
After
function themename_setup_theme() {
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'
) );
}
add_action( 'after_setup_theme', 'themename_setup_theme' );
89 WordCamp Grand Rapids: 18 Aug 2012
90. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
Callback all the things
Before
register_sidebar( array(
// Args array
) );
90 WordCamp Grand Rapids: 18 Aug 2012
91. Developing Child-Theme Friendly Themes
Intermediate: Callback All The Things
Callback all the things
Before
register_sidebar( array(
// Args array
) );
After
function themename_widgets_init() {
register_sidebar( array(
// Args array
) );
}
add_action( 'widgets_init', 'themename_widgets_init' );
91 WordCamp Grand Rapids: 18 Aug 2012
92. Advanced:
Template Content Filters
Content modification more powerful than template-part
files
92 WordCamp Grand Rapids: 18 Aug 2012
93. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
What is a template content filter?
93 WordCamp Grand Rapids: 18 Aug 2012
94. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
What is a template content filter?
●
A template content filter is simply a custom Theme
filter
94 WordCamp Grand Rapids: 18 Aug 2012
95. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
What is a template content filter?
●
A template content filter is simply a custom Theme filter
●
Example core filter:
– echo apply_filters( 'the_content', $content );
95 WordCamp Grand Rapids: 18 Aug 2012
96. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
What is a template content 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>';
}
96 WordCamp Grand Rapids: 18 Aug 2012
97. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
What is a template content 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>';
}
add_filter( 'the_content',
'themename_filter_the_content' );
97 WordCamp Grand Rapids: 18 Aug 2012
98. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
What is a template content filter?
●
A template content filter is simply a custom Theme filter
●
To use a template content filter, simply pass a static
template text string through an apply_filters() call.
98 WordCamp Grand Rapids: 18 Aug 2012
99. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
What is a template content filter?
●
A template content filter is simply a custom Theme filter
●
To use a template content filter, simply pass a static template
text string through an apply_filters() call.
●
For example, site footer text:
99 WordCamp Grand Rapids: 18 Aug 2012
104. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
How would a child Theme use a template content filter?
104 WordCamp Grand Rapids: 18 Aug 2012
105. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
How would a child Theme use a template content filter?
●
Using the site footer text example:
105 WordCamp Grand Rapids: 18 Aug 2012
106. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
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:
106 WordCamp Grand Rapids: 18 Aug 2012
107. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
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:
– function
childthemename_filter_site_text( $footer_text ) {
$footer_text .= 'Y'all come back now,
hear?';
return $footer_text;
}
107 WordCamp Grand Rapids: 18 Aug 2012
108. Developing Child-Theme Friendly Themes
Advanced: Template Content Filters
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:
– 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' );
108 WordCamp Grand Rapids: 18 Aug 2012
109. Advanced:
Extensible Theme Options
Using the Settings API for fun and profit*
* Profit not guaranteed
109 WordCamp Grand Rapids: 18 Aug 2012
110. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
Why Bother With Extensible Theme Options?
110 WordCamp Grand Rapids: 18 Aug 2012
111. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
Why Bother With Extensible Theme Options?
●
For most of the same reasons for supporting child
Themes
111 WordCamp Grand Rapids: 18 Aug 2012
112. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
Why Bother With Extensible Theme Options?
●
For most of the same reasons for supporting child Themes
●
To leverage your Settings API-compatible, DRY
Theme options
112 WordCamp Grand Rapids: 18 Aug 2012
113. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How to Use Extensible Theme Options
113 WordCamp Grand Rapids: 18 Aug 2012
114. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How to Use Extensible Theme Options
●
Once again, use custom filters
114 WordCamp Grand Rapids: 18 Aug 2012
115. Developing Child-Theme Friendly Themes
Advanced: Extensible 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:
115 WordCamp Grand Rapids: 18 Aug 2012
116. Developing Child-Theme Friendly Themes
Advanced: Extensible 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:
●
function themename_option_parameters() {
$parameters = array(
'option_1' => array(
// option parameter key=>value pairs
)
);
return $parameters;
}
116 WordCamp Grand Rapids: 18 Aug 2012
117. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How to Use Extensible Theme Options
●
Simply replace this:
●
return $parameters;
117 WordCamp Grand Rapids: 18 Aug 2012
118. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How to Use Extensible Theme Options
●
Simply replace this:
●
return $parameters;
●
...with this:
●
return
apply_filters( 'themename_option_parameters',
$parameters);
118 WordCamp Grand Rapids: 18 Aug 2012
119. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How to Use Extensible Theme Options
●
Simply replace this:
●
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
119 WordCamp Grand Rapids: 18 Aug 2012
120. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
120 WordCamp Grand Rapids: 18 Aug 2012
121. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
Using the same callback/add_filter() pair in
functions.php
121 WordCamp Grand Rapids: 18 Aug 2012
122. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
Using the same callback/add_filter() pair in functions.php
●
Example #1, adding a new Theme option:
122 WordCamp Grand Rapids: 18 Aug 2012
123. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
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;
}
123 WordCamp Grand Rapids: 18 Aug 2012
124. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
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;
}
add_filter( 'themename_option_parameters',
'childtheme_filter_option_parameters' );
124 WordCamp Grand Rapids: 18 Aug 2012
125. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
Example #2, deleting a Theme option:
125 WordCamp Grand Rapids: 18 Aug 2012
126. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
Example #2, deleting a Theme option:
●
function childtheme_filter_option_parameters( $parameters )
{
unset $parameters['option_name'];
return $parameters;
}
add_filter( 'themename_option_parameters',
'childtheme_filter_option_parameters' );
126 WordCamp Grand Rapids: 18 Aug 2012
127. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
Example #3, modifying an existing Theme option:
127 WordCamp Grand Rapids: 18 Aug 2012
128. Developing Child-Theme Friendly Themes
Advanced: Extensible Theme Options
How would a Child Theme Use Extensible Theme Options?
●
Example #3, modifying an existing Theme option:
●
function childtheme_filter_option_parameters( $parameters )
{
$parameters['option_name']['default'] = 'some new default
value';
return $parameters;
}
add_filter( 'themename_option_parameters',
'childtheme_filter_option_parameters' );
128 WordCamp Grand Rapids: 18 Aug 2012
129. Feedback
You’ve heard from me; now I want to hear from you
129 WordCamp Grand Rapids: 18 Aug 2012