WordCampGR 2012: Developing Child-Theme Friendly Themes

Developing Child-Theme Friendly Themes Chip Bennett, WordCamp St. Louis, 18 August 2012 @chip_bennett

Developing Child-Theme Friendly ThemesAudience: ● Developers ● Out of scope: how to create a child Theme ● http://codex.wordpress.org/Child_ThemesWhy Develop Child-Theme Friendly Themes?The Basics: ● Understand the Template Hierarchy ● Understand Template Directory vs Stylesheet DirectoryIntermediate: ● Template-part files ● Callback all the things in functions.phpAdvanced: ● 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.”3 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesWhy Simplify?● End-User Modification ● Developing Child-Theme Friendly Themes will facilitate end-user Theme modifications 4 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesWhy 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

Developing Child-Theme Friendly ThemesWhy 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

Basics: Understand the Template Hierarchy Simplifying Theme template files7 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyWhat is theTemplateHierarchy? 8 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyWhat is theTemplateHierarchy?http://codex.wordpress.org/ Template_Hierarchy 9 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyDoes your template file listlook like this? 10 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyDoes your template file listlook like this?404.phparchive.phpattachment.phpauthor.phpcategory.phpdate.phpfront-page.phphome.phpindex.phpsearch.phptag.php 11 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyDoes your template file list Or perhaps this?look like this?404.phparchive.phpattachment.phpauthor.phpcategory.phpdate.phpfront-page.phphome.phpindex.phpsearch.phptag.php 12 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyDoes your template file list Or perhaps this?look like this?404.php index.phparchive.phpattachment.phpauthor.phpcategory.phpdate.phpfront-page.phphome.phpindex.phpsearch.phptag.php 13 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyDoes your template file list Or perhaps this?look like this?404.php index.phparchive.phpattachment.phpauthor.phpcategory.phpdate.phpfront-page.phphome.phpindex.phpsearch.phptag.phpConsider usingconditional tags 14 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyDoes your template file list Or perhaps this?look like this?404.php index.phparchive.phpattachment.phpauthor.phpcategory.phpdate.phpfront-page.phphome.phpindex.phpsearch.phptag.phpConsider using conditional Consider using template-tags part files. 15 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyKey Points 16 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyKey Points ● Dont include template files you dont need 17 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyKey Points ● Dont include template files you dont need ● Dont over-complicate conditional content in template files 18 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand the Template HierarchyKey Points ● Dont include template files you dont need ● Dont over-complicate conditional content in template files ● Use template-part files to keep DRY 19 WordCamp Grand Rapids: 18 Aug 2012

Basics: Template vs Stylesheet Directory Whats in a name?20 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-Alone Themes 21 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-Alone Themes● Stylesheet directory and Template directory are the same 22 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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 ThemeChild Themes 25 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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 ThemeChild Themes● Stylesheet directory 26 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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 ThemeChild Themes● Stylesheet directory ● Corresponds to the containing directory for the current Theme 27 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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 ThemeChild 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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 ThemeChild 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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 ThemeChild 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryStand-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 ThemeChild 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 Themes style.css file, via the Template: <theme-name> header tag (e.g. Template: twentyeleven) 31 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryWhy does it matter? 32 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryWhy does it matter? ● Use Template directory for anything that should not be overridden by the Child Theme: 33 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryWhy 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryWhy 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryWhy 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryWhy 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryWhy 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs Globals 39 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs GlobalsStylesheet Directory 40 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs GlobalsStylesheet DirectoryUse this:get_stylesheet_directory_uri() 41 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs GlobalsStylesheet DirectoryUse this:get_stylesheet_directory_uri()not this:STYLESHEETPATH 42 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs GlobalsStylesheet Directory Template DirectoryUse this:get_stylesheet_directory_uri()not this:STYLESHEETPATH 43 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs GlobalsStylesheet Directory Template DirectoryUse this: Use this:get_stylesheet_directory_uri() get_template_directory_uri()not this:STYLESHEETPATH 44 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs GlobalsStylesheet Directory Template DirectoryUse this: Use this:get_stylesheet_directory_uri() get_template_directory_uri()not this: not this:STYLESHEETPATH TEMPLATEPATH 45 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Stylesheet/Template Directory Functions vs GlobalsStylesheet Directory Template DirectoryUse 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Referencing Template Files 47 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: Referencing Template Files● What about template-part files, or custom page templates? 48 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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

Developing Child-Theme Friendly ThemesBasics: Understand Template Directory vs. Stylesheet DirectoryNote: 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● Lets take a look at template-part files. 57 WordCamp Grand Rapids: 18 Aug 2012

Intermediate: Template-Part Files Because you always want to keep your Themes DRY58 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe locate_template() file-search cascade 59 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesThe 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy Use Template-Part Files? 69 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy Use Template-Part Files? ● Using template-part files ensures DRY 70 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy Use Template-Part Files? ● Using template-part files ensures DRY ● “Core” template-part files 71 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy Use Template-Part Files? ● Using template-part files ensures DRY ● “Core” template-part files ● Arbitrary template-part files – loop.php: get_template_part( loop ) – loop-header.php – loop-footer.php – post-header.php – post-content.php – post-footer.php 75 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesHow to use template-part files 78 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesHow to use template-part files ● Basic usage: ● get_template_part( loop ); ● get_header(); 79 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesHow 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

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesHow to use template-part files ● Basic usage: ● get_template_part( loop ); ● get_header(); ● Intermediate usage: ● get_template_part( loop, page ); ● get_header( page ); ● Advanced usage: ● get_template_part( loop, theme_get_context() ); ● get_header( theme_get_context() ); 81 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Template-Part FilesHow to use template-part files ● Basic usage: ● get_template_part( loop ); ● get_header(); ● Intermediate usage: ● get_template_part( loop, page ); ● get_header( page ); ● Advanced usage: ● get_template_part( loop, theme_get_context() ); ● get_header( theme_get_context() ); ● PROTIP: wp-includes/template-loader.php 82 WordCamp Grand Rapids: 18 Aug 2012

Intermediate: Callback All The Things Your Theme is a novel, Child Themes are fan fiction, and every plot should have a hook83 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsWhy use callbacks? 84 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsWhy 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

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsCallback 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

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsCallback 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

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsCallback all the things Before register_sidebar( array( // Args array ) ); 90 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesIntermediate: Callback All The ThingsCallback 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

Advanced: Template Content Filters Content modification more powerful than template-part files92 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat is a template content filter? 93 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat is a template content filter?● A template content filter is simply a custom Theme filter 94 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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: ● © Site Name, proudly powered by WordPress, design by Theme Name 100 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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: ● © Site Name, proudly powered by WordPress, design by Theme Name ● Instead of making a Theme option, use a filter: 101 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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: ● © Site Name, proudly powered by WordPress, design by Theme Name ● Instead of making a Theme option, use a filter: – $footer_text = © Site Name, proudly powered by WordPress, design by Theme Name; 102 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersWhat 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: ● © Site Name, proudly powered by WordPress, design by Theme Name ● Instead of making a Theme option, use a filter: – $footer_text = © Site Name, proudly powered by WordPress, design by Theme Name; echo apply_filters( themename_footer_text, $footer_text ); 103 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersHow would a child Theme use a template content filter? 104 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersHow would a child Theme use a template content filter?● Using the site footer text example: 105 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersHow 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

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersHow 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 .= Yall come back now, hear?; return $footer_text; } 107 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Template Content FiltersHow 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 .= Yall come back now, hear?; return $footer_text; } add_filter( themename_footer_text, childthemename_filter_site_text ); 108 WordCamp Grand Rapids: 18 Aug 2012

Advanced: Extensible Theme Options Using the Settings API for fun and profit* * Profit not guaranteed109 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsWhy Bother With Extensible Theme Options? 110 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsWhy Bother With Extensible Theme Options?● For most of the same reasons for supporting child Themes 111 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsWhy 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow to Use Extensible Theme Options 113 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow to Use Extensible Theme Options● Once again, use custom filters 114 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow to Use Extensible Theme Options● Simply replace this: ● return $parameters; 117 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow would a Child Theme Use Extensible Theme Options? 120 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow would a Child Theme Use Extensible Theme Options?● Example #2, deleting a Theme option: 125 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow would a Child Theme Use Extensible Theme Options?● Example #3, modifying an existing Theme option: 127 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly ThemesAdvanced: Extensible Theme OptionsHow 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

Feedback You’ve heard from me; now I want to hear from you129 WordCamp Grand Rapids: 18 Aug 2012

Developing Child-Theme Friendly Themes Questions? 130 WordCamp Grand Rapids: 18 Aug 2012

http://www.conseilsmarketing.com	109
https://si0.twimg.com	2
http://a0.twimg.com	1

WordCampGR 2012: Developing Child-Theme Friendly Themes

by Chip Bennett on Aug 18, 2012

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 112

Statistics

WordCampGR 2012: Developing Child-Theme Friendly Themes Presentation Transcript