Creating a WordPress Theme 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 using semantic 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. And we want enough structure—using 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.
<html> <head> </head> <body> <div id="wrapper"> <div id="header"> <div id="masthead"> <div id="branding"> </div><!-- #branding --> <div id="access"> </div><!-- #access --> </div><!-- #masthead --> </div><!-- #header --> <div id="main"> <div id="container"> <div id="content"> </div><!-- #content --> </div><!-- #container --> <div id="primary"> </div><!-- #primary .widget-area --> <div id="secondary"> </div><!-- #secondary --> </div><!-- #main --> <div id="footer"> <div id="colophon"> <div id="site-info"> </div><!-- #site-info --> </div><!-- #colophon --> </div><!-- #footer --> </div><!-- #wrapper --> </body> </html>
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 WordPress 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
Firstly, the class attribute on the wrapper, hfeed. hfeed is part of the hatom 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 div structure for the header and footer you’ve probably noticed what I’ll call an inner-outer structure. This is one of the few places (hopefully) that our structure could potentially be accused of Divitis. Potentially. Borrowing class names from the publishing world (WordPress makes us content publishers, right), I’ve tried to add some meaning to the markup that will be resting in these containers. Markup that we’ll be adding in this tutorial series and markup that will may be added in the future. Plus, to accomplish certain layouts, we’ll need this markup structure. It’s better to add it now and do it right.
In the main area of our HTML you’ll notice that we have 2 widget areas that come after our content area. And you may also have noticed that our content rests inside a container div. These points are key. This not only let’s 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, 2, or 3 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.
How To Create a WordPress Theme
This post is part of a WordPress Themes Tutorial that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.