Both XHTML (strict) and CSS validate fully and although the appearance is quite colorful, the graphics total less than 31Kb. Content appears on the left, with two sidebars to the right. The intention is for site navigation links to appear in the right bar and for the other to be used for promotions, etc. With this arrangement, surfers’ eyes will pass across promos while moving between content and navigation.

With two exceptions, everything will be picked up automatically from your installation. The first is a javascript called new_win.js which serves to open all off-site links in a new window, without the need to add target=”_blank” anywhere. If you want to use this script, open it in an editor and change the first line - var excludedomains=[”carpejugular.com”] - to reflect your own domain name.

The other is the wp_list_bookmarks settings in center_column.php. It is currently set to display all bookmarks in random order. If you want to change that order or limit to a specific category, this page over at WordPress explains the options. If you are using a version of WordPress before 2.1, you should replace my code, perhaps with get_links_list.

This theme is completely free to use and/or adapt as you wish. It includes a small credit in the footer and I would be grateful if it is left in place. To install, download the zip, unpack it on your PC, FTP the directories and files to your wp-content/themes directory and then activate the theme in your WordPress admin.

• Demo
• Download

Although that train of thought contains a few kernels of truth and heaven knows it is appealing, the reality is rather different. First, you are not likely to earn more than a very modest income from even a fairly popular blog and if you don’t have your own traffic source for it, you are going to need patience as well as making sure you get everything right.

Splog or Blog?

Search engines don’t love blogs in particular, but they do love original text-based content, lots of it, in depth. And that’s exactly what the earliest blogs were providing. Ignore this at your peril because although you can run splogs (minimal, sales-pitch type and/or non-original text), you will not see near the search engine benefit for which “real” blogs have become legend. There are ways in which certain strategies and circumstances might make it worthwhile accepting that loss, just don’t be under any illusion that they work as well as the model they mimic. I may cover splogs another time, this article is about making the real thing work from scratch.

Hardcore Blogging

Do not take on blogging lightly. Blogs are long-term projects which must be worked on consistently: you need to add at least one meaty article a day. On top of that you will need to develop (inbound) links, since that is something else the search engines value highly. And unless you are ready to have your modest earner as part of a varied empire, once you have your first blog under your belt, you will need a second, then a third and so on. A lot of work by the time you are done.

Don’t worry about visual content, RSS feeds and all the other tools at first. Blogging is about writing, so start by identifying a niche or angle you will be able to write about every day. How will you write? If you Google pretty much anything you will get thousands of results, so what style, personality or authority can you bring to your site to make it different, to pull in the bookmarkers and feed readers, as well as the search engines? This is something anyone building any kind of site should think about, but with blogs you cannot afford to simply pay lip service.

If by this point you haven’t decided that maybe you should be looking at mass-producing splogs, then the next thing is to identify who you are going to promote. If you are building a mainstream blog, Adsense might be your best bet, but if an adult blog, then you will benefit from sponsors who offer good content for affiliate use. It matters less what exactly they offer, than whether among their zips, FHG’s etc, is stuff you can write about with conviction. More than say, if you were running a TGP, it is also a good idea to pick sponsors whose sites do not disappoint. Blogs by their nature involve repeat visitors, not one-off sales shots. Promoting third-rate sites is a very bad idea.

Next, come up with a reasonable domain name and a theme. If you cannot afford a designer, there are hundreds of free designs out there which are relatively easy to adapt, or you can build a theme from scratch. Above all focus on usability and not gloss (Smashing Magazine recently published an article which is full of design clues) and if you do hire a designer, make sure he or she is going to deliver a table-free design which enhances and not overpowers your content. I strongly recommend either finding a site to use as a model, or sketching/roughing out the layout you want. There are lots of links and elements on a blog page and if your visitors cannot find what they expect easily, they will be gone.

Once your site is live, work especially hard to produce catchy topic-relevant titles. Create a list of keywords, but don’t overuse them, just keep the list handy as a reminder to use specific terms rather than generic ones when you can. Make sure you keep stats for both your site and your search engine, so that you can see what is popular and provide more of the same.

In search engine terms, hard exchanges with other sites such that your link appears in a long list with many others, are close to useless and possibly even damaging. Much easier to accomplish in mainstream than adult, you need to spend some time each day finding ways to place links back to your site from other sites. You can do that via non-spammy comments on other blogs, by organizing post exchanges, and by being willing to cast some bread on the water, with unconditional mentions of other blogs in your posts. By all means let the site owners know you have plugged their sites, but don’t be discouraged if most never return the courtesy. The few who do will make it worthwhile and meanwhile your visitors will appreciate being offered extra resources.

Sign your site up with Feedburner, make sure you are using a decent ping list and provide “chicklets”, the icons to encourage social bookmarking and feed subscriptions. If you are doing everything right and you want to speed your growth, when you begin earning money use it to buy yourself promotion (promotion, not traffic), on the search engines and/or on relevant sites.

Onwards and Upwards

Once you are feeling fairly confident that your site is solid and you have its maintenance under control, start over with something related but different. You can begin cross-promoting and as your network builds, you can if you wish, gradually spread into categories quite distant from your starting point. Just make sure that each new site builds on those you already have, so that you really do have a network and not just a collection of sites. That will also make it easier (with care) to use your posts on more than just one site (see below).

Sponsors RSS Feeds

If you are lucky enough to find some good feeds relevant to your blog(s) there is absolutely no reason not to use them. If you do build a network, they will make it possible to expand further (unless you hire writers or regularly exchange posts) than would otherwise be possible.

So what is “good”? Well in this context it must mean that visually and textually the feeds are consistent with your site(s). True too if reusing your own posts, it is an excellent idea to at the very least swap out some keywords or even rewrite bits of imported feeds, to ensure uniqueness. If you don’t have the means to edit feeds before they appear on your site, you can always set up a hidden site for importing and editing feeds and then import from there to your live site(s).

PS: mainstream oriented but relevant to everyone, ProBlogger is an excellent resource for articles about monetizing blogs. Definitely worth subscribing to.

Tag Strategy

What if any value can tags serve, apart from controlling classification in some blog directories? First they might offer a small search engine edge if handled correctly, in that tags chosen (as they should be) from words which actually appear in your text, will in turn cause WordPress to generate pages based around those tags. Such pages by definition share at least some tags/keywords in common which might result in a concentration that might give you a decent SE placing.

Lots of emphasized uses of the word “might” there. Two reasons. The first is that it is near impossible to control the keyword density of those pages, so they are very unlikely to hit the ideals purely by coincidence. You could even end up being penalized for stuffing. Second, there is a growing school of opinion (I haven’t decided how credible it is) which says that if Google finds the same posts on your site via different routes (ie via category and date (and tags), as well as in their original date order, you could be penalized for duplicate content. The response to this belief is to place noindex metas (using a plugin) on all but main and single-post pages. Bye-bye any SE edge there could have been. Not everyone will agree, but in my view the best use of tags is to treat them as an extension of your categories.

Basic site navigation should be kept simple because too many options make it difficult for the surfer to choose. Crazy as it might sound, he may leave your site rather than make that choice. With that in mind, it is a good idea to restrict your categories to no more than a dozen, but that may well not be near enough to filter your visitors as effectively as possible, nor even give them a proper idea of all that your site has to offer. Tags to the rescue!

With tags, you can even say to hell with convention and apply tags to articles based on a list of keywords/phrases you have decided to use as effectively sub-categories. Don’t worry about whether or not these words appear in the text. Or you can play by the rules and restrict yourself to words from the text, still in effect creating sub-categories. Keep the tags per post between 3 and 6 (again for the sake of simple choices) and list these tags under each article (much easier) or embed them in the text (possibly more effective). Chosen wisely, you are then offering your visitors a tempting way to dig deep into your site, while at the same time allowing them a chance to define their interests more precisely. Try not to go too wild selecting different keywords for each and every post, because there really is no point in sending surfers to a page which may only contain the post we was originally reading. Even exercising some control you will likely still end up with dozens of tags on your site. Enough already :)

Tag Clouds

These are those collections, often of different-sized and/or different colored links, such as the one you can see on the right of this page. Tucked discretely out of the way or displayed on their own page, they serve much the same purpose as a site map: of limited interest to most visitors but a decent way to ensure search engines have short paths to all your content. To actually put them under the surfers’ noses is more questionable and I do it here mainly because I want features I know I shall mention occasionally, to be built into the site so they can be seen.

Webmasters tend to think they are “cool” and possibly surfers did too while they were a novelty. But unless the cloud is kept small enough that it will exclude many tags anyway, it soon becomes another case of information overload. Think carefully about if and how you use them.

After you unzip your WordPress download on your PC, you will see a file structure like the one above. When you have done the Famous 5-Minute Install chmod 666 all the PHP files and the css file in the default directory, so that they can be edited. Inside your WordPress admin area, select the WordPress Default theme for editing.

I do not recommend that you attempt to do more than minor editing directly into WordPress. This is an entirely personal preference, but I work from a set of files on my PC, using my regular HTML editor and after each change, copy and paste the code into WordPress. It’s more convenient than non-stop FTP’ing; I can look at the results as soon as I have saved the new code (to open your site in a new window, right-click on the “View Site” link at the top of your WordPress screen); and if I don’t like what I see, I can easily undo the changes or make more. Most importantly, at some point you will surely paste over the wrong file. Local copies make that an inconvenience and not a disaster.

Down the right side of the screen is a list of file names: Stylesheet, 404 Template, Archives and so on. Click on the “Main Index Template” link to pull it into the editing area and (if you are working the way I do, open it in your HTML editor too). This is what you will see and it’s okay to say “Huh?”.

The good news is that although WordPress blogs are driven by PHP, you do not need to understand any PHP at all. All you must know is that <? marks the beginning of a placeholder and ?>, the end of one. In between, is the code WordPress needs to work its magic.

Take a look at the areas I have highlighted in color. They are all get commands, which tells WordPress to process and then insert a template into that spot. Right now the templates are header, sidebar and footer. Look at that list on the right of your WordPress screen and there they are, templates for the top, side and bottom of all your pages. There is also searchform in that list, look down near the bottom of the code you have open in your editor, and find include blah blah… searchform.php. This is the regular PHP command with which you may already be familiar and WordPress also uses it to pull in templates.

Look at the code again, focusing on the styles identifiers used by the divisions. As they should, they should give you heavy clues as to what they contain: content; post; postentry; postmetadata; and navigation. Now look inside the divisions for more giveaways like the_title, the_time, the_content. After that, there isn’t much left on the page. Some conditional statements (while and if) wrapped around a few sections and that’s about it.

Take a look at your new blog and note that information about the category to which the post belongs appears below the post. Now cut the paragraph that I have highlighted above and paste it back, above div class=”entry”. Paste the whole page of code over the code in your WordPress editor and save. Look at your site again. That’s how easy it is to make changes to the “running order” of your pages.

The Loop

Look again at the last illustration, it begins with if (have_posts()). The section illustrated here is what WordPress calls The Loop and it is exactly that: a loop within which a list of commands are repeated so that several posts can be displayed at one time. It checks whether any posts exist and if so, displays them. If not, an apology and search form are displayed. The important thing to remember about The Loop is that although you can move things around as easily as I just indicated, you must keep items which you want to display for every post inside The Loop. By extension, if you only want to show something once on a page, it must be placed outside The Loop, above the while statement or below the endwhile.

Examine the other templates in the same light, experiment with them if you wish. All we are doing at this point is de-mystifying the way that WordPress builds a site. WordPress is not without flaws, but it does illustrate very well how big, apparently complex sites can be made from just a few simple components. It also throughly applies the principle of separating content from design. You will not find a dimension or color anywhere in the templates: they are all contained within the single Stylesheet which shows at the top of that list of files and to which I shall return in another article.

HINT: Some good-looking adult blog themes are on sale, but take a look at the way they are coded before you buy. Most use tables, producing a horrible porridge of old-style coding mixed with the modern (X)HTML/CSS which WordPress uses. I’m not someone from Planet Geek trying to spread the good word. This sloppy coding not only slows sites down and makes them less search-engine friendly, but should you want to change anything later, you are likely to find the job much harder. If your designer of choice is unable to use CSS, have him do your design and then either convert it to a WordPress template yourself or have someone do that for you.

The first step towards having CSS behave predictably is to include a valid doctype and HTML tag as the first two lines of your HTML. A longer list of all the options is offered by W3C, but the most common are:

If you are coding in HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
...

If you are coding in XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
...

A major pitfall when using CSS is the unwillingness of browser developers to adopt a consistent standard. There are solutions (hacks) to almost all these inconsistencies, but it is easier to avoid them where possible. To this end I recommend beginning every CSS file with some parameters for the whole page.

body {
	margin: 0;
	padding: 0;
	}

If you do want space around your design, just change the values for margin. You can either set a single value to be applied on all sides:

body {
	margin: 10px;
	padding: 0;
	}

body {
	/* top, right, bottom, left */
	margin: 20px 50px 20px 50px;
	padding: 0;
	}

Single Columns

It isn’t necessary to create an overall division to contain the rest of your page, if the whole page is a single column. Nevertheless, something like this means you establish parameters for your page which don’t then need to be repeated several times:

/* in your CSS file */
#wrapper {
	width: 780px;
	/* "auto" will center the block */
	margin: 0 auto 0 auto;
	padding: 20px;
	}
	
	
/* your HTML */
<div id="wrapper">
	All your content goes here
</div>

Double Columns

I am going to use a double column layout to illustrate a complete typical page structure of header, content and footer:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
/*global settings */
body {
	margin: 0;
	padding: 0;
	}
	
/* basic structure */
#wrapper {
	width: 780px;
	margin: 0 auto;
	}
#header {
	}
#content {
	}
.left {
	float: left;
	width: 350px;
	}
.right {
	float: right;
	width: 350px;
	}
#footer {
	clear: both;
	}
</style>

</head>
<body>

<div id="wrapper">

	<div id="header">
		HEADER
	</div>

	<div id="content">
		<div class="left">LEFT COLUMN</div>
		<div class="right">RIGHT COLUMN</div>
	</div>

	<div id="footer">
		FOOTER
	</div>

</div>

</body>
</html>

We haven’t styled the footer block but we did need to include clear: both. Without that parameter, the block would locate itself as high up the screen as possible, which in this case would be between the left and right blocks. Always include clear: both in a block which follows multiple to tell browsers to create it below the longest of the blocks above.

That covers basic page layout for one- and two-column designs. Three-column layouts are slightly more tricky, so I shall cover them separately.

HINT: It is a big timesaver to store code similar to that above as templates for all the basic layouts you commonly use: simply open a file and your page is already part made. I include a little more than shown above - basic fonts, header sizes, link treatment, etc - but only such elements as are always, or almost always used. Indenting code (and I usually leave an empty line between blocks) makes the flow of the code easier to follow, and if you indent every new block and close indents at the end, you will soon see (when your final block close instruction is away from the left of the screen) if you forgot to close a block along the way. Give ID’s and classes descriptive names so that your style file doesn’t become gibberish. Finally, always comment anything in your HTML or CSS which needed special treatment or might otherwise catch you out if you don’t look at the file(s) again for a year.

Update

At the beginning of this article, I mentioned the value of including parameters in a style sheet to account for the differences between browser defaults. For those who are more familiar with the issues involved, here is the set of instructions which I use myself. It pretty much over-rides all the default styling in all the major browsers, leaving you to start with a clean sheet, as it were:

/* clear browser defaults */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
abbr,acronym,fieldset,img{border:0;}
address,caption,cite,code,dfn,h1,h2,h3,h4,h5,h6,th,var{font-size:100%;font-style:normal;font-weight:normal;}
caption,th{text-align:left;}
div{overflow:hidden;}
h1,h2,h3,h4,li{white-space:nowrap;overflow:hidden;}
ol,ul{list-style:none;}
/* global hacks */
body{text-align:center;}

• Bad Behavior stops comment spam before it starts by trapping and blocking spambots before they have a chance to post comments. Use this even if you have comments closed, to prevent direct access to the comments script.
• Chicklet Creators adds RSS feed subscription buttons to your blog
• Dashboard Editor allows you to customise your admin dashboard to speed up loading.
• Disable AutoP is the answer if you find WordPress entering paragraph tags where you don’t want them.
• Duplicate Content Cure is a solution to the concerns some have that the search engines might penalize blogs for showing the same content on multiple pages (index, archives, single, etc).
• Feedsmith (formerly known as “Feedburner Feed Replacement”) this forwards regular feed traffic to the Feedburner version of your feed, while letting some (SE) User-Agents see your feed directly on your site. I strongly recommend the use of Feedburner, as a free way to extend your feeds compatibility and and also to get some useful exposure via Feedburner’s directory. Nice stats too!
• Google Sitemaps Generator will create a Google compliant sitemap of your WordPress blog
• Optimal Title mirrors the function of wp_title() exactly, but moves the position of the separator to after the title rather than before. Much more friendly for those scanning SE directories.
• Page Link Manager lets you choose which pages appear in your site navigation.
• Recent Posts displays a customizable list of recent posts (with/without extracts).
• Related Entries uses full indexing to display a list of posts similar to the one being viewed. Good for visitors, good for keeping older posts exposed.
• Search Everything improves dramatically on the default search script, by allowing pages and comments to be searched if desired.
• Search Meter logs what people are searching for on your site.
• Secure Form Mailer secure php form mailer script.
• Sitemap Generator generates a customizable sitemap containing all posts and pages.
• Sociable automatically add links on your posts to popular social bookmarking sites
• Slim Stat produces useful stats for your blog.
• Spam Karma stops all forms of automated blog spam effortlessly, while remaining as unobtrusive as possible to regular commenters. Combined with Bed Behaviour (above) Spam Karma will allow you to keep comments open, unmoderated and yet free of spam.
• Tiger Admin changes your WP Admin interface to a quicker and more friendly version. Only works with fully CSS2-compliant browsers.
• Ultimate Tag Warrior allows tags to be used either as a navigation aid and/or for SEO. Tons of functions, not such great documentation.
• WP-Cache is a very fast cache module which can manage the whole sites. Once installed, make sure it is working, otherwise your blog will actually run more slowly.

This solution (I should probably be crediting someone with it, but it’s cobbled together from observation and experience over the years) is the one to use when search engine appeal is your priority. It has a major drawback, which is that unless you can dispense with a footer, you must know which is going to be the longest column. Your page will look horrible if you get it wrong. Nor does it attempt to equalize the columns, so if your design demands that they appear to be the same length, you will have to resort to the use of a background image to fake your columns (aka “faux columns”).

Otherwise it is a very neat solution which uses only one CSS “hack” (to compensate for Explorer’s strange treatment of margins). Tested in IE6 and FireFox, it provides fixed-width columns for navigation or whatever, plus a fluid center column which expands and contracts to fill whatever resolution your visitors are using. You may copy the code below and adapt it for your own use.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>3-Column, Search-Engine Friendly Layout</title>
<style type="text/css">
/* globals */
body {
	margin: 10px;
	padding: 0;
	background: #FFFFFF;
	font: 12px Verdana, Geneva, sans-serif;
	color: #000000;
	}
p,pre {
	margin: 0 10px 10px 10px;
	}
h1 {
	margin: 0;
	padding: 10px;
	font-size: 14px;
	}		
			
/* structure */
#header {
	height: 40px;
	}
#leftcolumn {
	position: absolute;
	left: 10px;
	top: 50px;
	width: 200px;
	}
#centercolumn {
	margin-left: 200px;
	margin-right: 200px;
	padding-bottom: 10px;
	}
#rightcolumn {
	position: absolute;
	right: 10px;
	top: 50px;
	width: 200px;
	}
*html #rightcolumn {
	right: 9px;
	}
#footer {
	height: 40px;
	}

/* fonts etc */
#leftcolumn p, #rightcolumn p {
	font-size: 10px;
	}
</style>
</head>
<body>

<div id="header"><h1>3-Column, Search-Engine Friendly Layout</h1></div>

<div id="centercolumn">
<h1>centercolumn</h1>
<pre>
#centercolumn {
margin-left: 200px;
margin-right: 200px;
padding-bottom: 10px;
}
</pre>
<p>The big plus of this layout is that, within your HTML, the columns can appear in any order, which means you may place your most content-rich block at the top of your code: the best place for search engines to find it. But it also has a serious limitation, namely that unless you can dispense with a footer, you must know which is going to be the longest column and adjust the code accordingly. In this example, the center (content) column is assumed to be the longest.</p>
</div>

<div id="leftcolumn">
	<h1>leftcolumn</h1>
<pre>
#leftcolumn {
position: absolute;
left: 10px;
top: 50px;
width: 200px;
}
</pre>
</div>

<div id="rightcolumn">
	<h1>rightcolumn</h1>
<pre>
#rightcolumn {
position: absolute;
right: 10px;
top: 50px;
width: 200px;
}
*html #rightcolumn {
right: 9px;
}
</pre>
</div>
<div id="footer">
	<h1>footer</h1>
</div>
</body>
</html>

In this example, we want a 10-pixel margin around the page and we have a 40-pixel tall header. Thus the left column is placed 10 pixels from the left of the screen and 10+40=50 pixels from the top. The right column is placed according to the same principle. If your header is a different size, or you want different margins or column widths, just change the numbers accordingly.

Because the center column is intended to be fluid, no width is stated for it, only left and right margins, which in this example, are the widths of the side columns (200 pixels). If you want to create a space between the center column and those on either side, simply increase the size of those margins.

And that is all there is to it. In another article I shall cover a less finicky 3-column layout, albeit one with less SEO appeal.

I don’t like having to remember to put left and right margins on every element, so that paragraphs and the like do not butt up against column borders. Therefore normally I would use padding applied to the block as a whole. However, because that introduces cross-browser compatibility issues which would have confused this presentation, I decided to sidestep them here and leave that topic for another article.

One of the easiest ways to see how a template is structured, is to open the Main Index Template in my HTML editor and replace sections like <?php get_header(); ?> with its template. Once I have done this for header, sidebar and footer (in the case of this theme), I can look at the code of what would be a complete page in my blog. Then I paste the whole thing onto a new page and strip out everything which is not related to the basic page structure. What remains in this case is:

<div id="container">

	<div id="content"></div>

	<div id="right"></div>

	<div id="footer"></div>
	
</div>

Now I can open the stylesheet (style.css) and see how those blocks are handled (I have removed references to fonts etc to simplify this illustration):

#container {
width:950px;
}

#content {
float:left;
width:700px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 0 10px;
}

#right {
float:left;
width:180px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 10px 10px;
}

#footer {
width:700px;
border-left:#999 1px solid;
margin:0 0 20px 20px;
padding:5px 0 5px 10px;
}

The whole structure is held within the 950-pixel container block. There is no header as such, just an h1 tag. The content block is 700 pixels wide and the right is 180 pixels wide. Both have 10 pixels left-padding and 20 pixel left-margin. There are also two 1-pixel borders, so the total width of the layout is 700+10+20+180+10+20+1+1=942 pixels, leaving 8 pixels as a right margin.

180 pixels is a fairly common width to use for a sidebar, so we shall stick with it. The new sidebar will therefore need 180+10+20+1=211 pixels. To keep this illustration simple, we will not change the overall width, so to accomodate the new block, the width of the content block must be reduced by 211 pixels (to 489 pixels). With this design, the footer is not full-width, so it must also be narrowed to 489 pixels and for safety, scan through the stylesheet looking for any elements within the content block which are greater than this width. This theme has a textarea which is 500 pixels wide, so reduce that to 400 pixels.

The easiest way to create the second sidebar is to open the original in your editor. Since we are only working on the structure right now, we can ignore the content. All we need to do is change the <div id=”right”> at the very top of the file to <div id=”right2″>, then save it as sidebar2.php. FTP the new file to your server into the theme directory and CHMOD 666 it for editing later.

To recap, in the stylesheet we have changed #content { width:700px; } to #content { width:489px; }, textarea { width:500px; } to textarea { width:400px; } and #footer { width:700px; } to #footer { width:489px; }, we have created and uploaded sidebar2.php. Since we have created a new block - #right2 - we need some styles for it. Again, since this is about structure and not design, locate the block of #right parameters in the stylesheet, copy and paste them below their original position and make them all refer to #right2 thus:

#right2 {
float:left;
width:180px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
border-left:#999 1px solid;
margin:0 0 0 20px;
padding:0 0 10px 10px;
}

#right2 h3 {
font-size:14px;
margin:20px 0 5px 0;
}

#right2 a {
color:#222;
text-decoration:none;
border-bottom:#ccc 1px solid;
}

#right2 a:hover {
color:#222;
text-decoration:none;
border-bottom:#777 1px solid;
}

#right2 ul {
list-style:none;
}

#right2 ul ul {
margin:5px 0 0 10px;
}

#right2 ul ul ul {
margin:5px 0 0 10px;
}

#right2 ul li {
padding:0 0 5px 0;
}

Paste the revised stylesheet over the one WordPress is currently using and finally call up the Main Index Template. Scroll to the very bottom and above the line <?php get_sidebar(); ?> add <?php include (TEMPLATEPATH . ‘/sidebar2.php’); ?>. This is the result:

And with that under your belt you are well on your way to creating your own, original templates.

In case you attempt this exercise using the same Journalist theme, be aware that I cheated slightly. The theme includes a stylesheet called style-ie.css which has a couple of hacks for coping with Explorer’s vagaries and those hacks include dimensions which will need changing in line with this article. Since a second stylesheet is fairly unusual and this article is for the illustration of general principles, I did not want to clutter it with such details.

There’s no doubt that adult webmasters on the whole are a hard-working bunch of people. We are pretty good at making use of lots of scripts and other tools to help us be productive. But while we play the role of laborer very effectively, we aren’t nearly as good at being bosses. Most of us are action driven: we work long and hard, learning as much as we can about the practical aspects of our business. We are happy if we earn more this month than last and when that doesn’t happen, we work a bit harder, hope for better days, and if all else fails, there is always the latest bandwagon to try out.

Think about it. Who is usually paid more: the CEO or the worker on the production line? Who earns more for their business? Now ask yourself if it really makes sense to spend all your time on the production line.

To be successful, you must be results driven. You should not spend a moment on anything without knowing why you are doing it, what you expect from it, and how long it will take you to produce the desired results. You need goals. In this context “I want to be rich” is not a goal: a 5% earnings increase over the next month is a goal.

Here’s a challenge. Finish work a couple of hours early today and try this:

• Write the names of the next 12 months as headlines across a wide sheet of paper.
• Ignore the two best and two worst months of the last 6 months, average your income for the 2 months which remain and write that number under each month. Total the 12 months.
• Now put some thought into adjusting those figures, to account for any seasonal variations you perceive in this business. You might possibly show increases in October and November, decreases in January, February, June, July and August. Juggle the numbers until they reflect your experience, but the total for the year should be the same as in the first line.
• More thought next, combined with a healthy dose of realism and a good measure of ambition. Knowing everything you do about the market, its competitiveness and opportunities, and about yourself, your skills and drive, how challenged you are currently, adjust the monthly numbers further to reflect what you feel is an attainable growth rate through the next year.
• Take a hard look at the numbers you have produced. A 5% month-on-month increase may seem very modest but it represents more than 70% over the year. If you honestly believe you can achieve that (or even more), go for it. But be realistic, because the next job is to figure out how to achieve the targets you have just set.

The first reason for having specific targets related to specific timelines is so that you do not sit down on the 1st of the month and beaver away for the next 4 weeks, hoping for the best. What are you going to do to ensure you meet your targets?

The answer depends on your situation. Maybe you need to monitor your sponsors more carefully and find some new ones. Maybe some of your promotions are weak and need tightening up or replacing. Maybe you need more traffic. New sites. There are lots of possibilities. The point is that in an increasingly competitive market you must drive your results, not expect them to happen simply because you put in a lot of hours.

Once you have targets and you have figured out how to achieve them, it should be easy to produce a to-do list. At least for the upcoming month, better two, note down the broad steps you will have to take to see your plans through. Then, working a week or two in advance in more detail, fit that work into your daily schedule.

Where are we so far?

• We have financial targets set for each month of the next year.
• We have broad plans for the whole year as to how to reach those targets.
• We have a lot of the practical details worked out for the next month or two.
• We have specific tasks to complete during this week and next, and we have fitted those tasks into our daily schedules.

All that sounds easy enough. The snag is that if you take this seriously and you are already working your ass off, it is probably difficult, maybe impossible to commit yourself to more work. If you have come to that conclusion, this exercise is already paying off, because in real life you can only get a pint into a pint glass. Instead of working without a plan, introducing new things often more in hope than expectation and - perhaps without realizing it - letting proven revenue producers slip, this exercise is forcing you to think. What shall I have to spend less time on to free up the time for these new tasks? What will that cost me? Since I shall have to increase the targets for the new projects to make up for such losses, are those targets still reasonable?

If you took up this challenge and got this far, the final benefit is that you will be able to review each day, each week, each month, and see whether you accomplished everything and if the money is pouring in as you hoped. If yes, pat yourself on the back. If not, what are you going to do about it? Either way, now you are the boss, actually in charge of your business. Get it right and you will be paid the big bucks :)

The first step in a “makeover” like this should be to validate the document in its present form. This one had only a few errors:

1. Two title tags.
2. Character-set meta tag appears twice.
3. The header image has no alt tag.
4. In the full version of the original, a div id (largelinks) was used multiple times. ID’s must be unique: use “class” where a style is going to be repeated.

Although not directly related to this exercise, I changed the document’s character set to UTF-8 (Unicode). I don’t want to go off at a lengthy tangent (you can read more about Unicode here), enough to say that ASCII, Latin 1 (ISO 8859-1), etc., are deprecated these days. Use this instead (note the space and oblique used to close the tag):

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Another change I made not directly related to the main point of this exercise, was to remove the bookmark javascript script into its own file, because it is search engine friendly to keep your head section to a minimum. That is one reason for creating a separate stylesheet file, the other being that if it is read in separately, the file will be cached, which makes subsequent pages of multipage sites load faster.

The value of converting to XHTML as part of a makeover is debatable. XHTML fans argue that you are future-proofing your work and since CSS behaves slightly differently, why be forced to learn these differences later and perhaps have to change some of your code? My view is that several scripts these days (notably blogs) default to XHTML, thus whatever the future may hold, it is easier to tackle a single HTML/CSS combo for everything. Fortunately, very few coding changes are required for XHTML:

1. Change your doctype and html tag to:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   <html xmlns="http://www.w3.org/1999/xhtml">
   

   Here is an in-depth discussion of doctypes.
2. All tags must be in lower case. I changed the case of the keyword and description metas and also applied the space+oblique to close the tags properly (compare the two source codes). I also had to convert the p (paragraph) tags to lower case.
3. The target tag in the head must also be closed with space+oblique (be aware this tag works but is not part of the XHTML convention).
4. Search and replace all <br> tags making them <br />.
5. Change all image tags to end with that space+oblique.
6. All dimensions and tag parameters must be enclosed in quotation marks.
7. Although some HTML editors allow it, putting actual symbols (such as the copyright mark) into your code is a no-no because they may not display correctly (the copyright symbol of the original showed as a question mark in my browser). Use entities instead such as &#38; for ampersand: this page at Pemberley includes an entity table.

Now the CSS. Here is the new file with comments:

/* 18sweeties */
/* There may be nothing in a style file to remind you to what it
belongs, so give it a title */

/* Some will tell you to lay out your CSS file strictly separating structure and fonts/colors. That can be very confusing for CSS novices, so here I have placed the page-wide parameters first and the rest in page order */

/* globals */
body {
	/* for cross-browser compatibility always state the overall margin */
	margin: 0; 
	 /* include MAC fonts */
	font: 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	background: #fffee8;
	color: #000; /* set a font color to be safe */
	}
img {
	/* use this and you don't need border="0" in any of your image tags */
	border: 0; 
	}
a {
	font-weight: bold;
	/* when colors are represented by 3 pairs, 0000ff, they can be shortened */
	color: #00f;
	text-decoration: underline;
	}
a:hover {
	/* it is not necessary to repeat parameters which will be inherited so only a color change is needed here*/
	color: #5454ff; 
	}
	
/* I always include this fix for a problem Explorer has with short divs. It is sometimes necessary to name the div, but this avoids that a lot of the time and if it isn't needed, (usually) doesn't hurt */
* html div {
	height: 1%;
	}
	
/* in page order for ease */
/* div align=center was used in the original document but is not compliant with current standards so this div was used instead */
#header {
	/* 17px represents top/bottom and auto left/right. There is no need to specify all four measurements when the pairs are the same */
	margin: 17px auto;
	text-align: center;
	}
.wrapper {
	width: 769px;
	margin: 0 auto;
	/* no need to specify left, top, etc borders when all are the same */
	border: #c103ff 2px solid; 
	background: #f9e6ff;
	}
/* check out the source code: all that was needed to replace the table holding the thumbs was a width-restricted container (wrapper, above) and a margin around the images */
.thumbtable img {
	/* replaces the cell-padding used in the original file */
	margin: 2px; 
	/* placing image dimensions here means no need to include them in HTML */
	width: 120px;
	height: 160px;
	}
/* when different style class have the same parameters, save code by combining them in a comma-separated list */
a:link img, a:visited img { 
	border: #cc0033 2px solid;
	}
a:hover img, a:active img {
	border: #cc0033 2px dashed;
	}
/* technically we could have given a class to the paragraph tag used originally but using a div here is more semantically correct */
.bookmark { 
	margin: 15px auto;
	text-align: center;
	}
.largelinks {
	font: 16px Arial, Helverica, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
	}
.largelinks a {
	font-size: 24px;
	color: #ed145b;
	line-height: 28px;
	}
.largelinks a:hover {
	color: #00497e
	}
/* lists such as trade links need not be displayed vertically and can be given specific widths */
ul.largelinks {
  	width: 769px;
  	margin: 15px auto;
  	padding: 0;
	list-style: none;
	}
ul.largelinks li {
  	float: left;
  	width: 33%;
  	margin: 0;
  	padding: 0;
	text-align: center;
	}
/* these next lines cleaned up a mix of paragraph tags and spaces */
/* after multiple columns, in this case the inline list displaying trade links you must tell browsers when you want to begin a new block or they will try to create an extra column */
#footer {
	clear: both; /* that is what this line does */
	text-align: center;
	padding: 50px 0;
	}
/* Mozilla browsers and Explorer do not handle "clear" the same way, so we end up with more space than we want in Explorer. The following instruction which can only be read by Explorer and is ignored by Firefox etc., corrects that */
*html #footer {
	padding: 35px 0;
	}
#footer img {
	margin-top: 50px;
	}

The result looks the same in both Explorer and Firefox and just as it did originally. The combined size of the HTML and (uncommented) CSS for the revised version is 5.01KB compared to 6.54KB for the same section in its original form. That is almost a 25% saving, providing obvious speed and bandwidth benefits. Perhaps more importantly, had this been a text-based site, the content to code ratio would have improved dramatically, giving a distinct edge with the search engines.