Okay, getting started. Open up your comments.php file. (This tutorial assumes you’re using WordPress as your blogging platform, by the way). Look for your opening OL tag. Using the default theme as an example, you should see something like this about 1/4 of the way down the page:

Depending on how your theme is set up, next you might see the statement within the LI tag which instructs WordPress to echo the comment if it’s approved. We don’t want to go straight into that yet. Instead, we’re going to insert some code telling WP to also check if it’s an author comment. Here’s how it looks in my comments.php file (I removed the Gravatar code for brevity’s sake):

< ?php if ($comment->comment_author_email=="charity@designadaptations.com") echo 'author';
else echo $oddcomment; ?>

This runs a comparison against whatever email address you entered as the administrator of your blog, so be sure you use that one if you want it to work. I you plan on having guest bloggers, you could also add this between echo ‘author’; and else echo:

else if ($comment->comment_author_email == "guest@email.com") echo 'specialguest';

Now you’ll have to add some styles to your CSS. The Web Developer Toolbar for Firefox is incredibly handy for this, because it’ll show you the elusive hooks used in WP’s core code which are used for identifying author comments. If you have it, hit Cmd+Shift+Y (Ctrl+Shift+Y on PC) and hover over a test author comment in your browser to see what I’m talking about.

Here’s how my style sheet looks:

.cite { /*for reader comments */
float:left;
margin:0;
padding:5px;
font-size:1em;
width:120px;}
.cite img{padding-right:5px;}
.cite a{font-weight:bold;}
.comment_content{float:right; width:390px;}

li.author .comment_text{/*for author comments*/
color:#222;
border:solid 1px #69c;
background: #69c url(images/auth_comments.jpg) top left;}
li.author .cite a{color:#333!important;}
li.author .cite a:hover{color:#fff!important;}
li.author .cite .commentmeta a{color:#333!important;}
.author .comment_text p a {color:#fff !important;}

Notice I had to override the inherited rules (from the .cite class) by adding the !important keyword. You may or may not have to do this depending on your styling hooks and how they cascade.

That should be all there is to it! Having your comments visually distinguished from others is not only helpful to readers, but to you as the author if you need to refer back to something you said earlier. ;) It’s also a nice addition to the “curbisde appeal” of your site. Enjoy!

Instead of starting with the standard Loop, we’re going to open a query, like this:


< ?php $my_query = new WP_Query('showposts=1');
while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>


This tells WordPress you only want one entry (the most recent) returned by the query, that there’s more to come, and don’t repeat it. Savvy? ;) Note: this will override any settings you have in the Dashboard for how many posts to display on your home page.

Now you should see some recognizable code calling the post title, meta data, and content, or some variation of these functions:


< ?php the_title() ?>
< ?php the_time('n/j/y') ?>
< ?php the_content(); ?>


Beyond this you may have a call to your sidebar, some ads, or whatever you’ve dropped in. Just be sure to close your query with an endwhile statement (not endif).

Moving down the page to your Recent Entries section, you’ll need to alter the code a bit more. Again we start with a query, this time with however many posts you want displayed:


< ?php query_posts('showposts=5'); ?>


Then, where you would normally call the [standard] Loop, alter it like so:


< ?php if (have_posts()) : while (have_posts()) : the_post();
if( $post->ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>


Depending on how you want your list to appear, you may want to include the title and excerpt, the title and post meta, or all three, but it’s basically going to look like this:

< ul>
< li>< h3>< a href="< ?php the_permalink() ?>">< ?php the_title(); ?>< ?php the_title() ?>< /a>< /h3>
< small class="entrydate"> < ?php the_time('n/j/y') ?>< /small>
< ?php the_excerpt(); ?>< /li>
< /ul>
< ?php endwhile; ?>


Whatever additional content you might have.


< ?php else : ?>
< h2>Not Found< /h2>
Sorry, nothing found.
< ?php endif; ?>

You just created a custom index page which will show your most recent entry in full, along with a list of 5 previously featured entries – all without penalty of duplication. Of course, there’s more than one way to do just about everything in WordPress. This is the only way I know of, but if there’s a better way I’d love to hear it!

Update: Suppose you want to do add a list to your single.php page as well? This can be done with a little less code, using another [foreach] loop:

< h2>Recently Featured
< ul> < ?php global $post; $myposts = get_posts('numberposts=5&offset=1');
foreach($myposts as $post) : setup_postdata($post); ?>
< li>< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?>< /a>< /li>
< ?php endforeach; ?>< /ul>

This tells WordPress to display the titles of the most recent 5 entries, prior to the very latest one (which of course will already be displaying in full in the main content section).

Of the multitude out there, some of the most widely used include:

• Expression Engine
• Joomla
• Drupal
• Mambo
• MODx
• Pligg
• PostNuke
• TextPattern
• Movable Type
• WordPress

I’ve tried 6/10 listed (I’m a test junkie), and spent days on research, installation, configuration, and the learning curve of each before making a final decision. If you don’t have days (or that much patience), this tutorial will spare you from a time-sink.

So where should I begin?

You could Google the term ‘CMS’, or look through any number of CMS review sites, but this is untargeted research and will produce results which are too broad. I recommend starting with your favorite web-related forum. Chances are, someone there has already asked the proverbial question of which CMS is best. I know on Sitepoint alone there are over 300 replies (and 10k+ views) to one thread about choosing a blog platform.

I don’t like forums, what else can I do?

Forums aren’t for everyone, so consider this approach – surf around to see what software your favorite blogs are using. One of the first things I noticed when I started was that SimpleBits was running Movable Type. I also used to frequent 5thirtyone, and saw it was running WordPress. Because the guys behind these two blogs are well-known and respected, I knew they weren’t going to rely on shaky software to manage their sites, so I made note of that.

As you browse, keep track of the sites using the systems you’re interested in. Once you’ve collected a reasonable set of stats (don’t spend more than an hour), check to see which CMS popped up the most.

Sizing up the information

Based on your findings in the forums, OR the stats you’ve gathered, you’ll notice 2 or 3 platforms which stand out. Congratulations, you’ve managed to intelligently separate the wheat from the chaff. Now it’s time to visit each organization’s website and read up. Some things to look for as you move through each site:

1. Is there a solid list of features? Are there screen shots? If not, pass. You don’t have time to figure out what they have to offer if they’re not going to put it right up front.
2. Is there a support forum or help documentation? Don’t even bother unless they have both. Run, don’t walk, to the next site on your list. ;)
3. Is the site easy to navigate? Is the language understandable? If you can’t easily browse the site or understand the info being presented, it’s safe to assume the software won’t be easy to learn either. A CMS is supposed to make your life better, not more complicated.
4. Are there any plugins available? The best systems recognize that they can’t possibly serve every need. Plugins allow you to extend the functionality of the software, and mold it to fit your needs exclusively.
5. Are there a variety of themes? I strongly recommend avoiding any platform that has no themes except the default, unless you’re a pioneering contributor type. The more themes available to learn from and pick apart, the easier it will be to customize one of your own.
6. Are there links to other sites using the platform? This isn’t critical, but it will give you an idea of what others have done with the software in terms of design and possibly integrating plugins.

At this point you should have about 3 hours of research invested – perhaps 1 on the forums (or browsing), and 2 on company sites. Don’t spend more than 4. Choosing software is sometimes a matter of guesswork, and the point here is to move on to actually evaluating it.

By now you should have a good idea what your candidate for the first trial install is. Hopefully, your research was thorough enough that it will be the ONLY install. :) If not, you’ll have at least one fall-back to try without spending any more time on research, and you’ve spent only a fraction of the time I did on selecting a CMS! Rock on.

When I began coding Pink Adaptations, I discovered conditional tags and the power and flexibility they afford. If you’re not familiar, conditional tags are essentially a way to show content based on whether a specific requirement is met.

It’s done by using an if statement (not unlike The Loop). You may have seen this bit of code if you’ve ever looked through the default theme packaged with WordPress:

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

I stupidly ignored this for a long time because I didn’t fully understand its purpose, but this one snippet can be tweaked to display predetermined content not just for the archive page, but also your index, single post, search, Pages, and even custom templates.

For example, on my Themes page, I wanted to show a sidebar blurb about custom theming, a donation option, etc. I didn’t want this info on every page across my site, so I added the following conditional tag in sidebar.php:

< ?php if (is_page('wordpress-themes')) { ? >
	< p>Blah blah blah.</ p>
< ?php } ? >

This refers to the slug of my Themes page, and when the condition is met it displays only the content I specified.

Conditional tags are a very efficient method of controlling various sidebar content for different pages – and how nice to be able to manage all of it from one place! Not to mention the fact that your pages will load faster, since only one file is being called site-wide. :)

p.s. If you copy/paste the snippets above don’t forget to remove the spaces.

Tabbed interfaces are easy to come by. In fact, Smashing Magazine has an excellent list put together. Most appear to be easy to implement, but I’m unlucky when it comes to scripting so I blundered around a bit before I found one I could use without inducing a migraine. I finally settled on domTab, by OnlineTools.org.

Once you’ve downloaded the files, you’ll need to add the script to header.php. If you’re running a WordPress blog, don’t bother copy/pasting the script on domTab’s instruction page. It doesn’t work. Instead, use WP’s bloginfo template tag. The final result should look like this:

< script type="text/javascript"
 src="< ?php bloginfo('template_directory'); ? >/js/domtab.js" >
< /script>

Note that I put the javascript into its own folder (within the theme folder) specifically named js. You don’t have to do this, but I’m picky about file structure. :) Ok, now that you’ve got the script linked, just add your content, and style it up. Because domTab is basically an unordered list, styling is easily done using the class and ID hooks provided. There’s even a sample CSS file in the download which you can use to get started. Here’s a screenshot of what I came up with:

Now, where to put it? The index page is a no-brainer, but I suggest using it as a follow-up to your most recent post. Depending on how your theme is laid out, look for a variant of the following snippet, and simply paste your list in after it (or it’s closing div).

< ?php comments_popup_link('Post a Comment'); ?>

Of course, precise control over content (without manual entry) carries a lot of appeal for most bloggers, so what if you could automate some of the content in your tabs? Tying on a plugin like Top Posts by Category, you could display your most popular entries dynamically. Just call the function from within your list:

< div >
	< h2 >< a name="popular" id="popular">Most Popular< /a>< /h2 >
	< ?php tpbc_list ();? >
< /div >

Edit: (10/12/07) A plugin which works a little better with this idea is Popularity Contest. It can be used to power more tabs, such as most popular by category and/or month, in addition to all time. Using this plugin instead also allows you to configure the TPBC plugin to calculate popularity by most commented, thereby automating another tab. (TPBC can be configured to show popular entries by visits or comments, not both.)

Note: If you c/p any of the code excerpts above, don’t forget to remove the spaces. Oh and be sure to drop in the snippet for preventing the flash before the script renders the content properly (found in the How to Style a domTab section).

Believe it or not, that’s it!