Customized WordPress Theme HTML Structure – I

WordPress provides quite a limited number of themes so it’s sometimes required to design a custom theme. We would specifically deal with the HTML structure of the custom WordPress theme.

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”. 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 that would be used for the customized themes would be as follows:

Let’s analyze the above code. 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.

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 keys. 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 gives you the opportunity to do powerful stuff with CSS. This we would perform in the next tutorial on the same subject.

Looking for a quality hosting service? here are a few I suggest.
BlueHost | HostGator | Media Temple
Ali has been an entrepreneur in web, video and related technologies. Having worked with many business across the globe, Ali stands truly a great pillar in the business working with him.