Traversing the Template Hierarchy in Designland

Who am I

Dustin Leer

I started as a designer. I currently work primarily as a front end developer for Synapse Marketing Solutions in Lancaster, PA.

Today’s talk will cover...

Some WordPress Basics

Child Theme?

A Child Theme allows you to change aspects of your site’s appearance yet still preserve your theme’s look and functionality.

Some WordPress Basics

Template?

A Template in WordPress is a PHP file that determines how content is displayed.

How can we leverage child themes?

Theme Handbook

• developer.wordpress.org/themes/advanced-topics/child-themes

Template Hierarchy

• wphierarchy.com
• developer.wordpress.org/themes/basics/template-hierarchy

How can we leverage templates?

I have some examples!

The Examples!

Examples.md

'style.css' - Controls the setup
              of a child theme

'page.php' - Controls how single
             pages are displayed

'single.php' - Controls how single blog 
               posts are displayed

'archive.php' - Controls how archive pages 
                are displayed

'category.php' - Controls category 
                 archive pages

WordPress' Fallback Architecture?

Here's how can we use this!

Let's talk child themes!

/*------------------------------------------------------
    Theme Name: Storey Child
    Theme URI: http://www.themezilla.com
    Author: Dustin Leer
    Author URI: http://www.dustinleer.com
    Description: Child theme for Dustin Leer.
    Version: 1.1
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Text Domain: zilla
    Domain Path: /languages/
    Template: storey
------------------------------------------------------*/

style.css

Now let's talk templates!

 <?php /* Template Name: Full Width (No Sidebar) */ ?>

 <?php get_header(); ?>

   <div id="content">

     <div id="inner-content" class="row">

       <main id="main" class="large-12 medium-12 columns" role="main">

         <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

           <!-- Here is our loop -->
           <?php get_template_part( 'parts/loop', 'page' ); ?>

         <?php endwhile; endif; ?>

       </main> <!-- end #main -->

     </div> <!-- end #inner-content -->

   </div> <!-- end #content -->

 <?php get_footer(); ?>

full-width.php

Oh right we had a sidebar template didn't we? 🤣 🤣 🤣

  <?php /* Template Name: Sidebar Custom */ ?>

  <?php get_header(); ?>

    <div id="content">

      <div id="inner-content" class="row">

          <main id="main" class="large-8 medium-8 columns" role="main">

          <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

              <!-- Here is our loop -->
              <?php get_template_part( 'parts/loop', 'page' ); ?>

            <?php endwhile; endif; ?>

        </main> <!-- end #main -->

        <!-- This is our sidebar, but where's the html??? -->
        <?php get_template_part( 'parts/sidebar.php' ); ?>

      </div> <!-- end #inner-content -->

    </div> <!-- end #content -->

  <?php get_footer(); ?>

sidebar-custom.php

 
  <!-- This is our sidebar, but where's the html??? -->
  <?php get_template_part( 'parts/sidebar.php' ); ?>

This is our sidebar call?!?!

WAT?

 
  <!-- This is our sidebar, but where's the html??? -->
  <?php get_template_part( 'parts/sidebar.php' ); ?>

Let's talk about this more.

With a real life example.

<?php /* The template for displaying all single posts. */

get_header(); ?>

<?php if( get_template_part('parts/hero_single') ): ?>
  <?php get_template_part( 'parts/hero_single' ); ?>
<?php endif; ?>

  <section class="page_content"> ...
  </section>

<?php if( get_template_part('parts/recent-posts-extended') ): ?>
  <?php get_template_part( 'parts/recent-posts-extended' ); ?>
<?php endif; ?>

<?php get_footer(); ?>

single.php

FOLDERS

     our-theme

        img

        inc

        js

        languages

        layouts

        scss

        parts

        templates

        404.php

        archive.php

        comments.php

Ok...

Template parts?

Styles, templates, and template partials, OH MY!

Superpowers in the form of php, html and css!

header-custom.php

footer-custom.php

sidebar-custom.php

How can you get started?

1. Please don't call yourself a 'Ninja', unless you're actually a ninja!
2. Leverage plugins like ACF or CMB2 to create custom metaboxes and fields for custom content.
3. You can also leverage the loop and custom post types!
4. Take notes, read tutorials, go to other talks, give a talk, be involved!

Thank you.

Dustin Leer

You can find me at dustinleer.com

@leerdustin

@leerdustin

dustinleer

Questions or Comments?