Now we’re starting to get into the real meat of WordPress Theme development: coding the HTML structure.
The Goals of Any HTML Structure
When coding a web site, you should have 2 goals in mind: lean code and meaningful code. That is, using as little markup (HTML tags) as possible and making sure that the markup is meaningful by usingsemantic class and ID names that refer to their content, not how they “look” (class=”widget-area” instead of class=”sidebar-left”).
Now, when coding a WordPress Theme (or any template for any Content Management System) a balance is going to have to be struck between lean markup, with very little structure, and what’s called Divitis; including too many unnecessary div elements in your code. In other words, too much meaningless structure. You’ve probably seen the div tag before if you’ve looked at the code for a website or any WordPress Theme. Think of them as containers for HTML code—containers that are very handy for manipulating HTML code with CSS. Obviously we’re going to have some. But we don’t want too many or ones without meaning.
HTML5 has made our quest for meaningful markup much easier with the addition of structural tags such as header, nav, and footer. These new elements are similar to the div tag in that they can also serve as containers for HTML code. At the same time, they allow us to create a much more descriptive outline for our HTML.
Ultimately, we want enough structure—using the new tags in HTML5 as well as the div tag—that we can reuse our code for multiple blog and site layouts. We want to code something we can come back to and use again.
The HTML Structure for Your WordPress Theme
Let’s take a look at the HTML structure we’ll be using for the body of our WordPress Theme.
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<hgroup></hgroup>
<nav role="navigation" class="site-navigation main-navigation"></nav><!-- .site-navigation .main-navigation -->
</header><!-- #masthead .site-header -->
<div id="main" class="site-main">
<div id="primary" class="content-area">
<div id="content" class="site-content">
</div><!-- #content .site-content --></div>
<!-- #primary .content-area -->
<div id="secondary" class="widget-area">
</div><!-- #secondary .widget-area -->
<div id="tertiary" class="widget-area">
</div><!-- #tertiary .widget-area --></div>
<!-- #main .site-main -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="site-info">
</div><!-- .site-info -->
</footer><!-- #colophon .site-footer -->
</div> <!-- #page .hfeed .site -->
Actually, this HTML forms the backbone of _s (pretend it’s an x-ray). Go ahead and paste this code into your text editor and save it somewhere handy. We’ll be using it later when we build the file structure for our theme. But before we do that, there are a few things we’ll want to take a look at here.
A Quick Tour Through Your WordPress Theme HTML
Visualization of a sample implementation of the HTML structure. Click for a larger view.
Check out the visualization of the HTML structure above. The darker a block, the deeper it is nested. The arrangement of these blocks are determined largely by CSS, which we’ll cover in a later lesson.
You can also modify the HTML structure itself to suit your needs. For example, you can move the navigation block outside of the header block, or move one of the widget areas into the footer block. For the purposes of this tutorial, though, we’ll keep the HTML structure as is, and when we get to it, use CSS to arrange our content and widget areas.
All right, let’s walk through the code a bit.
Firstly, the class attribute on the wrapper, hfeed. hfeed is part of thehatom Microformat schema. In plain English, this means that adding that hfeed class to our page tells any machines reading our site (like search-engine bots or some other service) that our site publishes syndicated content, like blog posts. You’ll be seeing a lot of class names like this as we go along.
Looking at the structure for the header and footer, you’ve probably noticed the new HTML5 structural tags, header and footer, respectively. These tags describe the broad sections of the document. By borrowing class names from the publishing world (WordPress makes us content publishers, right?), I’ve tried to add further meaning to the markup that will be resting in these containers as well as the containers that fall within them.
You’ll also notice the ARIA “role” attribute on the structural HTML tags. The role attribute helps make it easier for those using assisitive technology devices to navigate through your site. To learn more, check out HTML5 Accessibility Chops: When to use an ARIA role.
In the main area of our HTML, note that our widget areas come afterour content area. And you may also have noticed that our content rests inside a container div (with the class name of “content-area”). These points are key. This not only lets our main content come before the sidebars in the eyes of search engines (and screen readers) but by using a CSS technique involving negative margins, we can make this into a 1- or 2-column theme with only a few lines of CSS.
This HTML structure is going to future-proof your WordPress Theme and give you the opportunity to do powerful stuff with CSS. It’s a good one.