How to Build a WordPress Theme Part 3 – HTML Structure

How to Build a WordPress Theme Part 3 – HTML Structure

WordPress Theme Building Course!

This article is part of the How to Build a WordPress Theme course. If you’re new to WordPress theme building, be sure to start from the beginning of the course to get a complete picture.

full course
  1. How to Build a WordPress Theme – Preface
  2. How to Build a WordPress Theme Part 1 – Theme Files
  3. How to Build a WordPress Theme Part 2 – HTML, CSS, & PHP
  4. How to Build a WordPress Theme Part 3 – HTML Structure
  5. How to Build a WordPress Theme Part 4 – Conditional Tags
  6. How to Build a WordPress Theme Part 5 – Functionality
  7. How to Build a WordPress Theme Part 6 – Theme Design
  8. How to Build a WordPress Theme – Conclusion

In Part 1 of this course, we talked about the file structure of a WordPress theme using Underscores as an example. If you haven’t read that lesson, please go back and do so.

In Part 2, would stepped away from Underscores briefly to discuss what goes on inside of those theme files regardless of what theme is used.

Now in this lesson, we’re actually going to dig inside of some of the important template files to show the HTML structure of Underscores.

HTML Structure Through WordPress Template Files

html-structureAs 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.phpfooter.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.

wp-html-structure

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.

wp-single-template

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.

Along with plenty of other awesome features, get_template_part() will also fall back to use the slug as the name of a file if the “name” parameter cannot be found or doesn’t exist. In this example, if content-single.php does not exist, get_template_part() will load just content.php instead.

As you may have guessed, inside of this file is the HTML and PHP responsible for outputting the actual post content. You can see this code inside of… you guessed it… the Underscores content-single.php file.

YES. It is 100% possible to simply copy all of the HTML from the content-single.php file and put it in place of the get_template_part() function in single.php. It’s only separated this way for clarity and organization.

_s_post_nav()

Getting back to the code inside of our single.php loop, _s_post_nav() is simply a function responsible for post navigation displayed below our single post content (think “previous post” and “next post” links).

This function is written in Underscores’ /inc/template-tags.php file. Again, instead of using a function, the actual code could have been written in the single.php file. But do you see how sloppy it would be if all this code was in a single template file?

comments_template()

Lastly, getting back to the loop content again, we have our comments template. The if statement wrapping the comments_template() simply checks to see if 1) comments are open for that particular post and 2) that there are comments to display.

As long as one of those conditions is met, comment functionality will display.

But what does all of this mean?

What this means is WordPress knows when to use what file. WordPress will never load something like your header.php or footer.php by itself. There’s no reason to. However, other files will call those files for use.

The template files making those calls are typically the ones WordPress will load on its own in certain situations.

When a single post is being loaded on the front end, WordPress will turn to the single.php file to quickly build the page. In that single.php file, you’ve supplied a header, footer, content column, and sidebar column. Those four elements, three of which were called from other files, come together to create a full web page from the opening <html> tag to the closing one.

When a WordPress Page is being loaded, it’ll do the same with the page.php file. The list goes on. Does that make sense?

Other Content Related Template Files

We discussed the single.php file because it may be the most complex of your basic template files. There are plenty of others, though, that behave the same exact way.

WordPress Pages typically don’t host comment discussions nor do they have page-to-page navigation below the page content. Therefore, you can expect the page.php file, which is the file WordPress is going to look for when a Page is loaded, to match the single.php file with a little less code inside of the loop. Check it out.

wp-page-template

Does it look familiar? The functions calling the header, footer, and sidebar templates are in place just like the single.php file. Even the HTML wrapping the loop is still the same (that makes your CSS file very happy).

The only differences are that the _s_post_nav() function is gone, because pages don’t need that, and the comments_template() function is gone because I don’t want my WordPress Pages to host comments.

Your page.php may still have code for the comments template. Pages can host comments just fine. I simply remove that code because I don’t want it.

The only thing left inside of my loop is the get_template_part() function with a slug of “content” and a name of “page.” Therefore, my function will go searching for the content-page.php file and whatever is in it will output exactly where I called the get_template_part() function.

And again, the code inside of content-page.php could just as easily take the place of the get_template_part() function inside of page.php. Everything would work exactly the same.

Seeing the Big Picture

With Underscores installed on your test site and its theme folder open and accessible through your text editor, go ahead play with these files based on what you’ve learned.

Review Part 1 again if you need a refresher on what files serve what purpose. If everything makes sense so far, open up the files and start tweaking the code.

Remove the “Edit” link Underscores likes to put at the very bottom of WordPress Page content. Move the category and tag listing from the bottom of single posts into the “entry-meta” div of the post <header>.

Using built-in WordPress functions, you are in control of what information is pulled from the database into your theme. From there, you are in control of where that information goes within your HTML structure, which can be easily adjusted in your template files.

The heart of WordPress theme building starts here.

WordPress Theme Building Course!

This article is part of the How to Build a WordPress Theme course. If you’re new to WordPress theme building, be sure to start from the beginning of the course to get a complete picture.

full course
  1. How to Build a WordPress Theme – Preface
  2. How to Build a WordPress Theme Part 1 – Theme Files
  3. How to Build a WordPress Theme Part 2 – HTML, CSS, & PHP
  4. How to Build a WordPress Theme Part 3 – HTML Structure
  5. How to Build a WordPress Theme Part 4 – Conditional Tags
  6. How to Build a WordPress Theme Part 5 – Functionality
  7. How to Build a WordPress Theme Part 6 – Theme Design
  8. How to Build a WordPress Theme – Conclusion
10 Comments:
  1. Hello!

    First off, thank you and congratulations for this wonderful tutorial! I am a rookie at this whole WordPress Theme development and your tutorial has really gotten into me.

    I am now on this third step, and I kinda got lost on the part where it says:

    “Move the category and tag listing from the bottom of single posts into the “entry-meta” div of the post .”

    Furthermore, I did check out how my freshly-installed WP site looks like using Underscores theme, and the Sidebar isn’t showing on the side, but it instead shows at the bottom (from the Search field, then Recent Posts, etc etc, down to Categories and Meta) of the page.

    So what I did was checkout (using Bluefish editor) “single.php”, “content-page.php”, “sidebar.php”, etc… but in the end I am NOT ABLE to “move the category and tag listing from the bottom of the single posts into the ENTRY META div of the post as instructed.

    I hope you could post a more detailed instruction regarding this matter? 😀

    Thank you, and I’m looking forward to your response!

    • Hi there. Sorry for the delayed reply. The part of the article you’re referencing is not a set of instructions. Sorry for not being clear there. I was just naming off random things you could do if you wanted to.

      What I was referring to there was the listing of categories and tags that a post might belong to. In Underscores, that information is displayed at the bottom of a post. Maybe you would rather have it at the top of a post. I was simply suggesting that as a common adjustment. It’s not something you have to do at all. You will determine on your own any changes you want to make based on your needs.

  2. This is a great resource for wordpress development. Not only have you been explaining WordPress theme development in a way that is very easily understood, but you also breakdown the Underscores theme, both of which I am learning to use. Thanks a lot for this well written free course! It’s brought a lot of clarity so far.

  3. Hello and thanks for this great course.

    You may want to consider updating the part about “_s_post_nav()” .
    Today (2016-02), _s doesn’t provide this function anymore, but uses instead the core function “the_post_navigation()” which can be found in wp-includes/link-template.php

    Thanks again

  4. Hey Sean, just wanted to say thanks for the awesome tutorials. I tried learning WordPress development a few months ago and gave up as I found WordPress’s own documentation not very easy to follow. I’m so glad I found this on my second attempt. Everything actually makes sense now!

  5. I’m learning so much watching your videos and even more understanding by reading these posts. As I’m trying to comprehend the code in the latest version of Underscores today (7/15/15), I see some things are a bit different now in Underscores, are you still producing content for this site ?

    • Hi Angela,

      A lot has changed since I made this course but that’s unimportant, as the course shouldn’t teach you how to do one specific thing. Instead, it teaches general information while using one starter theme as a reference. The goal is for you to be able to take this information and learn how to move around any theme, or even build your own.

      If there are things in the new _s that aren’t mentioned at all here, it’s best to just Google them.

Leave a Reply

Your email address will not be published. Required fields are marked *

*