Custom Layouts Without Using Page Templates
Chip Bennett (@chip_bennett)
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 1 of 15
Overview
What's the problem?
Custom Content, Custom Layouts
How to Have Both
ProcessDefine Post Custom Meta Data
Modify Template Files
Define CSS
Putting it into PracticeTwenty Twelve Child Theme
Out of Presentation ScopePost Custom Meta Implementation
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 2 of 15
What's the Problem?
Purpose of Custom Page Templates
Custom content!
Archives
Linkroll
Sitemap
Contact form
Custom queries
Most Common use of Custom Page TemplatesLayouts
Full Width
Different Sidebars
Etc.
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 3 of 15
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 Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 4 of 15
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 Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 5 of 15
Alternative: Custom Post Meta Data
Implementation
Define Layout Custom Post Meta Data
Default layout is two-column
Add a "Full Width" layout option
Modify Template According to LayoutFull Width layout removes the sidebar
Content takes up resultant space
Modify CSS According to LayoutModify main-content width CSS rule
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 6 of 15
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 Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 7 of 15
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 2013Custom Layouts Without Using Page TemplatesPage 8 of 15
Modify the Template
Typical template file:
index.php, archive.php, etc.
Child Theme: let's just modify sidebar.php
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 9 of 15
Modify the Template
Modifying sidebar.php
Before:
After:
Adapt as needed
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 10 of 15
Modify CSS
Add Layout-Based Classes to 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:
Child Theme: add layout-based CSS rules:
body.layout-full #content {
width: 100%;
}
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 11 of 15
Let's see an example
Add custom layouts to Twenty Twelve
Via Child Theme
Child Theme Files
style.css
functions.php
sidebar.php
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 12 of 15
Practical Exercise: Twenty Twelve
Twenty Twelve Live Example
(Child Theme is available for download)
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 13 of 15
Links and Resources
Downloads
WCNash13 TwentyTwelve Child Theme
http://github.com/chipbennett/wcnash13-twentytwelve-child
Oenology Theme (advanced layout example)
http://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 Slideshttp://www.slideshare.net/chipbennett
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 14 of 15
Feedback
Questions or comments?
WordCamp Nashville 2013, 20 April 2013Custom Layouts Without Using Page TemplatesPage 15 of 15
Click to edit the title text format
Click to edit the title text format
Click to edit the outline text formatSecond Outline LevelThird Outline LevelFourth Outline LevelFifth Outline LevelSixth Outline LevelSeventh Outline Level
Top Related