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
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.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.
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.
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
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.php, footer.php, and sidebar.php, respectively.
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.
Share story
0 comments: