How to Build a WordPress Theme Part 3 – HTML Structure

HTML Structure Through WordPress Template Files

As stated in Part 2, I am not here to teach you HTML. However, let’s take a quick second to look at how and extremely basic HTML structure would look for a website with a header, footer, content column, and sidebar column.

As you can see, it’s not very complicated. The elements inside of the body tag are what display as the HTML structure of the theme.

You should recall from Part 1 of this course that the header, footer, and sidebar elements all have their own WordPress-recognized template files. They are header.php, footer.php, and sidebar.php, respectively.

So as you would expect, header.php includes the <header> element. However, it also includes everything above the header element. So from the closing header tag on up to the start of the HTML, that’s in the header file.

footer.php includes the <footer> element. Again, it also includes everything below the footer element. So from the opening footer tag on down to the closing of the HTML, that’s in the footer file.

sidebar.php includes a <div> element with an ID or class to label it as the sidebar. Using our example, the entire div with the ID of “sidebar” would be in the sidebar file.

Easy stuff, right? This means the only part we didn’t cover was the <div>element with the ID of “content”.

Again from Part 1, we know that this container will hold different content based on the type of page being loaded in WordPress. Therefore, there are multiple template files eligible to fill this role. Here’s how it’s done.

Content Related Template Files – Example: single.php

The beauty of PHP (and many other programming languages) is that code can be re-used over and over again without having to write the code each time.

In this case, WordPress has built-in functions that are designed specifically to search your theme files by name (now you understand why file names matter).

For example, the get_header() function placed anywhere in a WordPress template file will output whatever is in the header.php file. The same relationship is true for get_footer() and footer.php as well as get_sidebar()and sidebar.php.

That said, we can replace all of the HTML in our previous example with the aforementioned functions designed to fetch that HTML from said template files.

We remember from part 2 that PHP is a server-side language. So the fetching of file contents happens at the server and by the time it reaches the user’s browser, it displays as HTML just like the basic template above.

As you can see from the image, the only HTML left in the file is the HTML specific to which kind of page is being loaded in WordPress.

This, ladies and gentlemen, is a general idea of what the template files responsible for handling the content column will look like!

The <div> you see in the image would be the same in all template files so that all content site-wide would share the exact same HTML structure. It’s what goes inside of the div that changes from template to template.

Let’s take a look at the WordPress Post template in Underscores, which, of course, is always going to be single.php.

Though that looks a more complicated than you probably expected, it’s very simple.

Like all PHP files must do, the PHP code is started at the very top with opening PHP tags. Then, a comment block is in place purely for informational purposes.

Below that section is where you find the familiar code. The header template is called first. Skip to the bottom of the file and you have the sidebar and footer templates called.

In between all that goodness is what makes a Post a Post.

The #primary and #main elements will stay the same from template file to template file. It’s inside of those elements that will change. We have the wonderful WordPress loop (from “while” to “endwhile”) where the magic happens.

The loop does exactly what it sounds like… it loops through your database checking for data that should be retrieved based on what type of WordPress page is being loaded.

In this case, because WordPress knows it is loading a single.php file, it searches the database for one specific single post based on the URL (for the sake of this simple example) and returns the data specified for whatever is placed inside of that loop.

In the Underscores single.php example, three things are called inside of the loop – get_template_part(), _s_post_nav(), and comments_template().

get_template_part()

This function is a WordPress theme developer’s best friend. It’s used in the same way as the header, footer, and sidebar functions were to call a template file. Only this time, you call your template file based on its name, which you specified.

Here, we’re calling get_template_part( 'content', 'single' ). WordPress knows exactly what that means. It will now search the root of your theme for a file called content-single.php.

In your get_template_part() function, “content” is the slug and “single” is the name. WordPress puts those two together and searches for content-single.php. If your chosen slug was “html” with a name of “post,” WordPress would search for the file called html-post.php.