WordCamp Columbus 2013: Custom Layouts Without Using Page Templates

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Custom Layouts Without
Using Page Templates
Chip Bennett (@chip_bennett)
WordCamp Columbus 2013, 03 August 2013 Custom Lay...

Overview
• What's the problem?
– Custom Content, Custom Layouts
– How to Have Both
• Process
– Define Post Custom Meta Dat...

What's the Problem?
• Purpose of Custom Page Templates
– Custom content!
●
Archives
●
Linkroll
●
Sitemap
●
Contact form
●
...

What's the Problem?
• Custom Page Templates for both custom
content and custom layout?
– More templates?
●
Sitemap, Sitema...

• Benefits
– Per-page
– Regardless of Page Template
● Page template itself is custom post meta data
● _wp_page_template
• ...

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

Twenty Twelve Live
Example
(Child Theme is available for download)
WordCamp Columbus 2013, 03 August 2013 Custom Layouts W...

Implementation
• Define Layout Custom Post Meta Data
– Default layout is two-column
– Add a "Full Width" layout option
• M...

Define Layout Custom Post Meta
• Recommended Nomenclature:
– _themename_layout
●
Underscore: hide from custom fields UI
●
...

$Custom Function to Get Layout • Define a function to get the current layout function themename_get_layout() { $layout = 'd...$

Modify the Template
• Typical template file:
<?php
// Header
get_header();
// Loop
get_template_part( 'loop' );
// Sidebar...

Modify the Template
• Modifying sidebar.php
– Before:
<?php
// Sidebar HTML Markup & PHP code
?>
– After:
<?php
if ( 'full...

Modify CSS
• Add Layout-Based Classes to <body> tag
– Use body_class filter:
function themename_filter_body_class( $classe...

Links and Resources
• Downloads
– WCCbus13 TwentyTwelve Child Theme
https://github.com/chipbennett/wccbus13-twentytwelve-c...

Feedback
• Questions or comments?
WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 1...

Bonus Presentation:
Default Theme Options: You're
(probably) _doing_it_wrong()
Chip Bennett (@chip_bennett)
WordCamp Colum...

What's the Problem?
• Unnecessary wp_options DB entries
• Poor UX
• Out-of-the-box Theme output broken
• Difficult to add ...

• Benefits
– No DB entries required
– No Theme activation redirects
– Theme works out of the box
– Easy to add new options...

Implementation
• Define option defaults as an array
– Wrap in a custom function
– PROTIP: add a custom filter
• Parse opti...

$Define Option Defaults as an Array • Define option defaults as an array function themename_get_option_defaults() { $defaul...$

$Parse defaults with get_option() • Wrap in a custom function function themename_get_options() { $defaults = themename_get_...$

Call Custom Function in Template
• Call custom function instead of get_option()
– Before:
<?php
global $themename_options;...

Profit
• Theme works out-of-the-box
– No options DB entry? No problem!
– Theme activation? Ain't nobody got time fo' that!...

Links and Resources
• Codex References
– http://codex.wordpress.org/Function_Reference/wp_parse_args
– http://codex.wordpr...