Crafting Your Theme Framework’s Structure and Layout

22 Comments

Frameworks - Layout masthead

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>

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

Theme layout options

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:

framework-structure-index01

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.

framework-structure-index02

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.

framework-structure-index03

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;
}

framework-structure-index04

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?

framework-structure-index05

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)

22 thoughts on “Crafting Your Theme Framework’s Structure and Layout

  1. Pingback: Theme Playground | Create Your Own WordPress Theme Framework

  2. Pingback: Theme Playground | A Look into the World’s Most Popular Theme Frameworks

    • Since the last response what a few years ago is it safe to assume that there are no more posts for this series ?

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

  4. Pingback: Create Your Own Theme Framework

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

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

  7. Hm, can’t find the missing 5 parts anymore, are they deleted? I just stumbled upon this post and am very curious how it continues.

  8. Sorry for my eagerness. Thought the series is already finished and may be lost in space. Anyway. Thank you for the feedback. Looking forward to new articles in this series. So far a very comprehensible introduction. I will continue checking for updates, for sure!

  9. Hey Ryan – any chance on finishing the series?
    It would be really helpful, the first two chapters are great.

    All the best

  10. Thanks for this great tutorial. I learned such a lot.

    Will you be continuing this series? Please do:)!

Comments are closed.