Crafting Your Theme Framework’s Structure and Layout
So far in our quest to create our own theme framework we’ve taken a moment, a brief pause, to learn from the greats who are already managing popular WordPress theme frameworks. Now it’s time to start putting this know-how into practice.
In this part of the tutorial we’re going to nail down a flexible HTML structure and very basic CSS. From here we’ll be able to build out our WordPress theme files and start adding in some of what makes a framework a framework.
Establishing HTML structure
We’re going to start off with the assumption that our HTMLwon’t work in 100% of cases. That would be unreasonable. Instead, we’re going to aim so that we create an HTML structure that will work with 95% of sites.
Think back to some of the sites you’ve put together, and some of the divs you find you end up needing that you hadn’t anticipated. We want to anticipate those, within reason, right from the get go. Without further ado, I propose the following as a nice starting point:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>My Theme Framework</title> </head> <body> <div id="wrapper"> <div id="header"> <div class="wrap"> </div> <div id="nav"> <div class="wrap"> </div> </div> <div id="container"> <div class="wrap"> <div id="main"> </div> <div class="aside"> </div> </div> </div> <div id="footer"> <div class="wrap"> </div> </div> </div> </body> </html>
This gives us the most basic structure for each of our templates. Now let’s think ahead to what our layout will end up being. Since we don’t know, we have to prepare for any 95% of cases.
There are six basic layouts we may run up against:
So in reality we’re looking at three layouts. One where there is a single column of content, one where there are two columns, and one where there are three columns. Structurally speaking, this is what we’re concerned with. With smart HTML we shouldn’t have any problem swapping in different layouts later on.
So I propose the following additions to the HTML we’re starting with (see line 30 for where this goes):
<div class="aside" id="primary"> </div> <div class="aside" id="secondary"> </div>
Having both of these sidebar elements available will make it super easy to shuffle them around based on our needs.
(The files as-is at the end of this tutorial, and each subsequent tutorial, will be available for download. So don’t freak out too much about keeping track of changes.)
Quickly, some default content
To test the fidelity of our basic HTML so far, let’s drop in some default content and run through a couple of scenarios.
First is our header:
<div id="header">
<div class="wrap">
<div id="site-title">
<h1><a href="#" title="Site title"><span>Site title</span></a></h1>
</div><!-- #site-title -->
<div id="site-description">
<p><span>A simple description for our website</span></p>
</div><!-- #site-description -->
</div><!-- .wrap -- >
</div><!-- #header -->
<div id="nav">
<div class="wrap">
<ul>
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
<li><a href="#" title="Page">Page</a></li>
</ul>
</div><!-- .wrap -->
</div><!-- #nav -->
What we’ve done above is add in our site’s title using an h1 and our navigation using a simple ul function. Though our site’s title will often be replaced with a graphic logo of some sort, the true meaning behind the logo is the title of the website, and so should be treated as a topmost level heading.
Next, we’re going to add some default content to our main content area, the place within the div with the ID of “main”.
<div id="main">
<ul class="postlist">
<li class="post">
<h2><a href="#" title="Post">Post title</a></h2>
<p>Posted by Ryan Imel not long ago
<p>Lorem ipsum dolor sit amet, dolor sit amet.
</li><!-- .post -->
<li class="post">
<h2><a href="#" title="Post">Older post title</a></h2>
<p>Posted by Ryan Imel a bit longer ago
<p>Lorem ipsum dolor sit amet, dolor sit amet.
</li><!-- .post -->
</ul>
</div><!-- #main -->
I’m assuming at the time being that we’re dealing with a page holding a number of posts, rather than a single page template which would hold only one. Obviously we wouldn’t use an ul to mark up a single post, that would be silly.
And finally, let’s add some default content to our sidebar divs.
<div class="aside" id="primary"> <ul> <li> <h3>About this theme</h3> <p>This theme is your own, and you can do with it what you want. You'll probably never see this anyway.</p> </li> <li> <h3>Pages</h3> <ul> <li><a href="#" title="Page">Page</a></li> <li><a href="#" title="Page">Page</a></li> <li><a href="#" title="Page">Page</a></li> <li><a href="#" title="Page">Page</a></li> </ul> </li> </ul> </div><!-- .aside #primary --> <div class="aside" id="secondary"> <ul> <li> <h3>The second sidebar</h3> <p>This theme is your own, and you can do with it what you want. You'll probably never see this anyway.</p> </li> <li> <h3>Posts</h3> <ul> <li><a href="#" title="Post">Post</a></li> <li><a href="#" title="Page">Post</a></li> <li><a href="#" title="Page">Post</a></li> <li><a href="#" title="Page">Post</a></li> </ul> </li> </ul> </div><!-- .aside #secondary -->
This might be a good time to mention thoughtful commenting. Notice that every major tag we close (and by major I mean anything with a class or ID attached to it) we include a comment that identifies what it closes. The more you do this, the happier you will make those attempting, later, to understand your code.
Odds are you’ll thank yourself when you’re looking at your work again, a year down the road.
Then there’s the footer, which we’ll include for the sake of posterity.
<div id="footer">
<div class="wrap">
<p>This current theme is built on <a href="http://wordpress.org" title="WordPress.org">WordPress.org</a> and this theme framework.</p>
</div><!-- .wrap -->
</div><!-- #footer -->
Once we have template tags and our theme’s name, we can include those things as well. Onward.
The most basic CSS
What will we get if we load up our HTML in a browser, aside from a plain text snoozefest? Technically speaking, each of us will see something different. So we’ll start by adding in a pretty standard reset.css file (courtesy of Eric Meyer) by using import in our new stylesheet.
The reset.css we add will look like this:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
And our style.css file will look like this:
/* Brings in the reset stylesheet, by Eric Meyer */
@import url('reset.css');
And don’t forget you’ll need to add in the link in the head of the HTML in order for any of this to work:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8">
Now your page should look even worse. But at least you’re sure to have a crappy look that’s consistent between browsers.
Testing various CSS layouts
The real reason for filling in all of this fake content and having a simple layout, at this point, is specifically so that we can do some basic layout tests. We want to know whether this HTML we’ve laid out is enough for the majority of layout styles out there.
In order to easily show the results of our CSS here, I’ll add some color coded borders around the elements.
/* For testing purposes, color coded borders */
div#header, div#nav {
border: 3px solid #f00;
margin: 1.0em 0;
}
div#main {
border: 3px solid #0f0;
margin: 1.0em 0;
}
div.aside {
border: 3px solid #00f;
margin: 1.0em 0;
}
div#footer {
border: 3px solid #000;
margin: 1.0em 0;
}
div#wrapper {
margin: 0 2.5%;
width: 95%;
}
So just with that, here’s what we see:
The 1 column layout
So let’s start with the CSS we would use to achieve a simple one column layout.
/* A one column layout */
div.aside {
display: none;
}
Obviously this isn’t the ideal way to achieve it, since we wouldn’t want to include the sidebar content in the first place. Just hang in there.
A 2 column layout
Okay, that was exciting. Let’s try the two column, sidebar on the right layout now.
/* A two column, right sidebar, layout */
div#main {
float: left;
width: 70%;
}
div.aside {
clear: right;
float: right;
width: 25%;
}
div#footer {
clear: both;
}
By floating both sidebar divs to the right, we create the illusion of only one sidebar. And of course the footer will clear our floats for us.
A 3 column layout
Now, can our structure stand up to a three column layout, with one sidebar on either side?
/* A three column, left and right sidebar, layout */
div#container {
position: relative;
}
div#main {
float: left;
left: 30%;
position: relative;
width: 40%;
}
div.aside {
width: 25%;
}
div#primary {
float: right;
}
div#secondary {
float: left;
margin-left: -40%;
}
div#footer {
clear: both;
}
Success! We seem to have an HTML structure that is strong enough to move forward. Let’s do just that.
CSS so our eyes stop bleeding
We don’t want to spend a lot of time on CSS, specifically because this is a framework, not really the place for heavy styling. But let’s add in some basic styling so that we can look at this HTML without a barf bag close by.
Using the right sidebar on a two column setup, we’ll use this very basic CSS:
/* Basic styles */
body {
font-family: Cambria, Georgia, Times, 'Times New Roman', serif;
font-size: 65%;
}
div#wrapper {
font-size: 1.4em;
}
div#header {
float: left;
width: 50%;
}
div#nav {
float: right;
width: 50%;
}
h1 {
font-size: 2.0em;
}
h1 a {
color: #000;
}
h2 {
font-size: 1.6em;
}
h3 {
font-size: 1.4em;
}
p {
margin: 1.0em 0;
}
a {
color: #888;
text-decoration: none;
}
a:hover {
color: #000;
text-decoration: underline;
}
div#nav li {
float: left;
margin: 0 2.0em 0 0;
}
.post {
margin: 0 0 3.0em 0;
}
div.aside li ul li {
list-style-type: disc;
margin: 1.0em 0 1.0em 1.5em;
}
Ah, that’s a bit better, right?
Next time: assembling the theme files
Now that we have a foundation to work from, next time around we’ll be separating our basic HTML into more practical atomic elements, as well as discussing not only the minimum requirements for a WordPress theme, but the best number of files for a WordPress theme framework.
↓ Download the project files, so far (HTML and CSS only, 4 KB)
Did you enjoy this post? Then it might be worth your time to subscribe via RSS using your Feedreader or, if you prefer, via email.
About the Author: Ryan Imel
10 comments so far
Mike Smith said:
AWESOME post. Can’t wait for the next installment.
Enda said:
Love this post and will be checking back again as I’m interested in developing in developing my own 3 column theme at some stage.
Dan Butcher said:
Great series and good timing! I just started looking into frameworks, so this is helpful for me to understand what the hoopla is about.
Question: Ryan, is there a plugin that you use to display your code with line numbers and the print and copy options?
Ryan Imel said:
Thanks Dan, I’m glad you’re enjoying it so far.
For the code with line numbers, you’re going to want to look up Google’s SyntaxHighlighter. There is a Plugin for it, or you can integrate it directly into your theme on your own. That’s what I did. Here’s the link: http://code.google.com/p/syntaxhighlighter/
Dan Butcher said:
Ryan, thanks for the link–I’ll definitely look into both options.
kin said:
I really liked this post … when it continued?
Violet said:
Really loving this series, it’s the first one that I’m finding easy to follow – I can’t wait for the rest of the series, It’s the first theme development walk thru that keeps it simple without bombarding you with things that aren’t yet important.
I may change my tune once you get to the php parts – I stink at php, but have a feeling you’ll get me thru it – cheers
(my sites NSFW btw)