ustom 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.

1. Custom Layouts Without
Using Page Templates
Chip Bennett (@chip_bennett)
WordCamp Nashville 2013, 20 April 2013 Page 1 of 15 Custom Layouts Without Using Page Templates

2. Overview
• What's the problem?
o Custom Content, Custom Layouts
o How to Have Both
• Process
o Define Post Custom Meta Data
o Modify Template Files
o Define CSS
• Putting it into Practice
o Twenty Twelve Child Theme
• Out of Presentation Scope
o Post Custom Meta Implementation
WordCamp Nashville 2013, 20 April 2013 Page 2 of 15 Custom Layouts Without Using Page Templates

3. What's the Problem?
• Purpose of Custom Page Templates
o Custom content!
o Archives
o Linkroll
o Sitemap
o Contact form
o Custom queries
• Most Common use of Custom Page Templates
o Layouts
o Full Width
o Different Sidebars
o Etc.
WordCamp Nashville 2013, 20 April 2013 Page 3 of 15 Custom Layouts Without Using Page Templates

4. What's the Problem?
• Custom Page Templates for both custom content and custom
layout?
o More templates?
o Sitemap,
o Sitemap Full-Width,
o Sitemap Three-Column
o Archives,
o Archives Full-Width,
o Archives Three-Column
o Linkroll,
o Linkroll Full-Width,
o Linkroll Three-Column
• See where this is going?
WordCamp Nashville 2013, 20 April 2013 Page 4 of 15 Custom Layouts Without Using Page Templates

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

6. Implementation
• Define Layout Custom Post Meta Data
o Default layout is two-column
o Add a "Full Width" layout option
• Modify Template According to Layout
o Full Width layout removes the sidebar
o Content takes up resultant space
• Modify CSS According to Layout
o Modify main-content width CSS rule
WordCamp Nashville 2013, 20 April 2013 Page 6 of 15 Custom Layouts Without Using Page Templates

7. Define Layout Custom Post Meta
• Recommended Nomenclature:
_themename_layout
o Underscore: hide from custom fields UI
o Namespacing: avoid conflicts, per-Theme
• Reminder:
o Custom Post Meta code is out of presentation scope
o Working example will be provided
WordCamp Nashville 2013, 20 April 2013 Page 7 of 15 Custom Layouts Without Using Page Templates

8. 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 Nashville 2013, 20 April 2013 Page 8 of 15 Custom Layouts Without Using Page Templates

9. 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 Nashville 2013, 20 April 2013 Page 9 of 15 Custom Layouts Without Using Page Templates

10. Modify the Template
• Modifying sidebar.php
o Before:
<?php
// Sidebar HTML Markup & PHP code
?>
o After:
<?php
if ( 'full' == themename_get_layout() ) {
return;
}
// Sidebar HTML Markup & PHP code
?>
• Adapt as needed
WordCamp Nashville 2013, 20 April 2013 Page 10 of 15 Custom Layouts Without Using Page Templates

11. Modify CSS
• Add Layout-Based Classes to <body> tag
o 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 Nashville 2013, 20 April 2013 Page 11 of 15 Custom Layouts Without Using Page Templates

12. Practical Exercise: Twenty Twelve
• Let's see an example
• Add custom layouts to Twenty Twelve
• Via Child Theme
• Child Theme Files
o style.css
o functions.php
o sidebar.php
WordCamp Nashville 2013, 20 April 2013 Page 12 of 15 Custom Layouts Without Using Page Templates

13. Twenty Twelve Live
Example
(Child Theme is available for download)
WordCamp Nashville 2013, 20 April 2013 Page 13 of 15 Custom Layouts Without Using Page Templates

14. Links and Resources
• Downloads
o WCNash13 TwentyTwelve Child Theme
o http://github.com/chipbennett/wcnash13-twentytwelve-child
o Oenology Theme (advanced layout example)
o http://github.com/chipbennett/oenology
• Codex References
o http://codex.wordpress.org/Pages#Page_Templates
o http://codex.wordpress.org/Function_Reference/get_post_meta
o http://codex.wordpress.org/Function_Reference/update_post_meta
o http://codex.wordpress.org/Function_Reference/add_meta_box
o http://codex.wordpress.org/Plugin_API/Filter_Reference/body_class
• Presentation Slides
o http://www.slideshare.net/chipbennett
WordCamp Nashville 2013, 20 April 2013 Page 14 of 15 Custom Layouts Without Using Page Templates

15. Feedback
• Questions or comments?
WordCamp Nashville 2013, 20 April 2013 Page 15 of 15 Custom Layouts Without Using Page Templates