Wrangling the WordPress Template Hierarchy Like a Boss

Wrangling theWrangling the
WordPress Template HierarchyWordPress Template Hierarchy
Like a BossLike a Boss

Let's start from the top!Let's start from the top!
index.phpindex.php
The FreelancerThe Freelancer

What is the WordPress TemplateWhat is the WordPress Template
Hierarchy Anyway?Hierarchy Anyway?

A theme is made up of many template parts.

v

That work together to create the pages and posts
that are viewable by the site visitors.
v

index.phpindex.php

The Basic LoopThe Basic Loop
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>

We're Hiring!We're Hiring!
singular.phsingular.ph
pp

We're Hiring!We're Hiring!
singular.phsingular.ph
ppSince WP 4.3Since WP 4.3

Meet the new employees!Meet the new employees!

page.phppage.php

page.phppage.php
single.phpsingle.php

page.phppage.php
archive.phparchive.php

Wrangling the WordPress Template Hierarchy Like a Boss

single-book.phpsingle-book.php

archive-book.phparchive-book.php

The SpecialistsThe Specialists

front-page.phpfront-page.php

home.phphome.php

Template PartsTemplate Parts
header.phpheader.php

sidebar.phsidebar.ph
pp

footer.phpfooter.php
sidebar.phsidebar.ph
pp

<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// Post Content here
//
} // end while
} // end if
?>
Your Basic LoopYour Basic Loop

<div>
<p>Something awesome goes here</p>
</div>
<div>
<p>Something really awesome goes here</p>
</div>
Your Static HTMLYour Static HTML

Very VersatileVery Versatile
loop.phploop.php
funstuff.phpfunstuff.php
mailchimp.phpmailchimp.php
content.phpcontent.php

<?php get_template_part('$slug'); ?>
Call To ActionCall To Action

<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'template-parts/section-home-visit', 'section' ); ?>
<?php get_template_part( 'template-parts/section-home-book', 'section' ); ?>
<?php get_template_part( 'sidebar-home', 'sidebar' ); ?>
<?php endwhile; // End of the loop. ?>
</main>
</div>
<?php get_footer(); ?>
Parts Making the WholeParts Making the Whole

<div id="school-visit" class="section">
<div class="school-visit-text section-text">
<h2><?php the_field('school_visit_header'); ?></h2>
<p><?php the_field('school_section_text'); ?></p>
<p class="call-to-action"><span><a href="<?php
the_field('school_visit_button_page_link'); ?>"><?php the_field('school_visit_button_text'); ?
></a></span> <?php the_field('school_visit_after_button_text'); ?></p>
</div>
<?php $attachment_id = get_field('school_visit_image');
$size = "home-school-visit"; // (thumbnail, medium, large, full or custom size) ?>
<?php echo wp_get_attachment_image( $attachment_id, $size); ?>
</div>
One of the PartsOne of the Parts

Template Parts haveTemplate Parts have
a hierarchy too!a hierarchy too!
content-book.phpcontent-book.php
content.phcontent.ph
pp

Template Parts haveTemplate Parts have
a hierarchy too!a hierarchy too!
content-book.phpcontent-book.php
content.phcontent.ph
pp
loop.phploop.php
loop-book.phploop-book.php

Don't Get LostDon't Get Lost
in Yourin Your
TemplatesTemplates

Alicia St. RoseAlicia St. Rose
@IntrepidRealist@IntrepidRealist
Review this Session @:
http://wclax.reviews

Wrangling the WordPress Template Hierarchy Like a Boss

More Related Content

Viewers also liked (15)

Similar to Wrangling the WordPress Template Hierarchy Like a Boss (20)

Recently uploaded (20)

Wrangling the WordPress Template Hierarchy Like a Boss

Editor's Notes