Towards an Alternate WordPress Theme Structure

Towards an Alternate Theme
Structure?
Graham Armfield
Web Accessibility Consultant
WordPress Developer

graham.armfield@coolfields.co.uk
@coolfields

Coolfields Consulting

www.coolfields.co.uk
@coolfields

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

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

A typical page structure
Banner
Navigation
Content

Sidebar

Footer
4

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

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

index.php
<?php get_template_part( ‘layout' );?>

7

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

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

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

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

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

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

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

Thanks for listening
please let me know what you think
graham.armfield@coolfields.co.uk
@coolfields

15

Towards an Alternate WordPress Theme Structure

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie Towards an Alternate WordPress Theme Structure

Ähnlich wie Towards an Alternate WordPress Theme Structure (20)

Mehr von Graham Armfield

Mehr von Graham Armfield (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Towards an Alternate WordPress Theme Structure