WordCamp Nashville 2013 - Custom Layouts Without Custom Page Templates

2,790 views

Published on

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

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
2,790
On SlideShare
0
From Embeds
0
Number of Embeds
128
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

WordCamp Nashville 2013 - Custom Layouts Without Custom Page Templates

  1. 1. Custom Layouts Without Using Page Templates Chip Bennett (@chip_bennett)WordCamp Nashville 2013, 20 April 2013 Page 1 of 15 Custom Layouts Without Using Page Templates
  2. 2. Overview • Whats the problem? o Custom Content, Custom Layouts o How to Have Both • Process o Define Post Custom Meta Data o Modify Template Files o Define CSS • Putting it into Practice o Twenty Twelve Child Theme • Out of Presentation Scope o Post Custom Meta ImplementationWordCamp Nashville 2013, 20 April 2013 Page 2 of 15 Custom Layouts Without Using Page Templates
  3. 3. Whats the Problem? • Purpose of Custom Page Templates o Custom content! o Archives o Linkroll o Sitemap o Contact form o Custom queries • Most Common use of Custom Page Templates o Layouts o Full Width o Different Sidebars o Etc.WordCamp Nashville 2013, 20 April 2013 Page 3 of 15 Custom Layouts Without Using Page Templates
  4. 4. Whats the Problem? • Custom Page Templates for both custom content and custom layout? o More templates? o Sitemap, o Sitemap Full-Width, o Sitemap Three-Column o Archives, o Archives Full-Width, o Archives Three-Column o Linkroll, o Linkroll Full-Width, o Linkroll Three-Column • See where this is going?WordCamp Nashville 2013, 20 April 2013 Page 4 of 15 Custom Layouts Without Using Page Templates
  5. 5. Alternative: Custom Post Meta Data • Benefits o Per-page o Regardless of Page Template o Page template itself is custom post meta data o _wp_page_template • Extra Benefits? o Can be made to work with (almost) any Theme o Via Child Theme, Some coding/CSS required o Expand to other post-types o Blog Posts, Attachments, Custom Post Types o Plugin-defined page templates o Expand/Dovetail with default layout optionsWordCamp Nashville 2013, 20 April 2013 Page 5 of 15 Custom Layouts Without Using Page Templates
  6. 6. Implementation • Define Layout Custom Post Meta Data o Default layout is two-column o Add a "Full Width" layout option • Modify Template According to Layout o Full Width layout removes the sidebar o Content takes up resultant space • Modify CSS According to Layout o Modify main-content width CSS ruleWordCamp Nashville 2013, 20 April 2013 Page 6 of 15 Custom Layouts Without Using Page Templates
  7. 7. Define Layout Custom Post Meta • Recommended Nomenclature: _themename_layout o Underscore: hide from custom fields UI o Namespacing: avoid conflicts, per-Theme • Reminder: o Custom Post Meta code is out of presentation scope o Working example will be providedWordCamp Nashville 2013, 20 April 2013 Page 7 of 15 Custom Layouts Without Using Page Templates
  8. 8. 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; } • Well use this in a couple places, so DRYWordCamp Nashville 2013, 20 April 2013 Page 8 of 15 Custom Layouts Without Using Page Templates
  9. 9. 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: lets just modify sidebar.phpWordCamp Nashville 2013, 20 April 2013 Page 9 of 15 Custom Layouts Without Using Page Templates
  10. 10. Modify the Template • Modifying sidebar.php o Before: <?php // Sidebar HTML Markup & PHP code ?> o After: <?php if ( full == themename_get_layout() ) { return; } // Sidebar HTML Markup & PHP code ?> • Adapt as neededWordCamp Nashville 2013, 20 April 2013 Page 10 of 15 Custom Layouts Without Using Page Templates
  11. 11. Modify CSS • Add Layout-Based Classes to <body> tag o 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 Nashville 2013, 20 April 2013 Page 11 of 15 Custom Layouts Without Using Page Templates
  12. 12. Practical Exercise: Twenty Twelve • Lets see an example • Add custom layouts to Twenty Twelve • Via Child Theme • Child Theme Files o style.css o functions.php o sidebar.phpWordCamp Nashville 2013, 20 April 2013 Page 12 of 15 Custom Layouts Without Using Page Templates
  13. 13. Twenty Twelve Live Example (Child Theme is available for download)WordCamp Nashville 2013, 20 April 2013 Page 13 of 15 Custom Layouts Without Using Page Templates
  14. 14. Links and Resources • Downloads o WCNash13 TwentyTwelve Child Theme o http://github.com/chipbennett/wcnash13-twentytwelve-child o Oenology Theme (advanced layout example) o http://github.com/chipbennett/oenology • Codex References o http://codex.wordpress.org/Pages#Page_Templates o http://codex.wordpress.org/Function_Reference/get_post_meta o http://codex.wordpress.org/Function_Reference/update_post_meta o http://codex.wordpress.org/Function_Reference/add_meta_box o http://codex.wordpress.org/Plugin_API/Filter_Reference/body_class • Presentation Slides o http://www.slideshare.net/chipbennettWordCamp Nashville 2013, 20 April 2013 Page 14 of 15 Custom Layouts Without Using Page Templates
  15. 15. Feedback • Questions or comments?WordCamp Nashville 2013, 20 April 2013 Page 15 of 15 Custom Layouts Without Using Page Templates

×