WordCamp Columbus 2013: Custom Layouts Without Using Page Templates
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

WordCamp Columbus 2013: Custom Layouts Without Using Page Templates

on

  • 9,458 views

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 ...

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.

Statistics

Views

Total Views
9,458
Views on SlideShare
9,422
Embed Views
36

Actions

Likes
0
Downloads
4
Comments
0

1 Embed 36

https://twitter.com 36

Accessibility

Categories

Upload Details

Uploaded via as OpenOffice

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

WordCamp Columbus 2013: Custom Layouts Without Using Page Templates Presentation Transcript

  • 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. 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. 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. 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. • 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. • 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. 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. 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. 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. 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. 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. 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. 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. 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. Feedback • Questions or comments? WordCamp Columbus 2013, 03 August 2013 Custom Layouts Without Using Page TemplatesPage 15 of 24
  • 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. 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. • 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. 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. 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. 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. 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. 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. 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