Plus, to accomplish certain layouts, we’ll need this markup structure.
Markup that we’ll be adding in this tutorial series and markup that will may be added in the future. 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. This is one of the few places (hopefully) that our structure could potentially be accused of Divitis. Looking at the div structure for the header and footer you’ve probably noticed what I’ll call an inner-outer structure. You’ll be seeing a lot of class names like this as we go along. 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. hfeed is part of the hatom Microformat schema. A Quick Tour Through Your WordPress Theme HTMLįirstly, the class attribute on the wrapper, hfeed.
But before we do that, there are a few things we’ll want to take a look at here. We’ll be using it later when we build the file structure for our WordPress Theme.
Paste this code into your text editor and save it somewhere handy. Let’s take a look at the HTML structure we’ll be using for the body of our WordPress Theme. The HTML Structure for Your WordPress Theme We want to code something we can come back to and use again. And we want enough structure-using the div tag-that we can reuse our code for multiple blog and site layouts. But we don’t want too many or ones without meaning. Think of them as containers for HTML code-containers that are very handy for manipulating HTML code with CSS. You’ve probably seen the div tag before if you’ve looked at the code for a website or any WordPress Theme. In other words, too much meaningless structure. 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. 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”). When coding a web site you should have 2 goals in mind: lean code and meaningful code. Now we’re starting to get into the real meat of WordPress Theme development: coding the HTML structure. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition. Check it out at Creating a WordPress Theme HTML Structure. Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques.