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.

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

Note: Add your site title and a brief description of your blog inside your WordPress admin.

In WordPress’ theme editor open up the Header file and look for the HTML for the header block itself. Then open up the Stylesheet and look for the CSS relating to the header block and the entries within in. And we hit the first gotcha: this author has separated structure and decoration to the point that he uses two separate CSS files and calls them from within the “official” WordPress stylesheet. This “wrinkle” makes no difference to the principles involved.

In Header (header.php):
<!-- header ................................. -->
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h3><p class="description"><?php bloginfo('description'); ?></p></h3> 
</div> <!-- /header -->


In Stylesheet (style.css):
@import "layout.css";
@import "shadesofgray.css";


In layout.css:

/* reset
--------------------------------------------------*/
body,h1,h2,h3,h4,h5,h6,p,form,fieldset {margin:0;padding:0;}

/* body
--------------------------------------------------*/
body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:75%;
  line-height:1.6em;
}

/* headings
--------------------------------------------------*/
h1 {font-size:30px;}

/* links
--------------------------------------------------*/
a {text-decoration:none;}

/* paragraphs, lists, etc
--------------------------------------------------*/
p {
  margin:0;
  padding:0 0 18px 0;
}

/* header
--------------------------------------------------*/
#header {
  height:150px;
  padding:0 0 0 18px;
}
#header h1 {
 /* display:none; This will hide the text in your header */
  padding-top:50px;
}


In shadesofgray.css:

body {
  color:#414141; /* provides the color for the description line */
}

/* headings  hso: all headings & mouse over
--------------------------------------------------*/
h1, h1 a, h1 p
  {color:#FFF;}
h1 a:hover
  {color:#FFF;}

#header {
  background-color:#fff;
  background-image:url(images/shadesofgray/logo.jpg);
}

The HTML of the header block is very simple. It contains an h1 tag around the blog title which is linked to the site’s base URL. Then there is an h3 tag with a paragraph tag inside it, which holds the description of the site.

Hopefully I have identified all the relevant CSS entries. I tend to feel that while this style of CSS presentation may be technically correct, it does nothing for ease of use. Anyway to summarise: the header block is 150 pixels tall (to match the background image) and it has white (#FFF) as a background color, for those who have images turned off. 50 pixels padding has been applied to the top and 18 pixels to the bottom. As it happens, the choice of background color might be a poor one, because the h1 tag has been set with no margins or padding, 30-pixel font size, no underline, and also white in color. The h3 tag has no margins or padding, the paragraph (p) tag within it has no zero margins but an 18-pixel bottom padding. The site’s description is going to take its size and color from the default body settings and both h1 and h3 will be bold by default.

The most simple change would be to use another image of the same dimensions (690×150) and either overwrite the orginal or save it as you like and change the path in the background-image parameter. We could use a smaller image, say 670 x 150 and give it a colored border:

/* header hso: header backgound color --------------------------------------------------*/
#header {
  background-color:#4E7F01;
  background-image:url(images/shadesofgray/logo.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

Changing colors is easy. Let’s alter the h1 display and give the color of size of h3 specific settings. We shall also have h3 show as non-bold and while we are there, let’s move the text right and down some:

In layout.css add to:
/* headings
--------------------------------------------------*/
#header h3 {
	font-size: 1.4em;
	font-weight: normal;
	}
	
In layout.css:
/* header
--------------------------------------------------*/
#header {
  padding:0; /* change so the lowered text does not push the bottom of the block down */
  }
#header h1 {
  padding-top:100px; /* change from 50 */
  padding-left: 120px; /* add */
}
#header h3 {	/* add */
  padding-left: 120px;
}
#header p { /* add to prevent the block being expanded */
	padding-bottom: 0;
	}
	
	
In shadesofgray.css add to:
/* headings  hso: all headings & mouse over
--------------------------------------------------*/
#header h1 a {
	color: #FF2E37;
	}
#header h1 a:hover {
	color: #FF2E37;
	}
#header h3 {
	color: #4AF017;
	}

The result is hardly aesthetic, but it does illustrate the ease of making changes, providing you approach them methodically. All changes in size, color, positioning (both of foreground text and background image) follow the same principles.

There are two tricks which come in useful if you do not want your image sullied with foreground text, but you want to keep the text in your code for its search engine potential. The first is simply to make it not display, which is easier, but removes the link back to your root URL which – for better or worse – many blog surfers have got used to. The second, although you will need to remove the h3 tag completely for this to work properly, involves moving the h1 tag off-screen while leaving the whole header image linked:

To leave all the text but make it invisible to visitors, in layout.css add:
/* header
--------------------------------------------------*/
#header h1 {
  display: none;
}
#header h3 {
  display: none;
}

To have an invisible h1 but leave the whole header image clickable, in header.php comment out (or delete) the h3 line:
<!-- header ................................. -->
<div id="header">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<!-- <h3><p class="description"><?php bloginfo('description'); ?></p></h3> -->

In layout.css:
/* header
--------------------------------------------------*/
#header h1 {
  /* padding-top:100px; comment out this line */
  /* padding-left: 120px; comment out this line */
}
#header a { /* add */
  display: block;
  height: 100%;
  text-indent: -500em;
} 

That last technique might be most useful when any header graphic already included your site name and other details. The first technique, although easier to implement, might work best if only the h3 tag were rendered invisible. Once you are happy with your changes, delete any code which so far you have only commented out.

Obviously a lot more changes are possible and it isn’t practical to attempt to anticipate them all. The key to making such changes is: first identify the relevant HTML; second identify all the CSS which relates to it; and third, understand what the CSS is actually doing. Initially make changes by commenting parts out rather than by deleting them. Comment what you have changed (I haven’t done this thoroughly here, wanting to keep what you are seeing relatively uncluttered) and test each group of changes before moving on to the next. Nothing is worse than changing a whole page, seeing the layout has been thrown out of whack and not knowing where to start looking for the problem.

WordPress does have built-in spam protection, but not near enough to outsmart the pro spammers. Fortunately there are three popular comment-spam blocker plugins which will do the job. They can be used separately or in combination, and there are other measures you can take.

• Akismet is currently bundled with WordPress. It is an off-site service, storing profiles of spam attempts and checking whether comments posted to your blog match any of these profiles. It works extremely well, but any off-site service introduces the possibility of slowdowns and it is a commercial service. If you use the free version, you get a slower service than those who pay.
• Bad Behavior is a very useful plugin (actually it is also a standalone solution which can be used with any php script such as message boards or guest books). It protects not only against comment spam but also again email harvesters. Its main strength is in blocking automated spammers and it does not protect fully against people with the patience to sit and type comments one at a time. Use this even if you have comments disabled, to prevent direct access to the comments script.
• Spam Karma is another proven suite of scripts which works uobtrusively in the background to block virtually all spam. There are numerous settings which can be tweaked to enhance its performance. Using both Spam Karma and Bad Behavior will allow the vast majority of sites to leave comments open and unmoderated, but still spam free.

One of the hallmarks of bot spammers is that they target older posts because it takes them time to identify posts and harvest the forms needed to comment. Options in Spam Karma (above) cover this, but if you are using another plugin you might find Auto-Shutoff Comments useful. A setting of 15 days will exclude a lot of spam from your site(s).

Using just one or two of these measures, you can block almost all automated spam and a lot of human-entered spam too, while retaining the full advantages of the blog format and its appeal to your visitors. There will be very little spam left for you to deal with by hand. However, you can require comment posters to register and there are some other tweaks available.

For example, in your Theme Editor, open up comments.php and find this:

<?php comment_author_link() ?>
and change it to:
<?php comment_author() ?>

That will stop the comment author’s name being linked back to his site or email address. But before doing this, think about the potential negative reaction of genuine commenters. You can also prevent links in comments being made clickable with either a plugin or by modifying WordPress’ core files, this is even more likely to impact negatively on genuine visitors.

Let’s start at the top and work down:

<div id="sidebar">
<ul>
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>
<!-- Author information is disabled per default. Uncomment and fill in your details if you want to use it.
<li><h2>Author</h2>
<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
</li>
-->

You will find searchform.php in the list down the right of your edit screen and it will need editing separately if you want to change its appearance. Although in the default (Kubrick) theme the author information is disabled, it is actually something blog surfers expect to see, so let’s enable that section and move it to the top.

<div id="sidebar">
<ul>
<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<li><h2>Author</h2>
<p>A little something about you, the author. Nothing lengthy, just an overview.</p>
</li>
<?php } ?>
<li>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</li>

But we don’t want that short bio showing on every page, so as well as removing the comment to enable it and cut/pasting that block higher up, it has been surrounded by if ( is_home()). WordPress has the ability to know which page is being delivered and showing or hiding blocks accordingly. If you think about that ability, it presents options such as being able to display your copyright notice and credits on your main page, but an alternate footer on other pages.

<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<p>You are currently browsing the archives for the <?php single_cat_title(''); ?> category.</p>

<?php /* If this is a yearly archive */ } elseif (is_day()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('home'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for the day <?php the_time('l, F jS, Y'); ?>.</p>

<?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('home'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for <?php the_time('F, Y'); ?>.</p>

      <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<p>You are currently browsing the <a href="<?php bloginfo('home'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for the year <?php the_time('Y'); ?>.</p>

		 <?php /* If this is a monthly archive */ } elseif (is_search()) { ?>
<p>You have searched the <a href="<?php echo bloginfo('home'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives
for <strong>'<?php echo wp_specialchars($s); ?>'</strong>. If you are unable to find anything in these search results, you can try one of these links.</p>

<?php /* If this is a monthly archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
<p>You are currently browsing the <a href="<?php echo bloginfo('home'); ?>/"><?php echo bloginfo('name'); ?></a> weblog archives.</p>

<?php } ?>
</li>

In the next block shown above are conditionals with a vengeance, mainly worth looking over to understand how to build conditionals with more than a yes/no option. But note too that you could highlight this whole block up and either delete it, move it from the sidebar into the main body of your pages, or – for a 3-column design – move it into your second sidebar. In short, the functions in it are not location dependent. Providing you ensure you move the whole block, most blocks will function perfectly well in any template.

<?php wp_list_pages('title_li=<h2>Pages</h2>' ); ?>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

<li><h2>Categories</h2>
<ul>
<?php wp_list_cats('sort_column=name&optioncount=1&hierarchical=0'); ?>
</ul>
</li>

The section of code for displaying links to your blog’s pages, archives and categories (remember these can be deleted or swapped around as you choose) hints at the way parameters can be used with wp_list_pages, wp_get_archives and wp_list_cats (and also with get_links_list in the next section). Each one gets a full page in the WordPress Codex, so rather than turn this into War and Peace, I have linked to those pages. It is worth checking them out because you can narrow what is shown, the order of the display and many other parameters.

<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php get_links_list(); ?>

<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional">Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress</a></li>
<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>

</ul>
</div>

The final section is wrapped in another conditional (which you may remove or change) such that your links list(s) and “meta” links will only appear on the front page. It is quite possible you may want to remove some or all of these meta links (although if you do, be nice to WordPress and move their credit somewhere else) or add others. I do recommend that even if you don’t keep the validator link up once your site is live, you keep it during testing, so that you can check all your pages. And to that end, I would (temporarily) comment out the conditional.

Once you have your layout as you want it, cosmetic changes are made via the theme’s Stylesheet. In the default theme note that there are no special classes anywhere in the sidebar: all the styling is controlled by the single div id=”sidebar” at the top of the code. So when you turn to the Stylesheet, you will be looking for entries such as #sidebar h2 and #sidebar ul, #sidebar ul ol plus whole blocks like /* Begin Sidebar */. If your editor can search on #sidebar that is one of the surest ways of locating all the relevant entries.

Always remember to keep a clean copy of your theme’s files so that you can back up and check each change as you go along, rather than making lots of changes at once. If you bear those thoughts in mind, I strongly recommend you move things around and play with the styles, just so you can see the effect of each change and get used to how it all works.

The first type is just graphics in place of the text links to your own feeds that most themes provide. Blogging scripts routinely auto-generate RSS feeds and if you decide you prefer graphic links to text, grab an appropriate image and insert it into your templates the same way you have always added images to HTML.

Next come the “social” chicklets, so-called because they allow your visitors to bookmark articles in their social network. But unlike regular browser bookmarks, social bookmarks generally work online and are public. So if your site gets social bookmarked regularly, scores a high rating or a favorable comment, other people in that network may come and check you out, adding their own bookmarks, ratings and comments in turn. If you are lucky, you could even get someone blogging about your site.

Obviously this group of chicklets need special links to function properly and why insert them manually around your templates, when they can be placed automatically. Plugin-wise there are quite a few options: the one I like best is simply called Sociable. Installation is the usual procedure: unzip the files and FTP the whole directory to wp-content/plugins and then activate from your Dashboard. Then look under Options –> Sociable to decide which chicklets you want to show and where. That’s a personal choice but don’t overdo them so they become distracting. There are more networks than you are likely to want to provide links to, so either look around to see which are popular, or check out the results of a poll.

If you think regular bookmarking is a good thing to try to persuade your visitors into, the third type of chicklet is like bookmarking on steroids. These chicklets are for those visitors who use services like MyYahoo for their homepage. All they have to do is click on the relevant chicklet and a few seconds later your site’s RSS feeds have been added to their home page. What more could you ask?

The Chicklet Creator plugin works really well for this and includes all the chicklets as well as the code you need. One word of warning on this one: although the code works, it generates invalid output. You may want to install the plugin, validate a page and update the script. It is a simple job of just a few minutes.