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...
Upcoming SlideShare
Loading in …5
×

WordCamp Columbus 2013: Custom Layouts Without Using Page Templates

9,729 views
9,647 views

Published on

Custom Layouts Without Using Page Templates Often, Themes use custom page templates to add layout options for static pages; but custom page templates are actually intended to be used for custom content, rather than for custom layouts. And by using custom page templates to define custom layouts, custom layouts are limited to static pages. Single blog posts don’t feel the love. This session will show you how to use custom post meta data and the body_class filter to define custom layouts for both static pages and single blog posts. As a bonus, this session will show you how to use custom post metaboxes, rather than forcing users to deal with custom fields.

Features a bonus presentation on the proper way to declare and use default values for Theme options.

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
9,729
On SlideShare
0
From Embeds
0
Number of Embeds
54
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordCamp Columbus 2013: Custom Layouts Without Using Page Templates

  1. 1. 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
  2. 2. 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 WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 2 of 24
  3. 3. 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. WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 3 of 24
  4. 4. 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 Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 4 of 24
  5. 5. • 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 Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 5 of 24 Alternative: Custom Post Meta Data
  6. 6. • Let's see an example • Add custom layouts to Twenty Twelve • Via Child Theme • Child Theme Files – style.css – functions.php – sidebar.php WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 6 of 24 Practical Exercise: Twenty Twelve
  7. 7. Twenty Twelve Live Example (Child Theme is available for download) WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 7 of 24
  8. 8. 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 WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 8 of 24
  9. 9. 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 Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 9 of 24
  10. 10. 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 Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 10 of 24
  11. 11. 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 WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 11 of 24
  12. 12. 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 WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 12 of 24
  13. 13. 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%; } WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 13 of 24
  14. 14. 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 Slides – http://www.slideshare.net/chipbennett WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 14 of 24
  15. 15. Feedback • Questions or comments? WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 15 of 24
  16. 16. Bonus Presentation: Default Theme Options: You're (probably) _doing_it_wrong() Chip Bennett (@chip_bennett) WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 16 of 24
  17. 17. What's the Problem? • Unnecessary wp_options DB entries • Poor UX • Out-of-the-box Theme output broken • Difficult to add new options WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 17 of 24
  18. 18. • 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) WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 18 of 24 Alternative: Sane Defaults
  19. 19. Implementation • Define option defaults as an array – Wrap 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 WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 19 of 24
  20. 20. 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 – Wrap in a custom function – PROTIP: add a custom filter return apply_filters( 'themename_option_defaults', $defaults ); WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 20 of 24
  21. 21. 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() WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 21 of 24
  22. 22. 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 WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 22 of 24
  23. 23. 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' ); WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 23 of 24
  24. 24. 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, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 24 of 24

×