3.3. The WordPress Hierarchy And The Loop

WordPress works thanks to a pretty thing called “the loop”, which is a function that says, “if there are posts, show me something; if not, do something else.”

What is it going to show? The templates, and it’s going to do so by following a path called “The WordPress Hierarchy.”

The WordPress Hierarchy is listed at WordPress, and it basically works like this: for every kind of page a website is to display (single post, archives pages, the “404” error pages, etc) WordPress is going to look for a template following a path. You may want to check it out before continuing with this lesson, or give it a shot and try to understand it with the following two examples.

If There Are Posts, The Template for Single Posts

When someone enters our website to see a “single post”, WordPress will put in motion its hierarchy to search for a template to display that single post; and it’s going to follow this path:

  1. single-{post-type}-{slug}.php. For example, if post type is product and the post slug is dmc-12, WordPress would look for single-product-dmc-12.php. We don’t have templates with ids in our theme.
  2. single-{post-type}.php. If the post type is product, WordPress would look for single-product.php. We don’t have this one either.
  3. single.php. Also not in the Twenty Twenty theme
  4. singular.php… Yes, we’ve got this one!
  5. index.php

If we open the file singular.php with Sublime Text, we’re going to see two things:

  1. The four main elements we discovered the theme has:
    1. at line 12, the header,
    2. at line 15, the main area,
    3. at line 32, the navigation and widget area,
    4. and at line 34, the footer
  2. Inside main, the loop (at line 19) saying: if there are posts, get the file from the folder template-parts that’s named content.php (and see if the blogger has created a “post” or a “page”)

Easy, right?

If There Are No Posts, The “Not Found” Template

The loop we saw, doesn’t say what would happen if there are no posts, and that’s because it’s not necessary. Why? Because we’ve got a template for that terrible occasion in our theme πŸ™ƒ.

According to the WordPress hierarchy, if there are no posts, the path to follow is this one:

  1. 404.php, we got it!
  2. index.php

“404” is the “Not Found” template, and we’ve got it in our Twenty Twenty Theme. If we open it, we’ll see:

  • at line 17, the title this page is going to have: “Page Not Found”
  • at line 19, the text saying nothing has been found

That second element mentioned, the div with the class intro-text, is one that we always want to change. We cannot do it with CSS; but, we can hide it and our own text (and we’ll do it πŸ˜‰)

There are plenty of selectors right here on 404.php to start customizing our theme, but let’s stick to the posts for now. Ok?

Now that you know that your single posts are going to use the file content.php, let’s go for it and see what else we can find πŸ€—. It’s going to be our last stop on “how to follow the puzzle.”

Resources, for Coding > WordPress

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.


Any thoughts?