For many WordPress users who are stepping beyond the basics of WordPress and starting to customize different parts of a site based on the site's template hierarchy, it can get pretty daunting to figure out WHICH page template is being used to render WHICH part.  The heart of this answer is in understanding more about WordPress template hierarchy. There is even a very useful visual map to help find your way to the right template.

But this post is focused on another seldom talked about feature in WordPress that works with every properly coded theme.  I'm talking about the body class.

<body <?php body_class(); ?>>

The above code can be found in almost all WordPress themes and will output the multiple classes being used on a specific page in the HTML body element.  For example, if you were to visit a blog post page and look at the source code, you might see the HTML body element and corresponding classes that look like this:

<body class="post-template-default single single-post postid-2675 single-format-aside logged-in admin-bar no-customize-support one-col c1">

This long string of classes actual tells us a LOT about what area of a site the visitor is viewing along with other bits of information.  Now since the above example is fairly long, I'm going to pull out several of the classes to go into deeper explanation.

  • single - This class tells us we are in a singular post.  It could be a standard blog post; it could be a single post from a custom post type.  This also tells us that the web page is not a feed or archive view.
  •  single-post - This class tells me we are on a singular post from the "post" custom post type.  If we had a custom post type called "reports", this class would appear as single-reports.
  • postid-2675 - This class is generated by the actual Post ID of the post.  For example, if you wanted to apply some CSS style to this specific post, you could target .postid-2675{color:#ff2200;} (or something along those lines).
  • single-format-aside - This class indicates that the post being displayed is a single post that is using the Post Format Aside.
  • logged_in - This class will show up in the body class for any user that is actively logged into the site.

There are also additional classes in the above HTML body element example that are more theme specific to indicate the number of columns, custom layout options, and more.  Other types of classes you might see, depending on the page being referenced: home, page, blog, archive, category, author, etc.

The ability to identify and decode the information contained within the string of HTML body element classes can assist any developer in not only being able to target specific views but also can grant knowledge as to which template file a view is using within the theme.

Helpful Information for the Voce Theme

The Voce Theme has a custom solution based on a conditional logic that helps serve up different template files based upon core WordPress template hierarchy.  The simple response is that everything, every view and location on the site, is served through the index.php template file in the theme folder. But if you were to dig into the actual PHP files, you would see that there is a solitary function in the index.php file.... wpsvoce().  While this post won't go into how this function works, I will say that this function builds and renders the layout structure that you see and use for your WordPress sites.

At this point, we as WordPress developers, really need to understand the basics of template hierarchy.  But for the purpose of this post, I'll be focusing solely on how this relates to the Voce Theme and how we can interpret the above HTML body element classes to find the correct page template to edit.

Reminder: Never edit the /voce-theme/ (parent theme) files.  Always copy a page template file to your child theme's /templates/ folder.  If no /templates/ folder exists in the child theme you can simply create one.

Hierarchy is important in any WordPress theme and especially with the Voce Theme.  At the base level, everything falls to the content.php file in the templates directory.  All the other content-***.php files are based on several conditions.

  • Sometimes the theme will look for Post Formats being used.  Example: content-quote.php would be used to display any post that contains the Quote post format option.  If a post contains the Quote post format option and WordPress is unable to find a content-quote.php file, then it will attempt to display the post using the base content.php file.
  • Sometimes the theme will be displaying an Archive page, and in this example, WordPress will be looking for the content-archive.php template file.  If that file is not found, then the post will be displayed using the content.php file.
  • Sometimes the theme will be on a WordPress Page, and so WordPress will be looking for the content-page.php template file.  If that file is not found, then the page will be displayed using the content.php template file.

If you want to dig a little deeper and see exactly how the Voce Theme makes a choice as to which template part is loaded, you can look at the loops.php file in the parent theme folder.  You can look for the get_template_part('template/content', **********); code to identify which conditional is loading which template file.

So what does this mean for customizing the look of content?

If you were to look at the HTML body element list of classes and see a CSS class of single-post.  You can be sure that WordPress will be looking for the content-single.php template file to render that content.  And the way template hierarchy works is that WordPress will first look in the child theme for that /templates/content-single.php template file and if it doesn't find that template file in the child theme, WordPress will look for the /templates/content-single.php template file in the parent theme.

Now, this is where it gets a little more complicated because if both of those file locations are not found, the Voce Theme then starts looking in the child theme for /templates/content.php and if not found look for the /templates/content.php in the parent theme.

What template files are included by default in the Voce Theme?

  • content.php - Lowest level fallback method of displaying content if no other template file is found.
  • content-archive.php - This is used by any archive view.
  • content-aside.php - This is used when a specific post has the Post Format Aside assigned to it.
  • content-attachment.php - This is used to display a specific attachment page.
  • content-page.php - This is used to display any page (WordPress Pages).
  • content-quote.php - This is used when a specific post has the Post format Quote assigned to it.
  • content-search.php - This is used when a search result is rendered.
  • content-single.php - This is used for single post pages.
  • content-status.php - This is used when a specific post has the Post Format Status assigned to it.
  • no-results.php -  When no post is found from the query (but the URL is valid) this template is used.
  • 404.php - This is used when an invalid URL is used. 404 Error.

Anytime you want to make modifications to any of these files; you should copy/paste a copy of that file into your child theme's /templates/ folder.

Now you know a little more about how useful the HTML body element's list of classes are in helping not only identify different views on the site but also which theme template files are being used.