The WordPress Template Hierarchy

Understanding how the WordPress Template Hierarchy works is the first step into a larger world. Building your own page in php and getting it to display properly is really important to making a site your own. This article assumes you know a bit about php (or at least another programming language) and HTML.

A brief peek at how WordPress + php actually work

Because WordPress builds HTML programmatically and everything in WordPress is a post, they all follow the same types of rules. Here’s a really high-level view of how WordPress builds pages.A website usually has 3 elements: a Header, a Footer, and some Content. Generally, the Header and Footer don’t change (except for some cosmetic stuff). In HTML, you’d have to copy-and-paste that code for every page, but that breaks rule number 1 of the internet: Don’t Repeat Yourself (DRY).So, here’s how a WordPress Developer (and WordPress) work together to be DRY.

<?php get_header(); ?>
  <h1>The Page Title!</h1>
  <article>The Page Content!</article>
<?php get_footer(); ?>

As you can see, PHP exists alongside HTML. The WordPress functions get_header(); and get_footer(); call in 2 separate php files called header.php and footer.php . So if a developer wanted to update the site’s header, they’d just have to update 1 file instead of going through the (potentially) thousands of files for a robust website and updating the header code.The code block above might found in a file called index.php . WordPress was built by many smart cookies, so when we build pages (like our custom Church/Candidate pages), we can give it a separate layout.

Hey! We offer staffing services for churches looking to fill roles, and we display them right here on our site. Interested and want to learn more? Head to kingdomone.co/staffing or fill out our short form to get connected with one our teammates!

WordPress Template Hierarchies (for realsies)

Ok, so since everything is a post, how does WordPress know when differentiate between different post types? We build special files (like Singles and Archives) to display types of content! In php, the files might look like single.php and archive.php , but they might be even more specific, like single-candidate.php and single-church.php ! If we built a custom post type called “Camps” but didn’t also build a special php file called single-camps.php , WordPress would default to single.php and this is what the WordPress Template Hierarchy is. This is why Custom Post Types & the Layout Builder is so dang powerful, but you need to understand a bit about how WordPress actually works to understand it’s true power. Similarly, the archive.php follows the same idea, but the code block looks a bit different. As an example (please note—this is fake code and totally wouldn’t work), here’s what the archive pages do.

<?php get_header(); ?>
<h1> Archive Page Title</h1>
<?php do the famous WordPress Loop  to get all the posts ?>
<section>
  <article>
    <h2>Post #1 Title</h2>
    <span>Post #1 Excerpt</span>
  </article>
  <article>
    <h2>Post #2 Title</h2>
    <span>Post #2 Excerpt</span>
  </article>
</section>
<?php get_footer(); ?>

Putting it All Together

Cornerstone’s Layout Builder will work for any post type’s single or archive. It’s kind of like building your own special single.php and archive.php files, but without writing any code! (Unless you want to, of course). That means you can style every instance of of a post type with just one look. INCREDIBLE. That reduces your workload, and gives people a more standard UX to learn, navigate and expect. That’s a win-win if I’ve ever seen one!

There are currently no comments. Why don't you kick things off?

Leave a Reply