Custom Layouts Without Using Page Templates Often, Themes use custom page templates to add layout options for static pages; but custom page templates are actually intended to be used for custom content, rather than for custom layouts. And by using custom page templates to define custom layouts, custom layouts are limited to static pages. Single blog posts don’t feel the love. This session will show you how to use custom post meta data and the body_class filter to define custom layouts for both static pages and single blog posts. As a bonus, this session will show you how to use custom post metaboxes, rather than forcing users to deal with custom fields. Features a bonus presentation on the proper way to declare and use default values for Theme options.

1. Custom Layouts Without
Using Page Templates
Chip Bennett (@chip_bennett)
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 1 of 24

2. Overview
• What's the problem?
– Custom Content, Custom Layouts
– How to Have Both
• Process
– Define Post Custom Meta Data
– Modify Template Files
– Define CSS
• Putting it into Practice
– Twenty Twelve Child Theme
• Out of Presentation Scope
– Post Custom Meta Implementation
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 2 of 24

3. What's the Problem?
• Purpose of Custom Page Templates
– Custom content!
●
Archives
●
Linkroll
●
Sitemap
●
Contact form
●
Custom queries
• Most Common use of Custom Page Templates
– Layouts
– Full Width
– Different Sidebars
– Etc.
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 3 of 24

4. What's the Problem?
• Custom Page Templates for both custom
content and custom layout?
– More templates?
●
Sitemap, Sitemap Full-Width, Sitemap Three-
Column
●
Archives, Archives Full-Width, Archives Three-
Column
●
Linkroll, Linkroll Full-Width, Linkroll Three-Column
• See where this is going?
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 4 of 24

5. • Benefits
– Per-page
– Regardless of Page Template
● Page template itself is custom post meta data
● _wp_page_template
• Extra Benefits?
– Can be made to work with (almost) any Theme
– Via Child Theme, Some coding/CSS required
– Expand to other post-types
● Blog Posts, Attachments, Custom Post Types
– Plugin-defined page templates
– Expand/Dovetail with default layout options
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 5 of 24
Alternative: Custom Post Meta Data

6. • Let's see an example
• Add custom layouts to Twenty Twelve
• Via Child Theme
• Child Theme Files
– style.css
– functions.php
– sidebar.php
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 6 of 24
Practical Exercise: Twenty Twelve

7. Twenty Twelve Live
Example
(Child Theme is available for download)
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 7 of 24

8. Implementation
• Define Layout Custom Post Meta Data
– Default layout is two-column
– Add a "Full Width" layout option
• Modify Template According to Layout
– Full Width layout removes the sidebar
– Content takes up resultant space
• Modify CSS According to Layout
– Modify main-content width CSS rule
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 8 of 24

9. Define Layout Custom Post Meta
• Recommended Nomenclature:
– _themename_layout
●
Underscore: hide from custom fields UI
●
Namespacing: avoid conflicts, per-Theme
• Reminder:
– Custom Post Meta code is out of presentation scope
– Working example will be provided
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 9 of 24

10. Custom Function to Get Layout
• Define a function to get the current layout
function themename_get_layout() {
$layout = 'default';
global $post;
$post_layout = get_post_meta( $post->ID,
'_themename_layout', true );
if ( '' != $post_layout ) {
$layout = $post_layout;
}
return $layout;
}
• We'll use this in a couple places, so DRY
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 10 of 24

11. Modify the Template
• Typical template file:
<?php
// Header
get_header();
// Loop
get_template_part( 'loop' );
// Sidebar
get_sidebar();
// Footer
get_footer();
?>
• index.php, archive.php, etc.
• Child Theme: let's just modify sidebar.php
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 11 of 24

12. Modify the Template
• Modifying sidebar.php
– Before:
<?php
// Sidebar HTML Markup & PHP code
?>
– After:
<?php
if ( 'full' == themename_get_layout() ) {
return;
}
// Sidebar HTML Markup & PHP code
?>
• Adapt as needed
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 12 of 24

13. Modify CSS
• Add Layout-Based Classes to <body> tag
– Use body_class filter:
function themename_filter_body_class( $classes ) {
$classes[] = 'layout-' . themename_get_layout();
return $classes;
}
add_filter( 'body_class',
'themename_filter_body_class' );
• Result:
<body class="page template-default layout-full ...">
• Child Theme: add layout-based CSS rules:
body.layout-full #content {
width: 100%;
}
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 13 of 24

14. Links and Resources
• Downloads
– WCCbus13 TwentyTwelve Child Theme
https://github.com/chipbennett/wccbus13-twentytwelve-child
– Oenology Theme (advanced layout example)
https://github.com/chipbennett/oenology
• Codex References
– http://codex.wordpress.org/Pages#Page_Templates
– http://codex.wordpress.org/Function_Reference/get_post_meta
– http://codex.wordpress.org/Function_Reference/update_post_meta
– http://codex.wordpress.org/Function_Reference/add_meta_box
– http://codex.wordpress.org/Plugin_API/Filter_Reference/body_class
• Presentation Slides
– http://www.slideshare.net/chipbennett
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 14 of 24

15. Feedback
• Questions or comments?
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 15 of 24

16. Bonus Presentation:
Default Theme Options: You're
(probably) _doing_it_wrong()
Chip Bennett (@chip_bennett)
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 16 of 24

17. What's the Problem?
• Unnecessary wp_options DB entries
• Poor UX
• Out-of-the-box Theme output broken
• Difficult to add new options
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 17 of 24

18. • Benefits
– No DB entries required
– No Theme activation redirects
– Theme works out of the box
– Easy to add new options
• Extra Benefits?
– Theme looks awesome in WPORG preview
– Easy to add custom filter (extend options via Child
Theme)
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 18 of 24
Alternative: Sane Defaults

19. Implementation
• Define option defaults as an array
– Wrap in a custom function
– PROTIP: add a custom filter
• Parse option defaults array with get_option()
– Wrap in a custom function
• Call custom function in the template instead
of get_option() directly
• Profit
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 19 of 24

20. Define Option Defaults as an Array
• Define option defaults as an array
function themename_get_option_defaults() {
$defaults = array(
'option_a' => 'value_a',
'option_b' => 'value_b'
);
return $defaults;
}
• Flexible, Extensible
– Wrap in a custom function
– PROTIP: add a custom filter
return apply_filters( 'themename_option_defaults',
$defaults );
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 20 of 24

21. Parse defaults with get_option()
• Wrap in a custom function
function themename_get_options() {
$defaults = themename_get_option_defaults();
$options = wp_parse_args(
get_option(
'theme_themename_options',
array()
),
$option_defaults
);
return $options;
}
– The magic: wp_parse_args()
– Note: pass array() as second arg to get_option()
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 21 of 24

22. Call Custom Function in Template
• Call custom function instead of get_option()
– Before:
<?php
global $themename_options;
$themename_options =
get_option( 'theme_themename_options' );
?>
– After:
<?php
global $themename_options;
$themename_options = themename_get_options();
?>
• Adapt as needed
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 22 of 24

23. Profit
• Theme works out-of-the-box
– No options DB entry? No problem!
– Theme activation? Ain't nobody got time fo' that!
– WPORG preview? Knows default options!
• Change/Add Defaults
– Modify themename_get_option_defaults()
– Bonus: WPORG will show the updated defaults
• Child Theme change/add defaults
– add_filter(
'themename_option_defaults',
'childtheme_function'
);
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 23 of 24

24. Links and Resources
• Codex References
– http://codex.wordpress.org/Function_Reference/wp_parse_args
– http://codex.wordpress.org/Function_Reference/get_option
– http://codex.wordpress.org/Function_Reference/apply_filters
– http://codex.wordpress.org/Function_Reference/add_filter
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 24 of 24