I am phasing out the site Pressing Pixels.com and merging all of the content into my existing site Red Letters Studio.com.

I have felt for some time that is was not smart to have all of my most viewed content totally separate from my main site I just never have had the time to do anything about it. Well, I’ve done it. In a couple days all of the links from Pressing Pixels will be redirected over to Red Letters Studio. The content will not change and since it will be easier for me to keep 1 site up to date as opposed to 2 there actually should be more content on a regular basis.

I am still committed to giving back to the WordPress community and want to share what I’ve learned from working with this great software – it will just be a new address.

I am working on an upgrade to the Custom Admin Branding plugin that will hopefully be released in a couple weeks.

Let me know if you have any questions or comments.

Thanks for reading!

I’ll be at WordCamp Chicago this weekend and would love to talk to you! If you have questions or suggestions about the plugins or site I would love to hear them! If you see me, mention that you saw this post and I’ll have a small token of my appreciation for you!

An update is coming soon to the Custom Admin Branding Plugin. I’ve been waiting for WordPress 2.8 to come out before I release it but a few of the changes and fixes you can expect are:

• Your images won’t be replaced anymore when you automatically update the plugin.
• There will be updated modification options for your admin headers.
• You’ll be able to completely customize the login screen – e.g. if you don’t like the rounded box you’ll be able to do something different.
• And much more!

I’ve tried to find plugins that aren’t as well known so hopefully you’ll see something new and cool you can use.

I’ve tried and tested most of these plugins on WordPress 2.5.1 and they all worked great at the time of testing.

As always, the comments are open and is great place for you to share the plugins that make Wordpress work as a CMS for you.

WP Help

WP Help is a plugin that allows an administrator to create a help and or instructions page in the WordPress admin for new users. It creates a top-level menu item that presents a page of content you define to all WordPress users who can access the admin section.

It is very helpful if you create a lot of WordPress sites for clients and you want to give them some simple instructions they can quickly refer to on how to use the site or a particular plugin.

http://pressingpixels.com/wp-help/

Admin Management Xtended

This is a cool little plugin that lets the admin user edit properties of posts and pages quickly without having to open up each individual post/page.

You can change page order via drag-and-drop, change posts/page title, change tags, change comments status and much more.

http://www.schloebe.de/wordpress/admin-management-xtended-plugin/

WP-Add Quicktag

WP-Add Quicktag allows you to quickly and easily add your own custom quicktags to the write panel. I’ve used this to create a button for myself to add in custom classes for images but could easily be used to insert custom code for client installs as well.

http://roel.meurders.nl/wordpress-plugins/wp-addquicktag-plugin-for-adding-quicktags/

FormBuilder

While not as complex or feature rich as some other form creating plugins for WordPress, the FormBuilder plugin is very easy to use and may be exactly what a client install needs.

The Form Builder Plugin for WordPress allows you to build complex forms in the WordPress administrative interface without needing to know PHP or HTML.

http://truthmedia.com/wordpress/formbuilder/

Flexible Upload

Flexible upload enhances the image upload functionality built into WordPress and brings in some much needed features.

It will re-size pictures to upload at the size you specify, insert captions, include watermarks, and will create custom sized thumbnails.

http://blog.japonophile.com/flexible-upload/

Page Category Plus

Page Category Plus allows you to assign categories to WordPress pages, which WordPress in it’s natural state does not do.

This is a great plugin if you need to be able to customize your installation just a little bit more. It gives you the hook in your templates to be able to call pages by category which opens up all sorts of new possibilities when creating themes and sites.

http://www.stuff.yellowswordfish.com/page-category-plus/

Tags 4 Page

Like the Page Category Plus plugin, this plugin brings a feature only in posts to pages.

With the Tags 4 Page plugin you can apply tags to pages. Again, this gives you another hook to use in your development and will bring back additional results when a user is searching.

http://www.michelem.org/wordpress-plugin-tags4page/

Search Custom Fields

If you just want your default WordPress search to search custom fields, then you will be happy with the Search Anything Plugin. But if you want to display a form that will specify what custom field to search by you will want to check out this plugin.

This plugin automatically creates a form with select boxes for each custom field you have created. All of the values for the custom field will be in the select box. You can add and remove the fields it uses in the plugin.

*Warning* The site I originally got this plugin from has been listed on search engines as a dangerous site that contain malware. I’m not sure if this is true or if the site just got hacked. Either way the site is not up anymore.

You can download the plugin here at your own risk. I am currently using it on a site and have had no problems. I have checked the code with the knowledge I have and it appears safe. If any other experienced coders want to give it a clean bill of health that would be helpful.

Again, I’m using the plugin on a large site and have not had any problems.

http://pressingpixels.com/projects/wp-plugins/search-custom.zip

WP CMS

This plugin strips out all the blog functionality of WordPress and leaves admin users with just the ability to create and manage pages.

This could be a great plugin for very simple sites with very simple people needing to manage them.

http://www.gilbertpellegrom.co.uk/wp-cms/

Role Manager

This is a very poplular plugin and no list of WordPress CMS plugins would be complete without it.

WordPress Version 2.0 introduces the concept of Roles. Each Role is allowed to perform a set of tasks called Capabilities. This Plugin allows you to define and manage multiple subscriber profiles – called Roles and their Capabilities.

It allows you to specify what exactly each person can do administratively. There are a number of other plugins that work in conjunction with the role manager plugin as well.

http://www.im-web-gefunden.de/wordpress-plugins/role-manager/

Hide Dashboard

The Hide Dashboard plugin removes the dashboard from the admin. When users log in they will see their profile instead.

Users with Administrator credentials will still see the dashboard.

http://www.deepwave.net/articles/hide_dashboard/

My Dashboard

The MyDashboard plugin is designed to replace the standard, but limited, WordPress dashboard with something a bit more useful, extendable and skinnable.

It is based on the igoogle, Pageflakes and Netvibes style of home page and is designed to be easily extendable and skinnable.

Features include: Drag and drop gadgets, CSS style chages, and standard gagets.

http://dev.clearskys.net/Wordpress/MyDashboard

My FTP

My FTP is a file management Plugin for WordPress that enables a blog administrator to (much like an FTP client) navigate folders and files on the server where their WordPress installation is hosted.

The administrator can then edit, delete or upload files on the fly from within the WordPress administration panel.

It is also possible to create new folders and upload complete directory structures.

I’m not sure how safe this plugin is so use at your own risk.

http://trialsoftwarez.com/wordpress-myftp/

Upload Plus

This plugin let you clean file names from unwanted characters while you upload them.

If you are building a site for clients that requires the uploading of pictures or other files they often will upload stuff with the wackiest file names known to man. This plugin cleans all that up so that there are no problems related to file names.

http://pixline.net/wordpress-plugins/upload-plus/en/

I’ve been using WordPress for client’s sites for quite sometime and most of the time I have to explain how to use the software at least 2 or 3 times – especially if I’ve implemented features using custom fields or special plugins. It would be great if there were a resource that they could always refer to easily while they are in the process of creating.

I came across a plugin that did this but is was not easily updatable and had some issues with a couple of installations. So I’ve improved on it and here is WP Help inspired by Sam Burdge’s wp-instructions.

I have plans to make the editing area more useful. I would love to implement TinyMCE but it doesn’t seem to play well. If anybody knows how to do this please leave a comment.

I’ve also include a sample text file of How to Create a Post in WordPress for you to try out. Just open the text file and copy and paste to the configuration screen.

Download

Wordpress 2.5 v1.0

Installation

1. Download, unzip and upload to your WordPress plugins directory.
2. Activate the plugin within you WordPress Administration Backend.
3. Go to the ‘Help & Instructions’ options page in the ’settings’ menu.
4. Type in the title that you would like to appear on the Help & Instructions page.
5. Enter the content you would like your users to see. You can enter html if you like.
6. Click the ‘update options’ button and you are good to go.

Advanced Options

How to change the title of the main menu tab

1. Open up the plugin file ‘wp_help_config.php’
2. On or about line 16 you will see this code:

   add_menu_page('Help & Instructions', 'Help & Instructions'
   

3. 3. Change the text in the quotes to what you would like your new tab to read.
4. Example: If you want your tab to just say ‘Help’ your line would look like this:

      add_menu_page('Help', 'Help'

5. Save the file and upload back to your plugins folder if necessary

If you would like the help page to be in a sub-menu like ‘manage’ or ‘design’

1. Open up the plugin file ‘wp_help_config.php’
2. On or about line 16 you will see the code:

   add_menu_page('Help & Instructions',

3. Change the text ‘add_menu_page’ to ‘add_management_page’ for the ‘manage menu’ or change the text to ‘add_theme_page ‘for the presentation menu’

Screenshots

The theory behind this is simple really. We’re just going to take some common WordPress logic and apply it to our scenario.

For example, if you were to happen to write a blog about developing with WordPress and most of your articles were focused on plugins and themes it would make sense that the majority of searches done on your site would be for content that related to those categories. So why not present the user with the results from those categories specifically at the top of the search results?

Now, as far as I can tell you can’t just use conditional tags like you would in your sidebar or header like I referenced in my previous article on custom headers.
In those example you get to choose what content to query and display. With search you don’t know what is specifically being queried, unless your name is Carnac the Magnificent…

So the solution is to use multiple loops. If you need to brush up on what the WordPress loop is you can read more here.

Back to our blog scenario. Here is what we want to do. When somebody searches my site I want to present my users with any results from the plugin and theme categories first and then give them the rest of the search results.

So start off with your normal loop.

<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>

Next we’ll check to see if the user’s search query returned anything from our plugin category. The number represents the plugin’s id. You can find this out by going to manage>categories in your WP admin, either hover over the category name in the list and look at the bottom of your browser or click to edit a category and look at the end of the url in your address bar – that is the category id.

<?php if ( in_category('7') ): ?>

At this point you can put in whatever you want to display to the user whether its the title or the post, the excerpt, or the full content. For simplicities sake I’m just going to display the title with a link to its permalink.

<a href="<?php the_permalink() ?>"><?php the_title() ?></a>

Now close out the if statement for your condition.

<?php endif; ?>

And close out the first loop.

<?php endwhile;  ?>
<?php endif; ?> 

Now lets check to see if there are posts returned from the search in the themes category.

We are going to use another loop but in order to get the same set of results from the user’s search query we need to “rewind the posts.” This function allows us to use the same query over again. Here is the code.

<?php rewind_posts(); ?>

And now we just enter the same code for our loop with the conditional category.

<?php while (have_posts()) : the_post(); ?>
    <?php if ( in_category('17') ): ?>
        <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
    <?php endif; ?>
<?php endwhile; ?>

If you have additional categories you would like to feature just repeat.

<?php rewind_posts(); ?>

<?php while (have_posts()) : the_post(); ?>
    <?php if ( in_category('17') ): ?>
        <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
    <?php endif; ?>
<?php endwhile; ?>

Once you are done featuring categories of search results you will probably want to give the user the results that do not fit into your organized categories. We’ll do this by once again rewinding our posts but don’t want to include the results we already have so we need to exclude the categories we featured. The condition we are using checks to see if any posts are in a category and if they are they are skipped the query continues. Here is what the code looks like.

<?php rewind_posts(); ?>

<?php while (have_posts()) : the_post(); ?>
   <?php if (in_category('7')) continue; ?>
   <?php if (in_category('17')) continue; ?>
        <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
<?php endwhile; ?>

Here is the entire thing. I also put in some headings to seperate the content – though you don’t need to do that.

<h3>Plugins</h3>

    <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?>
        <?php if ( in_category('7') ): ?>
            <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
        <?php endif; ?>					

    <?php endwhile;  ?>
    <?php endif; ?>   

<h3>Themes</h3>

    <?php rewind_posts(); ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php if ( in_category('17') ): ?>
                <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
            <?php endif; ?>
        <?php endwhile; ?>

<h3>Other Results</h3>

    <?php rewind_posts(); ?>
        <?php while (have_posts()) : the_post(); ?>
            <?php if (in_category('7')) continue; ?>
            <?php if (in_category('17')) continue; ?>
                <a href="<?php the_permalink() ?>"><?php the_title() ?></a>
       <?php endwhile; ?>

This article will begin a series of articles showing practical and real world examples on how to use conditional tags within WordPress.

So for starters let’s review what exactly a “conditional tag” is. According to the WordPress Codex:

Conditional Tags can be used in your template files to change what content is displayed and how that content is displayed on a particular page depending on what conditions that page matches. For example, you might want to display a snippet of text above the series of posts, but only on the main page of your blog.

So basically WordPress has built in a system of tags that checks your code for specific conditions. If a condition come back as “true” one thing happens, if it comes back as “false” something else happens.

In today’s article we are going to work on a site to allow the home page to have a unique header from the rest of the pages. You can see the article in action on the Pressing Pixels demo site.

The demo site we’ll be working with is using the theme “The Morning After” which is a brilliant free magazine style theme from Arun Kale. You can download it here.

In you look at the Morning After theme on Arun’s site you’ll notice that the theme has a standard sized header logo and image header for every page. I would like to have a larger and unique logo on my home page that is different than all the rest of the pages.

I won’t go into great detail but I had to do some work initially in the template styles and layout to make my images fit. This will obviously be different for each theme you are working with and is not critical to fulfill the purpose of this article.

• I removed the “top banner” div from the home page and page templates
• I moved the “page title template tag” into the body of the page template
• I floated the right column right and the left column left. I also had to move the right column div in front of the left in the home page template so that it would flow correctly

With that done all that was left was to add in the conditions that would determine which logo went to which page.

Here is the code in its entirety (If you’re looking at the source code on the demo page you’ll notice I’ve removed a few of the custom style classes here to make the example cleaner). We’ll break it down in second.

<?php if (is_home() ) { ?>

<div id="logo_home">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" /></a>
</div>

<?php } else { ?>

<div id="logo_other">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo2.png" /></a>
</div>

<?php } ?>

Okay, lets break it down.

In the header.php file I started out with the simple conditional tag “is_home”.

<?php if(is_home() ) { ?>

This particular tag checks to see if the page is the “home” page.

The home page can be defined in a few different ways. If you have a standard installation and have not changed any settings. The home page is your blog address (URL) as defined in your WordPress general settings. You can change this in the reading settings to set the “front” or “home page” to be something different.

Whatever your particular case, the “is_home” tag refers to this page.

Notice that the tag includes “if”. This is the piece that tells WordPress to look out, because it has some options to choose from.
Also notice that the code ends with an opening brace.

 {

The conditions fit inside of these braces. Every condition you create (and you can create multiple which we’ll discuss in a later article) must be inside opening and closing braces.

So once we’ve checked to see if this is the home page we can enter the code for what we want to happen if that condition is true. In this case, if our user is on the home page I want them to see a little larger logo. So lets stick that in the code.

<div id="logo_home">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo.jpg" /></a>
</div>

Now since we’ve checked to see if the condition is true (whether or not we’re on the home page) we need to define what happens if the condition is false. We do that by using “else”. Here is the code and notice the closing and opening of the braces.

<?php } else { ?>

The next step is to put in the code for what we want to happen if we are not on the home page. And since we have not defined any additional conditions this next snippet of code will appear on every page that is not the home page.

<div id="logo_other">
     <a href="<?php bloginfo('url'); ?>">
      <img src="<?php bloginfo('template_url'); ?>/images/logo2.png" /></a>
</div>

The only differences are the id of the container div and the name of the logo file. I had to give them different div id’s because the heights of the respective logos were different and I wanted to define that in my style sheet.

The very last thing we need to do, and this is a step often forgotten is to close out our last condition with a closing curly brace.

<?php } ?>

And that’s it. This technique obviously does not just apply to header logos but with anything you would like to do uniquely on the home page.

The next article in the series will cover how to use multiple conditions.

My end goal was to have a product page that would display thumbnails of related accessories with links to those accessories.

The solution I choose was to use tags. Tags? I didn’t know you could tag pages? Well, out of the box you can’t, (not sure why) but there is a decent plugin called “tags4pages” that will add the tagging field to pages.

With that plugin installed all I have to do is go into an accessory page and in the tags section put the title of the product page the accessory should be related to. The cool thing about using tags is that I can relate this accessory to as many products as I need to. It is also very easy to disassociate an accessory – just delete the tag!

Now, I admit there are probably easier ways of doing this but it worked for me. Use the logic below at your own risk…

So now comes the fun part. How in the world can I wrangle the code to display only the accessories with tag’s that match my main product’s title?

I’m working in the default ‘page’ template in my WordPress theme but this would work for any page template.

Make sure you are not working in the current page’s loop. Look for this code and start after it:

<?php endwhile; endif; ?>

We need to get the title of the current page.

<?php $tag = get_the_title(); ?>

Notice that you need to put ‘get_’ before the WP title tag. This allows you to put the page title in a variable – otherwise it would just print it on the page.

Next, we need to query our posts to come back with the appropriate pages (in our case all the pages that have the tag of our title).

<?php query_posts("showposts=5&tag=$tag"); ?>

This is the code written in English.
“Please (its always good to be polite…) show me the five most recent posts or pages that have the tag I defined in my previous code snippet.”

That gets us our pages now we have to display them. In my case I just want to display thumbnails with a link to the accessory page. I’ve chosen an easy route to get the thumbnails and in this example they are not explicitly tied into the WP database (in other words, I’m cheating…).

I have a folder of images inside my main template folder where every image has the same name of its product page.

Let’s get our loop going.

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

Now lets grab the image thumbnail and link it.

<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_url'); ?>/images/accessory_thumbs/
<?php the_title() ?>.jpg" alt="<?php the_title() ?>"
title="<?php $image_title = get_post_meta($post->ID, "image_title",
$single = true); echo $image_title;?>" /></a>

Here is the code explanation:
I’m grabbing the image from the “accessory_thumbs” folder which is in my current template folder (hence the “template_url”). The actual file name is the same as the title of the page so I can use the WP template tag to get this. I’m also using the title template tag as my alternate text.

The last thing I’m doing is putting a title on the image so that when someone rolls over the thumbnail a little context box pops up to let them know what this accessory is. I’ve done this using a custom field. On the accessory page I’ve created a custom field called “image_title” with a short product description. The code you see above is getting the custom field “image_title” from the current post and displaying it.

End your loop and you are good to go!

Here is the full code snippet.

<?php $tag = get_the_title(); ?>

<?php query_posts("showposts=5&tag=$tag"); ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<a href="<?php the_permalink() ?>">
<img src="<?php bloginfo('template_url'); ?>/images/accessory_thumbs/
<?php the_title() ?>.jpg" alt="<?php the_title() ?>"
title="<?php $image_title = get_post_meta($post->ID, "image_title",
$single = true); echo $image_title;?>" /></a>

<?php endwhile; endif; ?>

And for all you counters out there, I know there are actually twelve but the last two aren’t free and 10 sounds much more round in the title…

Admin Menu Drop Down

Hate clicking around to get to an option page buried deep in the Wordpress Admin soil? Me too.

This is typically the very first plugin I install. When developing with Wordpress you spend a lot of time jumping back and forth in the WP admin menu and this plugin saves you a lot of clicks. And if you are behind a slow corporate firewall it saves you a ton of time from the unnecessary page loads. Get this plugin!

2.5 compatible: Yes
Plugin page: http://planetozh.com/blog/my-projects/wordpress-admin-menu-drop-down-css/

One Click Install

If the Admin Drop Down Menu plugin the first thing I install this plugin is a close second and sometimes first…

This is an amazing plugin that can eliminate the downloading, unzipping, uploading circus that one must go through for each plugin he wishes to install. With One Click you can copy the link to the zip file, paste it in the admin page, click go and your plugin is uploaded, unpacked and installed. You just have to activate it. Get this plugin!

2.5 compatible: Yes
Plugin page: http://anirudhsanjeev.org/oneclick-plugin/

Activate All

If you have a directory of plugins you use all the time for specific installs it may actually save you time to upload all at once and use this plugin.

Once this plugin is activated it takes a stroll around the plugin folder and activates everything it can get its hands on with no additional work for you.

2.5 compatible: Yes
Plugin page: http://mass-automation.com/2006/10/19/activate-all-of-your-wordpress-plugins-with-one-click/

The download page on the site doesn’t seem to be working at the moment so I’ll post my zip file of the plugin here. Please check the authors site first before using this one. If the authors download comes back I’ll remove this link.

Plugin Central

If this plugin and the One Click Install plugin could mate and have a love child, Wordpress plugin life would be sweet indeed.

Plugin Central allows you to automatically update all of your plugins and install new plugins from the dashboard. It also generates a list of all plugins and active plugins from its settings page.

The only downsides to this plugin is that there is a giant author credit right at the forefront of the dashboard which may not be professional for some client installs. And in order to install plugins automatically they must be in the Wordpress plugin repository.

(Update) The plugin has been updated. The newest version has removed the author credit and allows you to install files from the url (any zip file should work).

2.5 compatible: Yes – And only WP 2.5
Plugin page: http://www.prelovac.com/vladimir/wordpress-plugins/plugin-central

PHP Info

If you need to know if your eAccelerator is enabled this plugin is for you.

It also gives you other pertinent php and Wordpress specific information.

2.5 compatible: Yes
Plugin page: http://wordpress.designpraxis.at/plugins/phpinfo/

WP-Debug

If you are into writing a lot of php and need to do some debugging because your code just doesn’t seem to work this plugin may help.

(update) The plugin has Krumo bundled with it and you don’t need to be a hard core php developer to use this. The author uses it a lot for theme design. This could be a very valuable time saving plugin.

2.5 compatible: Yes
Plugin page: http://www.siolon.com/2007/wp-debug/

Diagnosis

If you are an information junkie and need to know-it-all, this plugin is for you. It displays all sorts of technical data about the server Wordpress is installed on.

2.5 compatible: Yes
Plugin page: http://nlindblad.org/wordpress/diagnosis

DB Backup

Before you start screwing around with stuff too much you might want to do a database backup.

Don’t come to this site crying when your really cool modified version of the Hello plugin wiped out all your posts from the last 10 years.

2.5 compatible: Yes
Plugin page: http://www.ilfilosofo.com/blog/wp-db-backup/

PHP My-Admin

After you screwed up your database from your awesome new plugin you created you’ll need to access it to delete all of the entries it made.

This would normally be a pain but if you have the phpMyAdmin plugin installed its easy access from your Wordpress admin.

2.5 compatible: Yes
Plugin page: http://wordpress.designpraxis.at/plugins/wp-phpmyadmin/

Site Unavailable

As you are developing the next Bloggie worthy site you probably don’t want the whole world peeking in.

This plugin hides the site and lets the user know it is down for maintenance. The plugin includes a style sheet so you can pretty up the default screen.

The author also credits himself on the unavailable screen which might be unprofessional for some client installs.

2.5 compatible: Yes
Plugin page: http://thefunzone.awardspace.com/wordpress/?page_id=51

Auto-Installer (not free)

While not free this plugin looks like it could be very useful to the right person. WP Auto-Installer allows you to easily create Wordpress blogs with just a few clicks.

2.5 compatible: Should be if you have to pay for it.
Plugin page: http://wpautoinstaller.com/

WordPress Cloner (not free)

WP Cloner scans the settings, plugins and posts of your perfectly configured blog and then allows you quickly configure any other blog with those exact details. It basically copies the configuration of one blog and pastes it onto any number of other blog.

2.5 compatible: Should be if you have to pay for it.
Plugin page: http://wp-cloner.com/

According to Croft a framework is:

“…a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused. The goal here is to allow the designer or developer to focus on tasks that are unique to a given project, rather than reinventing the wheel each time around.”

After reading the article and doing some additional research on the subject I thought it made complete sense. In fact I had been using my own pseudo framework for Wordpress development – using existing Wordpress templates as a layout and coding guide.

My workflow went something like this:

1. Mock up the home page and maybe a couple other pages in Photoshop.
2. Search for a Wordpress theme that has a similar layout to my mockup
3. Evaluate the themes I found for the best semantic seo friendly markup
4. Wrangle the code to insert my images and functions into the site.
5. Rinse and repeat.

One of the advantages in using Wordpress is that there are literally thousands of frameworks already in existence. In fact one could argue that every single theme built for Wordpress is a framework. So how can this help you the Wordpress developer and designer? I’ve compiled a list of themes that in my opinion provide the best frameworks for developing in Wordpress.

Please note. I am in no way advocating blatant copying of stylesheets or markup in anyway. These themes are to be used as a guide

Typography and Semantic Markup

• Copyblogger
• Cutline
• Thesis (not free – but incredibly awesome nonetheless)

Magazine Style

• The Morning After
• Grid Focus

Sandbox and Other Very Flexible Themes

• Sandbox
• Moo-Point
• Sandpress

If there are other themes you have used and loved for a framework let it be made known in the comments!

On a side note, more recently instead of using actual Wordpress themes I’ve been using specific frameworks that you might be interested in taking a look at.

Blueprint is a framework that is very popular. According to its site these are some of its notable features:

• An easily customizable grid
• Sensible typography
• Relative font-sizes everywhere
• A typographic baseline
• Perfected CSS reset
• A stylesheet for printing
• Powerful scripts for customizing your layout
• No bloat of any kind

Another brilliant framework I’ve discovered in the last couple of weeks is 960 by Nathan Smith. One of the main differences between 960 and Blueprint is the size of grid used and how many columns are included. Blueprint has a width of 950px broken into 24 columns. 960 has a width of…wait for it…960px! And it is broken into 16 and 12 columns respectively.

No matter what you use I think most people will agree that having some sort of framework in your workflow will greatly increase your productivity. And at least for me not having to put my limited brain power in those areas leaves it open for more creativity.

With that said, in this article you’ll find examples of good comment sections, a list of tips and guidelines for creating a usable and beautiful comment section and then some additional articles and plugins to help you out.

Ten Ways to Improve Your Comment Section

1. If you want the conversation to flow and read easy, don’t break up the comments with harsh boxes or colors. Use a monochrome color scheme and light lines
2. Separate the user data from the actual comment. Most people really don’t care who wrote the comment they just want to be able to scan the thread quickly and easily. Placing the user data to one side improves the flow and readability.
3. If your commenter’s tend to write a lot, consider using a serif font as it improves readability.
4. Unless your site is focused on design its probably better to have a simpler comment section without a lot of graphics. This will also speed up your load times.
5. Number your comments so that they can be easily referred to in the thread.
6. Use coloring to emphasize or deemphasize elements. For example the date and time of the comment is probably the least important so make it a color that is close to the background color. It will blend in and draw the reader’s attention to the actual comment.
7. Consider the line height. Make sure that that lines of text are not crammed together. Increasing the line height alone can do wonders for the readability.
8. Consider styling the author’s comments differently. Often I’ll be reading a comment thread where a user poses a question to the author that I’m interested in. If the author has styled his or her comments its very easy to find their answer. This is especially useful in long threads.
9. Separate the trackbacks from the actual comments. Nothing is more frustrating while looking for valuable input on subject than to see this in the middle of the thread…multiple times.

   [...some ridiculous line and link to some website who thought this was interesting information...]

   I’ve posted a link to good tutorial on how to do this at end of the article.

10. Number 10 is to implore you to put some thought into the comment section and make the experience for your users an interactive and positive one!

Comment Section Inspiration

Here’s a look at some existing comment sections on some high profile websites that get a lot of comments. I’ve divided them up stylistically.

Visually Interesting

Web Designer Wall
There are small details everywhere that make this comment section fun to look at and interact with.

Veerle’s Blog
This is a good example of someone spending the same amount of time integrating the comment section with the look and feel of the rest of the site.

Jonathan Snook
Snook’s site has one of the best author styles I’ve ever seen.

Hicksdesign
Very innovative visually with the speech bubbles. The speaking/volume icon was confusing however (I thought it was an RSS button)

Clean and Modern

Freelance Switch
The clean lines are very visually appealing and they integrate gravatars very well.

Joshua Blankenship
Consistent and even spacing make the whole thread very easy to follow and read.

Pro Blogger
Great use of space and typography.

Minimalistic

Shaun Inman
Notice how the comment is on the left side of the user information which allows the reader to see the comment first since our natural flow of reading is left to right (unless you read Hebrew…)

31Three
This is the comment section that initially inspired the one you see here on Pressing Pixels. The user data is separated away from the actual comment which makes the thread much easier to follow.

Comfortable and Casual Conversation

Jason Santa Maria
This is one of my favorite comment sections because it makes me feel like I’m in a warmly lit room and I’ve plopped down into a bean bag with a good book. Great use of typography, color and images.

Some Good Comment Tutorials

How to Style Wordpress Author Comments
Separating Trackbacks from Comments on Your Wordpress Blog
Using Gravatars in Wordpress

A Few Good Comment Plugins

Adding Gravatars to Your Comments (the easy way)
Subscribe to Comments