(no title)

ThemeShaper

Creating a WordPress Theme HTML Structure

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 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.
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.

Share this: