�ݺ�ߣ

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

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

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.

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?

• 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
Alternative: Custom Post Meta Data

• Let's see an example
• Add custom layouts to Twenty Twelve
• Via Child Theme
• Child Theme Files
– style.css
– functions.php
– sidebar.php
Practical Exercise: Twenty Twelve

Twenty Twelve Live
Example
(Child Theme is available for download)

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

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

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:
<?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

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

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%;
}

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 �ݺ�ߣs
– http://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

• 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)
Alternative: Sane Defaults

Implementation
• Define option defaults as an array
– Wrap in a custom function
– PROTIP: add a custom filter
• Parse option defaults array with get_option()
• 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, Extensible
– 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:
<?php
global $themename_options;
$themename_options =
get_option( 'theme_themename_options' );
?>
– After:
<?php
global $themename_options;
$themename_options = themename_get_options();
?>
• Adapt as needed

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'
);

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: Custom Layouts Without Using Page Templates

More Related Content

WordCamp Columbus 2013: Custom Layouts Without Using Page Templates