Wrangling the WordPress Template Hierarchy Like a Boss

Wrangling the WordPress Template Hierarchy Like a Boss

How Many have heard of it?

Let's start from the top!

index.php

The Freelancer

You won't even see your site if this file isn't present!

Every post, page and custom post type answers to it, unless there are some other staff members taking care of things down the pipeline.

The index.php is the ultimate freelancer. Wearing many hats. But, in most themes the hat is pretty much the same.

Just a basic loop, so all pages, posts and post types look exactly the same. Boring...

What is the WordPress Template Hierarchy Anyway?

How many have heard of it?


How many have found this image and gotten more confused after that visit?

This wonderfully, interaction resource can found at: http://wphierarchy.com/

But it takes some explainin if your not familiar with it.This is going to be my attempt at demystification.


A theme is made up of many template parts.

In most cases, a theme is made up of many different templates and template parts



v



That work together to create the pages and poststhat are viewable by the site visitors.

vThat work together to create complete pages, posts and attachments that are viewable on the WWW.


While, to some, this looks like a foreign mass of confusion, it is readily understood by WordPress.

3. Behind the scenes in the boardroom, WordPress and your theme have teamed up and created naming conventions which they vow to uphold.

4. Because everyone is on the same page, its a piece of cake for WordPress to find the right template at the right time.

Query Power!

It does this through the magic of Query Power, not Curry Powder, Query Power!

We dont have to go into detail about this super power, the WordPress Codex has ample discussion so your eyes can glaze over later. Just know that WordPress is kindly waiting to deliver on any and all of your template files as long as youve named appropriately.



index.php

You may have noticed this file in your theme. Is the ultimate sole proprietor.

Every post, page, archive, comments list, custom post type etc. answers to it. Unless there are other staff members taking care of things down the pipeline, all the content in your site will be delivered a la index.phps layout.


index.php

The Freelancer

You won't even see your site if this file isn't present!

Every post, page and custom post type answers to it, unless there are some other staff members taking care of things down the pipeline.

The index.php is the ultimate freelancer. Wearing many hats. But, in most themes the hat is pretty much the same.

Just a basic loop, so all pages, posts and post types look exactly the same. Boring...

The Basic Loop

In some cases the index.php contains just a basic loop, so all pages, posts, custom post types, everything! look exactly the same. Boring

There are ways to spice up this file, diversify, so to speak: you can fill it with tons of conditional loops depending on what type of page your site is dishing up at the moment.

But theres a better way. Hire some staff, ie, additional, more specific template files, let them take care of some of those loops and layouts.

index.php

Eventually, youll want your index.php to work only part time, maybe even go on an early retirement. Because youll have a whole team of templates taking care of the specific tasks that used to wear old index.php out.

We're Hiring!

1. Lets start by interviewing some prospects.

We're Hiring!

singular.php

This is a new position that was created in WordPress 4.3+

When you hire singular.php, her job is to display content on all of your posts, custom post types and pages. She doesnt do comments, or archives nor God forbid the authors pages. The loops and code you task her with will be displayed the same on your static pages and your blog posts, and those cool custom post types you just made.

We're Hiring!

singular.php

We're Hiring!

singular.php

Since WP 4.3

Meet the new employees!

Looks like weve got to hire a couple more temps, ha, templates.

Lets have singular.php delegate her work to page.php and single.php.


page.php

Of course page.php will handle everything that shows up on the static pages.


page.php


page.php

single.php


page.php

single.php

And single.php? Perhaps you were expecting it to be called post.php? Well, its not. single.php is more appropriate because it displays the single page view of a post or custom post type as opposed to its archive.


page.php

single.php

archive.php

As long as were mentioning the archive lets go ahead and add archive.php to the staff. Man is he necessary! archive.php will busy himself dishing out blog posts and custom post types in a list format with featured images and excerpts? Otherwise, index.php was still going to have to handle that.


page.php

single.php

archive.php

So now weve got a pretty solid team! Theyre working hard pumping out pages, posts, categories and taxonomy archives.

Maybe its time for a promotion? More money, less work. Am I right? If you are smart enough to pull that off, you deserve every penny!

So Maybe some of the tasks that these temps are doing can be managed by others, more efficiently and more specifically.


single.php

Lets look at single.php, for example. Do we really want our blog post and custom post types to look the same. We probably want to ixnay comments on the custom post types, eh?

Lets say our theme is for a popular children and young adult author, Bruce Hale, for example. We have a custom post type for Books. Because hes written a lot of books!

We need a template on staff that is going to work hard to display his individual books in an appealing way, not like a common blog post.

Well, we found the right guy for the job: single-book.php

single-book.php

He only cares about the single book view. Once he clocks in, he takes the reigns from single.php and diligently works at displaying the unique book layout without unsightlies like comments or post meta .

single-book.php

He only cares about the single book view. Once he clocks in, he takes the reigns from single.php and diligently works at displaying the unique book layout without unsightlies like comments or post meta .

Of course, since, as mentioned before, Bruce has written a lot of books, we probably want to hire a new temp to take care of the book archive.

archive-book.php

The perfect qualified candidate showed up: archive-book.php

archive-book.php

Her job is to focus on the list of all of Bruces books and display them in a way more fitting of literature.

The Team

Now you could get by with this team for just about any theme. And a quick look at the hierarchical chart is a bit easier to grasp.

Remember Bruce's homepage? It has a specific layout that's different than all of the other static pages. It would be nice if it stayed that way.

The Specialists

Specialists that can come in. Dont have to use them all the time, but they come in handy:

The Specialists

front-page.php

front-page.php Like a gate keeper to the homepage of the website.

The Specialists

front-page.php

It doesnt matter what layout template gets turned on in the Admin, front-page.php will not let it slip past. As long as hes on the staff, thats what your going to see.

The Specialists

home.php

home.php can be a bit confusing. Youd think it was the Home Page aka Front Page of the website. Its not, weve already got front-page.php working on that.

The Specialists

home.php

So what does home.php do? She provides the home to the listing of your blog posts. Once home.php shows up, archive.php can hand off the blog list task to her!

Template Parts

Remember way back when I sort of poo poo'd the idea of stuffing a bunch of conditionals into the index.php or any file, for that matter?

Well, under the right circumstances, conditionals work quite well! Primarily when dealing with template parts

Template parts are files that usually don't deliver full pages and posts, but rather suppliment or enhance them.

Template Parts

header.php

The most famous are:

header.php which delivers the header on every page of your site

Template Parts

header.php

sidebar.php

sidebar.php which delivers the sidebar to your pages and posts

Template Parts

footer.php

header.php

sidebar.php

And footer.php which contains the footer info visible on every page of your site.

A rule of thumb to follow:

The code in full templates can display full page or post on your site.

A template part cannot be displayed outside of a post or page. In other, words they don't stand alone

Your Basic Loop

You can create any type of Template part. The can contain loops

Something awesome goes here

Something really awesome goes here

Your Static HTML

HTML

Very Versatile

loop.php

funstuff.php

mailchimp.php

content.php

You can name them anything as long as it's relevant to and the function of the template part.

Call To Action

You can add the template part to anything

Back to Bruce's home page. Remember it had a specific layout on a template called front-page.php?

Parts Making the Whole

Here's the simple code of the front-page.php calling the distinctive parts of the page which are in template parts

Technology

Wrangling the WordPress Template Hierarchy Like a Boss