wordcamp columbus 2013: custom layouts without using page templates

Custom Layouts Without Using Page Templates

Chip Bennett (@chip_bennett)

WordCamp Columbus 2013, 03 August 2013Custom Layouts Without Using Page TemplatesPage 1 of 24

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


What's the Problem?

Purpose of Custom Page TemplatesCustom content!Archives

Linkroll

Sitemap

Contact form

Custom queries

Most Common use of Custom Page TemplatesLayouts

Full Width

Different Sidebars

Etc.


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?


BenefitsPer-page

Regardless of Page TemplatePage 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-typesBlog Posts, Attachments, Custom Post Types

Plugin-defined page templates

Expand/Dovetail with default layout options

WordCamp Columbus 2013, 03 August 2013Custom Layouts Without Using Page TemplatesPage 5 of 24Alternative: Custom Post Meta Data

Let's see an example

Add custom layouts to Twenty Twelve

Via Child Theme

Child Theme Filesstyle.css

functions.php

sidebar.php

WordCamp Columbus 2013, 03 August 2013Custom Layouts Without Using Page TemplatesPage 6 of 24Practical Exercise: Twenty Twelve

Twenty Twelve Live Example

(Child Theme is available for download)


Implementation

Define Layout Custom Post Meta DataDefault 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


Define Layout Custom Post Meta

Recommended Nomenclature:_themename_layoutUnderscore: 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


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


Modify the Template

Typical template file:

index.php, archive.php, etc.

Child Theme: let's just modify sidebar.php


Modify the Template

Modifying sidebar.phpBefore:

After:

Adapt as needed


Modify CSS

Add Layout-Based Classes to tagUse 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%;
}


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 Slideshttp://www.slideshare.net/chipbennett


Feedback

Questions or comments?


Bonus Presentation:

Default Theme Options: You're (probably) _doing_it_wrong()

Chip Bennett (@chip_bennett)


What's the Problem?

Unnecessary wp_options DB entries

Poor UX

Out-of-the-box Theme output broken

Difficult to add new options


BenefitsNo 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 2013Custom Layouts Without Using Page TemplatesPage 18 of 24Alternative: Sane Defaults

Implementation

Define option defaults as an arrayWrap 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


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, ExtensibleWrap in a custom function

PROTIP: add a custom filter
return apply_filters( 'themename_option_defaults', $defaults );


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()


Call Custom Function in Template

Call custom function instead of get_option()Before:

After:

Adapt as needed


Profit

Theme works out-of-the-boxNo options DB entry? No problem!

Theme activation? Ain't nobody got time fo' that!

WPORG preview? Knows default options!

Change/Add DefaultsModify themename_get_option_defaults()

Bonus: WPORG will show the updated defaults

Child Theme change/add defaultsadd_filter(
'themename_option_defaults',
'childtheme_function'
);


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


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

wordcamp columbus 2013: custom layouts without using page templates

Technology