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. 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" class="hfeed">
    <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" class="widget-area">
        </div><!-- #primary .widget-area -->
         
        <div id="secondary" class="widget-area">
        </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>

Advertisements

8 thoughts on “Creating a WordPress Theme HTML Structure

  1. I simply want to say I am just newbie to weblog and actually enjoyed this web blog. Very likely I’m want to bookmark your blog post . You actually have wonderful writings. Thank you for sharing your web site.

  2. You are my inhalation, I own few blogs and infrequently run out from post :). “Follow your inclinations with due regard to the policeman round the corner.” by W. Somerset Maugham.

  3. Hello there, simply was aware of your weblog thru Google, and found that it’s truly informative. I am gonna watch out for brussels. I will be grateful if you proceed this in future. Lots of other people will probably be benefited out of your writing. Cheers!

  4. It’s actually a great and useful piece of information. I’m glad that you shared this helpful information with us. Please keep us up to date like this. Thanks for sharing.

  5. I do believe all the ideas you have presented to your post. They’re really convincing and can definitely work. Still, the posts are too brief for starters. May just you please lengthen them a little from subsequent time? Thanks for the post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s