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