Towards an Alternate WordPress Theme Structure


Published on

Slides from a lightning talk given to WordPress London Meetup group on 15th October 2013.

I presented an idea for an alternative theme structure which could solve some of the problems that I've found when trying to create child themes.

The idea revolves around having one file in your theme that is responsible for specifying the page structure for the theme. All structural HTML could then be removed from the other theme files - making it more likely they can be reused without amendment.

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Towards an Alternate WordPress Theme Structure

  1. 1. Towards an Alternate Theme Structure? Graham Armfield Web Accessibility Consultant WordPress Developer @coolfields Coolfields Consulting @coolfields
  2. 2. What I’m going to cover An idea to make it easier to reuse themes for another project, and potentially to allow for easier child theming. • It’s just an idea • Might be useful • Looking for feedback 2
  3. 3. Perils of child theming - structure archive.php and category.php <section id="primary" class="site-content"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> … index.php and page.php <div id="primary" class="site-content"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> … Structural HTML 3
  4. 4. A typical page structure Banner Navigation Content Sidebar Footer 4
  5. 5. In simple HTML <html> <head> Meta tags, CSS, scripts </head> <body> <div id=”banner”> Logos etc </div> <div id=”navigation”> Navigation </div> <div id=”content”> Content </div> <div id=”sidebar”> Widgets etc</div> <div id=”footer”> Footer </div> </body> </html> 5
  6. 6. Introducing layout.php <html> <?php get_header(); ?> <body> <div id=”banner”> <?php get_template_part( 'banner' );?> </div> <div id=”navigation”> <?php get_template_part( ‘navigation' );?> </div> <div id=”content”> <?php get_template_part( ‘content' );?> </div> <?php get_sidebar(); ?> <?php get_footer(); ?> </body> </html> 6
  7. 7. index.php <?php get_template_part( ‘layout' );?> 7
  8. 8. Other changes header.php • Just meta tags, scripts and CSS • Still need wp_head() banner.php • Just the code/function required for the banner navigation.php • Just the code/functions required for navigation Etc 8
  9. 9. content.php <? php if (have_posts()) : while (have_posts()) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?> <?php else : ?> <h2>Not Found</h2> <?php endif; ?> Note: no structural HTML 9
  10. 10. Different types of content In layout.php if (is_front_page()) { get_template_part( 'content','front' ); } elseif(is_home()) { get_template_part( 'content','bloglist' ); } elseif(is_single()) { get_template_part( 'content','single' ); } else { get_template_part( 'content' ); } 10
  11. 11. Different types of content Then you could have separate files – • content.php – for pages • content-front.php – for the front page • content-bloglist.php – for blog index • content-single.php – for individual blog posts 11
  12. 12. Advantages • Structure of theme template only described once – layout.php • To change the layout of the theme, just change layout.php • Each file is completely self-contained – no starting a div in the header.php and ending it in the footer.php • A new child theme may only need a new banner.php and a style.css – all the other files could be the same 12
  13. 13. Things to watch for Scope of variables • Problem: variable set in layout.php not readily available in banner.php, content.php, etc • Solution: create setter and getter functions for variables 13
  14. 14. Also can work with: Custom page templates 1) set template name in template file setTemplateName(‘mytemplate’); get_template_part(‘layout’); 2) test on template name in layout.php get_template_part('content', getTemplateName()); Custom post types get_template_part('content', get_post_format()); 14
  15. 15. Thanks for listening please let me know what you think @coolfields 15