With that in mind, I’ve compiled my definitive list of what plugins you should use with WordPress. All of the plugins that are listed below I have personally used and have experience with. Some of them are already listed in a previous post I wrote about essential plugins for your WordPress website or blog, but the list below is a much more comprehensive list covering more categories.

Note that all the plugin links below are to that plugin’s page in the WordPress plugin directory. By going there, you can not only download each plugin, but you can also find out more information about installing or troubleshooting it.

Administration (a.k.a., Client Pleasers)

• WP Custom Login Form Image – Lets you customize the WordPress login form by using your logo instead of the WordPress logo.
• WP Lite – Simplifies the editing interface by letting you hide “unnecessary” items from the WordPress administration menu (even the Dashboard), along with post meta controls on the Write page. Useful if WordPress is being used by those people who aren’t the most technically savvy.

Authors

• Author Image – Adds author images to your website simply by adding a PHP tag in your theme files. Users can configure their image in their profile.

Blog Organization

• Popular Posts – Displays a list of your blog’s most-viewed posts; the output can be customized in many ways.
• Similar Posts – Displays a list of posts that are similar or related to the current post. The list can be customized in many ways to fit your own blog.
• Top Level Categories – Remove the prefix before the URL to your category page – URL.com/work/ instead of URL.com/category/work/, for example.
• WP-Cumulus – Display your blog’s tags, categories or both using a Flash movie that rotates them in 3D.

Calendars

• Events Manager – Manage event information and event listings on your website through an easy-to-use administrative interface.

Commenting

• Akismet – Checks your comments to see if they look like spam or not; you can review the spam it catches in a separate section from your regular comments.
• Better Comments Manager – Allows you, as the blog administrator, to respond to comments from within the admin panel rather than by going to the website.
• Comment Redirect – Redirect commenters who just made their first comment to a page of your choice.
• Live Comment Preview – The simplest way to get live comment previews on your site, so that commenters can see how their comment will look once it’s displayed on the website.
• Recent Comments – Displays a list of the most recent comments on your website that can be customized in many ways.
• Subscribe to Comments – Lets commenters sign up to receive an e-mail notification when another comment is made to the post they commented on.
• Thank Me Later – Automatically sends an e-mail to your commenters; it’s a great way to say “thanks” to your visitors, and prompt them to further engage with your blog.

Content

• Broken Link Checker – Checks your posts for broken links and missing images and notifies you on the dashboard if any are found.
• Embed Iframe – Lets you embed an iframe into a WordPress post or page. Useful for embedding such content as Google maps, Google calendars, YouTube videos, etc.
• Featured Content Gallery – Used to create a customizable rotating image gallery anywhere within your WordPress site, which can be managed through an easy-to-use interface.
• Improved Include Page – Allows you to include the contents of a static page into a template with several options, such as displaying the page/post title, the full content vs. the excerpt, etc.
• My Page Order – Set the order of pages through a drag and drop interface, rather than using the default method of setting page order.
• Search Everything – Adds search functionality to your website without modifying any template pages.
• WP-Print – Adds a print stylesheet to your website that lets your users print just the content of your post or page.

Excerpts

• Advanced Excerpt – Customize the excerpt length by character or word count, and determine what HTML characters will be displayed in the excerpt.
• Thumbnail for Excerpts – Easily add thumbnails wherever excerpts are shown.

Forms

• cforms – Add multiple forms to your website, which you can insert in sidebars, pages, posts, etc. You can also customize the look, the form fields, and other administrative data.

Images

• Lightbox – Creates a sharp, modern-looking overlay for images when you have thumbnails of an image and want to allow your visitors to view an enlarged copy.
• NextGEN Gallery – Lets you create photo galleries and albums to insert on any post or page through an easy-to-use interface.
• WP-UnitPNGFix – Fixes the PNG transparency problem in Internet Explorer 6.0.

Navigation

• Breadcrumb Trail – Add breadcrumbs anywhere you want in your theme.
• Multi-Level Navigation – Lets you create and style a horizontal drop-down navigation through an easy-to-use interface.
• WP-Pagenavi – Adds a more advanced page navigation system to your blog archives for when you start to accumulate a lot of posts over time.

Search Engine Optimization (SEO)

• All-in-One SEO Pack – Lets you optimize your title and META tags with content and keywords of your choosing, while also helping you avoid the duplicate content found on WordPress websites.
• Google XML Sitemaps – Automatically creates XML sitemaps of your website, which you can then submit to the search engines to help them crawl your website easier.

Security

• Login Lockdown – Adds some extra security to WordPress by restricting the rate at which failed logins can be re-attempted from a given IP range.
• WP Security Scan – Scans your WordPress installation for security vulnerabilities and suggests corrective actions.

Site Optimization

• Database Backup – Back up your WordPress database in case something catastrophic happens to it.
• Shockingly Big IE6 Warning – Shows a warning message to anyone viewing your website in IE 6.0 about why it’s bad to keep using that browser, along with links for them to upgrade to more modern browsers.
• WP Super Cache – Helps you speed up your WordPress website or blog significantly by reducing the workload on your server when someone visits it.

Social Networking

• Sociable – Automatically add links to your favorite social bookmarking sites on your posts, pages, etc.
• Twitter for WordPress – Display your latest Tweets.

Thoughts?

How many of these plugins do you use on your WordPress website or blog, or have heard about? If you already have a WordPress website or blog, or design them for clients, what plugins do you use that I haven’t listed here? Share your thoughts with everyone by leaving a comment below!

(Word of warning: what I’m about to talk is a more advanced topic intended for those who have an interest in building, or working with, WordPresss theme files. I’m assuming that you have at least a working knowledge of HTML, CSS, and PHP in order to understand what I’m talking about.)

What are conditional statements?

Conditional statements are simply some logic that tells the WordPress database what content is displayed (and how that content is displayed) based on what conditions that page matches.

At their most basic level, conditional statements look like this:

<?php if ( ) { ?>
<?php } else ( ) { ?>
<?php } ?>

Basically what this says is that there is a certain condition, and if that condition is met, then display whatever HTML, CSS, PHP, etc. is specified there; if that condition isn’t met, do this instead. So far, so good, right?

What conditional tags can I use?

Within a conditional statement you’ll find what are known as conditional tags. Basically, these little tags call a particular piece of information from the WordPress database. There are conditional tags for most things in WordPress – pages, posts, categories, tags, etc.

The WordPress codex goes into more detail about all of the conditional tags that are available, but some of the most basic and popular ones are:

• is_page()
• is_single()
• is_category()
• is_author()
• is_home()

Using them is pretty simple – you can identify the page/post/category/author by ID number, slug (name), or title. This might make more sense with an example.

Say you want to apply a specific condition to your “About” page. That page has the database ID number “3″, the title is “About Us”, and the slug (name) is “about-us”. You could use any of those in the is_page() condition as follows:

• is_page(’3′)
• is_page(‘About Us’)
• is_page(‘about-us’)

The same applies to all of the other different uses. Say you want some particular links to appear in the sidebar when someone is on a particular category page – let’s say the category is “Apples”, and it has a database ID number “5″. You could use the is_category() condition like this:

• is_category(’5′)
• is_category(‘Apples’)
• is_category(‘apples’)

More complicated uses of conditional statements

Now that you know what a basic conditional statement looks like and what conditional tags are available to use, we can really have some fun incorporating them into your WordPress theme.

Head’s up: this is where it will start to get a bit more complicated. But let’s go through a few examples for you to get an idea of the different ways that conditional statements can be used, and hopefully you’ll pick up the gist of how to use them.

Example #1: Multiple conditions

Let’s say that you have 3 pages on your WordPress website. You want to display an image on one page, some text on another, and nothing on the third.. What would this look like?

<?php if ( is_page('Apples') ) { ?>

    <img src="apples.gif" />

<?php } elseif ( is_page('Oranges') ) { ?>

    <p>This is my text.</p>

<?php } else { ?>

<?php } ?>

This is what I call a multi-conditional statement. Basically this says, “if the page is the page about apples, then display the picture of the apples; if the page is the page about oranges, then display that text; and if it’s neither, then don’t display anything”.

One note about multi-conditional statements: you can have as many different conditions as you want. If you have 20 different categories and want to display 20 different things in the sidebar of each, you can do that – there’s no limit.

Example #2: This OR That

Let’s say you want to display a particular piece of text at the top of a single post OR for a particular category page. What would your conditional statement look like?

<?php if ( is_single('Apples') || is_category('Vegetables') ) { ?>

    <p>This is my text.</p>

<?php } else { ?>

<?php } ?>

The “||” basically tells WordPress to display that content if the the page/post/etc. meets either the first condition OR the second condition. If it doesn’t meet either, then it won’t display anything.

Example #3: Apply the same condition to many things

Let’s say you want to display some text at the top of both the page about apples AND the page about oranges, while not displaying that text at the top of any other pages. What would your conditional statement look like?

<?php if ( is_page(array('Apples','Oranges')) ) { ?>

    <p>This is my text.</p>

<?php } else { ?>

<?php } ?>

This will display the exact same thing as in example #1, and you’re probably asking yourself, what’s wrong with writing it the long way, like I had in that example.

Technically speaking, there isn’t anything wrong with doing it like that. It’s just that combining your conditions is the simpler way of doing things and easier to maintain. Say you want to update the text that’s displayed at the top of both pages. Would you rather update it once, or have to do it multiple times? I’d rather do it just once.

Example #4: Using variables

Variables are another way of calling information from the WordPress database. Often used in plugins and in your WordPress loop, you can also use them within conditional statements.

Let’s say that you want to display in the sidebar a list of links to the sub-pages of a particular parent page, and you want that list to also appear on the parent page as well. What would your conditional statement look like?

<?php if ( is_page('Fruits') && $post->post_parent=="Fruits" ) { ?>

    <ul>
    <li>List item</li>
    </ul>

<?php } else { ?>

<?php } ?>

In this case, we’re using the $post->post_parent variable to say that we’re applying the condition to all the sub-pages of the “Fruits” page, as well as the actual parent page itself, which we’ve identified with the other condition.

Example #5: “Is Not” Conditions

Continuing with our use of variables, let’s say that you want to display an image at the top of all pages that have the “Fruits” page as their parent page EXCEPT FOR the page about bananas. What would this look like?

<?php if ( $post->post_parent=="Fruits" && !( is_page('Bananas') ) ) { ?>

    <img src="fruits.gif" />

<?php } else { ?>

<?php } ?>

Here, we’re using the “&& !” to say AND EXCLUDE the page about bananas from the condition that we’re applying to every other sub-page.

Thoughts?

Using conditional statements within your WordPress theme files is a great way to help cut down on the amount of code that you’re writing when you create a WordPress website. This makes it easier to maintain in the long run, and is a great way to take advantage of the database-driven nature of WordPress.

Do you use conditional statements on your WordPress website, or when you’re creating a WordPress theme for a client? If so, share your thoughts about them with everyone by leaving a comment below!

My recommendations are what I consider the absolute basic things that you need to do as you start working with WordPress. There are a lot more things that you might consider doing and that others have recommended doing – Cenay Nailer in particular recommends 22 things that you should do after installing WordPress, while over at Pro Blog Design they recommend 10 things to do.

A lot of the things that others recommend I’ll find myself doing later in the design and development process. I don’t think they necessarily need to be done the very first time you log in to your WordPress admin panel, which is the perspective I’m coming from.

So without further ado, here’s my list of 8 basic things that you should do right after installing WordPress.

1. Change the admin password

After you’ve installed WordPress and configured the installation, WordPress gives you an automatically generated password to use the first time you log in. This should be a no-brainer, but make sure to change that password to something that you can remember easier.

Never changed a password before in WordPress? It’s quite simple – just go to the Users panel, click on the “admin” user, and scroll down the page to where you can change your password.

2. Enable permalinks

By default, WordPress generates a link using database strings – http://www.example.com/?p=N, for example. It’s not the most usable or SEO-friendly format, which is why most people choose to enable permalinks. That way, links will appear a lot nicer – http://www.example.com/about/, for example.

To enable permalinks, you need to upload an HTACCESS file to the root level of your website, and then give it read and write (0666) permissions, which you can easily do with most FTP programs. Then, go to Settings > Permalinks to enable them in any of the given formats or customize them in your own format.

For more information, including what an HTACCESS file is, read through the “Using Permalinks” page in the WordPress codex.

3. Activate the Akismet plugin

Akisment is plugin that is highly recommended for use on your WordPress website – so highly recommended, in fact, that it’s already included when you first install WordPress onto your server. It blocks spam comments from appearing on your website, which is a big concern, especially if you have comments enabled on your website.

When you activate Akismet, you need a WordPress API key in order to complete the activation. You can get one by registering your WordPress website at WordPress.com, which is different than WordPress.org.

4. Upload and activate plugins

Now might be a good time to install any plugins that you know you’ll need on your WordPress website. You can always add more or remove any at a later time, and of course there will probably still be some configuration that you’ll need to do in order to get everything working properly on your website.

If you’re new to WordPress and don’t know what plugins to install, take a look through my list of essential plugins for your WordPress website or blog for ideas.

5. Customize the login screen

I’ve written elsewhere about the benefits of customizing the WordPress login screen, and it’s something that I like to do for any clients that I build a WordPress website for. It helps make it easier for them to use WordPress, and is a little extra touch that can go a long way towards making the administrative experience more personal.

The method I detailed involves working with the PHP and CSS files that come with the WordPress installation. That’s fine to do if you want a fancier login screen, but the drawback to it is that when you upgrade your WordPress installation, you’ll lose all that work.

I found a nice plugin called WP Custom Login Form Image that I started using instead, which lets you customize the image that you’ll see on the WordPress login screen. This way, my clients will still see their logo on the login screen, no matter how many times the version of WordPress changes.

Why do this here? Because it’s a simple touch that might otherwise be overlooked later on, I think it’s just best to do it in the beginning.

6.  Change the default category

WordPress sets up a default category for your posts called “Uncategorized”. If you don’t want that to display the word “Uncategorized” to display on your website though, you might want to consider changing the name of the category.

This is generally a good idea to do because you never know when you might forget to select a category for your posts – it’s happened to me before, and I personally don’t like seeing “Uncategorized” display as a category on my blog.

There are two ways of doing this, both simple to do:

• Rename “Uncategorized” – You can edit the name of the “Uncategorized” category like you can any other. Simply go to Posts > Categories, and then edit the category name to whatever you want it to be.
• Choose another category as your default – Create a new category with a name of your choosing, and then go to Settings > Writing. Towards the top of the page you’ll see a drop-down menu where you can change the default category to the one you created.

7. Upload your theme files

Now that you’ve taken care of some of the preliminary settings, you’ll want to upload your theme files so that you can really start to design your website.

Use an FTP program of your choosing to upload the theme files to the wpcontent > themes folder. Then, go to Appearance > Themes, and activate that particular theme.

If you’re using an already-developed theme, then your WordPress website should pretty much be good to go. If you’re a designer, this is where you can start developing and testing your design.

8. Make theme files writable

When I’m creating a WordPress theme, I create the files in Adobe Dreamweaver, and then upload them via FTP to the server. After the website is launched and the responsibility for it gets turned over to the client, I have to think in their shoes. Not all them have Dreamweaver or want to use FTP, so they’ll need a way to update those files on occasion.

That’s where the theme editor in WordPress comes in – which in my mind is one of the more underrated tools in WordPress. This is the spot where someone can edit a particular theme file without needing any special software on their computers. (It just assumes that they have a working knowledge of PHP and CSS.)

The one trick is that you need to give write permissions to your theme files in order for them to be editable in the theme editor. You can do this the same way that you do with your HTACCESS file when enabling permalinks.

Thoughts?

After you install WordPress, what are some of the things that you do to get it set up? Are there things you do that are different for a client’s WordPress website as opposed to your own WordPress website? And finally, is there anything that you think should be on this list that I didn’t include?

Share your thoughts with everyone on these questions and more by leaving a comment below!

What you need to know

The way WordPress works, it tries to view each single post using your particular theme’s “single.php” file. Normally when you’re designing a WordPress theme, you would style that file however you want your posts to appear, and that would be the end of that.

If you want to have single posts display differently based on what category they’re in, it requires a slightly different approach. It’s very easy to do – anyone who has at least a basic knowledge of WordPress theme files should be able to do it.

Simply put, all you have to do is create a few additional files, add in some conditional code (which you can copy from below), upload to your WordPress theme directory, and that’s it – you’re good to go!

Step 1: Create the template pages

The first thing you want to do is create the different “single.php” pages for the posts in a particular category. The code in these should be what’s already used in your existing “single.php” file, although this is where you would style things a bit differently for each category by adding images, extra content, etc.

There are two things to keep in mind here:

• Naming conventions – Name the different “single.php” pages in a way that makes it obvious to you which category they’re associated with – “single_categoryID.php“, “single_categoryNAME.php“, etc.
• Create a default page – Call the file “single_default.php“, and then use the basic code in your template for how your posts should be displayed. This is a “fall back” page – you’ll see why in step 2.

Step 2:  Write the conditional code

What ties together the different single post pages that you just created in step 1 is some conditional code that tells WordPress what single post page to use. Put the following (and only the following) in your theme’s “single.php” file:

 <?php post;

if ( in_category('2') ) {
include(TEMPLATEPATH . '/single_category2.php'); }

elseif ( in_category('3') ) {
include(TEMPLATEPATH . '/single_category3.php'); }

elseif ( in_category('4') ) {
include(TEMPLATEPATH . '/single_category4.php'); }

else { include(TEMPLATEPATH . '/single_default.php'); } ?>

Basically, this code is telling WordPress to do two things:

• Check the category – WordPress will check the post to see what category it’s under. If it’s in a particular category that you’ve included in the conditional code above,  WordPress will display the post using the single post page associated with that category.
• Fall back to a default – When WordPress checks the category of a particular post, if it can’t find a single post page associated with that particular category (or if you haven’t created one), it will “fall back” and use the default single post page that you had created.

Note: you can keep adding conditions depending on the number of different single post pages that you need to create – you’re not limited to just three as in the example above.

With this principle, you can also…

The same ideas that we used above to create different single post pages can also be used to create different category pages.

Say you have 5 categories on your blog, and you want each category page to have a different introduction and image on it above the list of posts in the category. According to the WordPress codex page on category templates, all you have to do to make this happen is create separate pages for each category, and just name the files by the category ID – “category-2.php“, “category-3.php“, etc.

What’s happening behind the scenes is that WordPress’s template hierarchy is automatically checking to see if there are different pages used to display a particular category. If there are, it will use them, and if there aren’t, it will fall back to either the “category.php” page (assuming you have it in your theme) or the “archive.php” or “index.php” pages.

Thoughts?

Has anyone tried this method of using different single post pages on their WordPress website or blog? Or, have you just tried my method and have any questions about it (or want to share your success)? If so, share your thoughts with everyone by leaving a comment below!

What is duplicate content?

Simply put, duplicate content is any text on your website that either completely matches, or is similar to, content elsewhere on your website. While there are acceptable kinds of duplicate content – print-only versions of a web page, for example – in other cases people intentionally use duplicate content across multiple domains in an attempt to get more traffic to their website from search engine results.

It’s the latter usage of duplicate content that is the reason Google and the other major search engines penalize you for having it on your website. There’s no way for them to understand the intent of why the content might be duplicate – even if you aren’t duplicating content maliciously – so they just penalize it altogether.

That being the case then, optimizing your website so that it avoids duplicate content is something you need to do if you’re interested in your website’s placement in search engine results.

(For more tips and explanations from Google about duplicate content, read through their page on the subject in the webmasters/site owners guide.)

5 ways to avoid duplicate content

When you install WordPress out of the box, it’s not duplicate content proof – and that especially pertains to your blog posts and how they’re displayed. For example, if you have your category, archive, and home pages all set up so that they display the full text of your blog posts, guess what you have? Duplicate content.

Here are 5 simple changes you can make to avoid duplicate content on your WordPress website:

• Display the full text once and only once – My rule of thumb is that the full text of a blog post should only be displayed on the actual page of the blog post itself. Everywhere else your recent blog posts are listed, you should either have the excerpt appear, or just the name of the post and a link the full text of it. To display the excerpt only, you can either update your theme files, find a plugin to do it for you, or just use the <!–more–> tag when writing your content.
• Fix your page header – You should insert the following code into your theme’s header file to make sure that certain pages (such as the homepage, posts, pages and category pages) are indexed by search engines spiders, while certain others (feeds, archives, etc.) are excluded :<?php if((is_home() && ($paged < 2 )) || is_single() || is_page() || is_category()){
echo '<meta name="robots" content="index,follow" />';
} else {
echo '<meta name="robots" content="noindex,follow" />';
} ?>
• Be aware of comment pagination – In WordPress 2.7, you have the option of separating your comments onto multiple pages rather than lengthening the actual post page. The only problem with this is that for every page of comments, you’re duplicating the content that people are commenting on. This function is enabled by default in WordPress 2.7, so if you don’t have a need for your comments to be paginated, go to the “Discussion” area under settings and uncheck that option.
• Add unique META descriptions to each post – I’ve written about META tag issues in WordPress previously, but the most important META tag to consider here is your description. If you have the same META description on all of your blog posts or pages, that’s duplicate content. I recommend the All-in-One SEO Pack plugin (what I use on this website) because it lets you use your excerpt (or whatever text you want) as the META description, thus avoiding duplicate content.
• Update your robots.txt file – If you don’t want search engine spiders to find unintentional duplicate content on your website, put some instructions in your robots.txt file that tells them what they shouldn’t crawl. In WordPress, that means making sure you exclude your feeds and any other auxiliary pages that duplicate content you have elsewhere. The following code will do the trick – just copy and paste it into your robots.txt file:
  User-agent: *
Disallow: /wp-
Disallow: /search
Disallow: /feed
Disallow: /comments/feed
Disallow: /feed/$
Disallow: /*/feed/$
Disallow: /*/feed/rss/$
Disallow: /*/trackback/$
Disallow: /*/*/feed/$
Disallow: /*/*/feed/rss/$
Disallow: /*/*/trackback/$
Disallow: /*/*/*/feed/$
Disallow: /*/*/*/feed/rss/$
Disallow: /*/*/*/trackback/$

Thoughts?

If you’re a web designer or developer and have a WordPress website (or have built WordPress websites for your clients), how do you help them avoid duplicate content on their websites? Are there any tips or suggestions that I didn’t mention that you feel would be useful to others? Share your thoughts by leaving a comment below!

(If you don’t know what breadcrumbs are and want to find out more about why and how to use them, read through my previous post on the subject, “Hansel and Gretel Would be Great Web Designers“.)

By adding some code

If you feel comfortable working with your WordPress theme’s files, here are 3 different ways to incorporate breadcrumbs into your WordPress website. Choose a method depending on what content you want to use them for on your website.

Simple breadcrumbs for individual blog posts

A post over at WP Hacks details how to make simple breadcrumbs menus using basic PHP template tags. All you have to do is insert the following code into the single.php file wherever you want the breadcrumbs to appear:

<a href="<?php bloginfo('home'); ?>">Home</a> &raquo; <?php the_category(); ?> &raquo; <?php the_title(); ?>

You can style this with CSS to make it look a little nicer; my recommendation is that you wrap everything in a list like as follows, which will give you more options when it comes to styling:

<ul>
<li><a href="<?php bloginfo('home'); ?>">Home</a></li>
<li><?php the_category('') ?></li>
<li><?php the_title(); ?></li>
</ul>

I include the code here because this method is so simple to use. I’ve used it before, and it serves it purpose if you only want to include the breadcrumbs on your blog posts. The only drawback is that there is no flexibility to use it anywhere other than the posts on your WordPress website.

Advanced breadcrumbs for both pages and posts

When you want to add breadcrumbs to more than just blog posts, you need something a little more advanced in order to do that. Here are 2 different methods; both incorporate more advanced code to display breadcrumbs on both pages and posts:

• How to: Breadcrumb function for WordPress
• WordPress Breadcrumbs

With both methods, you just have to copy and paste some code into your functions.php file, and then insert some PHP code into your theme’s files wherever you want the breadcrumbs to appear.

I haven’t tried either one of these out myself, so if someone has used them, or tries them out on their website, leave a comment below and let me know your thoughts.

By using a plugin

If you’re not comfortable editing the code in your WordPress theme’s files, there are plugins available that give you the ability to style and manage them through the WordPress admin section, such as:

• Breadcrumb NavXT
• Yoast Breadcrumbs
• Breadcrumb Trail by Justin Tadlock

I haven’t tried out any of these plugins myself, so I can’t speak from personal experience about how well they work or if one is preferable over another. If you have used one of them or have any feedback about these plugins (or others I didn’t mention), leave a comment about it below.

Thoughts?

Do you have a preferred way of creating breadcrumbs on your WordPress website? If so, share your thoughts with everyone by leaving a comment below!

One of my big selling points about why I want to build a client’s website in WordPress is because it is so easy to use. The last thing I want is to have the client be dissatisfied with the website I gave them because they find don’t find WordPress to be that way. That makes me look bad, and dissatisfied customers generally don’t lead to repeat business or give out referrals to others.

Here are the things that I do to make it easier for my clients to use WordPress.

Customize the login screen

There are a number of reasons as to why you should customize the WordPress login screen, which I covered in a separate article on the topic. But the main one that applies here is the sense of familiarity that you can give a client from the very first moment that they go to manage their content. And since first impressions are everything, not only is it a nice touch on your part as the designer, it’s a potentially invaluable change you should make.

De-Clutter the dashboard

In WordPress 2.7, when you first log in you’ll see the administrative dashboard with all the options for what is displayed on the screen. Fortunately, you can customize what will appear, which is a nice feature that came along in this version of WordPress. Just click on the “Screen Options” tab in the top right corner of the page to make your choices.

Most users who aren’t technically savvy don’t care about such things as WordPress development blog updates, the latest plugins, etc., so you can safely remove them from the dashboard. The goal is to set up the dashboard so that when the client logs in, they’re not overwhelmed with unnecessary information (which might make them intimidated about using WordPress), but rather will see a clean dashboard with only the information they need to see on it.

Create separate users

If multiple people within your client’s business or organization are going to post content, then you’ll need to set up multiple user accounts so that each person can post content on their own. Make sure to select their user level accordingly so that they can only do what they’re supposed to; for a good explanation of the different user levels, read through the page on the topic in the WordPress codex.

The other reason you’ll want to do this is to separate the purely technical and administrative functions (managing plugins, overall site settings, etc.) from the purely content-related. What you’ll end up with is the default admin log-in, which could be used by whomever is managing the website as a whole, and then the separate user log-ins.

Just don’t forget to give a list with all of the user ID’ s and passwords to the client, so that they can distribute them accordingly.

Advise them of updates/upgrades

Working with WordPress means that there will occasionally be the need to upgrade something on their website – either a plugin or the actual version of WordPress itself. Although upgrades aren’t necessarily a bad thing, from a client’s perspective they might get nervous that what they’ve grown accustomed to doing will change.

The release of WordPress 2.7 is a perfect example, especially since it brought such a dramatic change to the administrative experience from previous versions of WordPress. When there are major changes that will be taking place, it’s a good idea to let them know ahead of time so that they’re aware of what’s going on and what, if anything, will change. (You don’t necessarily have to do this for every time a plugin needs upgrading.)

There is a business benefit to this as well. Keeping them updated after you turn the website over to them shows that you’re not just dropping it in their lap and running. Doing so gives them the impression that you’re thinking about them as your client even if you’re not working directly with them at the moment – a sentiment that might go a long way in the future.

Install the proper plugins

If there are any plugins that you know of that will make it easier for them to do something they need to on the administrative side, make sure to install those in addition to the plugins that function only on the actual website. The WordPress Database Backup is a great example; installing it and showing them how to use it could save tons of headaches later on.

Teach them to use it

This is the probably the most essential thing you can do when turning over a WordPress website to a client. Making the transition to a content management system can seem overwhelming at first, especially for those people who aren’t technically savvy or have never done it before.

You need to do everything you can to help ease your client into it and to show them how easy it is to use. Make sure that you show them (and by them, I mean anyone who will be using WordPress) everything that they’ll need to know in order to use WordPress as they intend to. I prefer to do this in-person if possible, since it’s much easier to teach something on the computer to someone when you can see it with them as they do.

While you should always be there if your client has questions, you might also want to provide them with some online resources that they can turn to for answers in addition to turning to you. That way, they won’t always have to come to you for answers to simple questions, but at the same time, they’ll know that if they can’t easily find the answer to something, you’re there for them to turn to.

Just make sure that you build this teaching time into your overall price quote, and that the client knows that it is as much a service that you’re being compensated for as the actual website is.

Thoughts?

If you build WordPress websites often for clients, what are some of your suggestions for how to make it as easy as possible for them to use? Share your ideas with everyone by leaving a comment below!

I’m working on a few WordPress websites for clients at the moment, so I’ve discovered these plugins as I’ve been searching for solutions to some of their design requirements. Finding these plugins just reinforces for me one of the best things about working with WordPress – that for almost anything that you’re trying to do, chances are that there’s a plugin that already exists to meet that need.

(I also wrote last year about some of the other reasons why I want to build your website in WordPress – the availability of plugins being only one of those reasons.)

Without further ado, here are 6 more plugins that you should be using on your WordPress website or blog…

#1: Easy Contact

Easy Contact is a good plugin to use if you’re looking to incorporate a basic contact form into your website or blog. What I like most about it is that unlike the previous contact form plugin that I had been using (the Secure and Accessible PHP Contact Form plugin), the additional CAPTCHA security question is an optional choice on the form.

Why is that important to me? I used the other form for one of my past projects, and they kept telling me they were having problems with the contact form – specifically that people said they had sent a message through the form, but the client never received it. Turns out what was happening was that people weren’t answering the required CAPTCHA question, so the form results didn’t go through, even though the form page refreshed – giving people the impression that the message had gone through.

In any case, the Easy Contact plugin should help avoid that confusion (the security question is optional to display), while still enabling the basic functions that you would expect from a contact form. You can style it however you want to as well, although that’s pretty standard for most plugins of this nature.

#2: Thank Me Later

Thank Met Later is a great plugin to incorporate into the functionality of your comments area. Once you install this plugin, it will send a thank you message to people who leave a comment on your blog or website. There are a lot of ways to customize your message, from the content to when the thank you note is sent out, making it really versatile.

Why would you want to send out a thank you note to people who leave a comment? I think doing so is useful as another way for you to reach out to, and interact with, people who are coming into contact with your website in some way. Sending a little note can put a more personal face on your website, encourage them to subscribe to your RSS feed or email newsletter, start fostering relationships with your commenters, etc. – all things you want to do to help build your brand and reputation.

#3: WP-UnitPNGFix

The name may be difficult to read, but this plugin is definitely getting added to my must-install list. WP-UnitPNGFix fixes the problem that occurs in Internet Explorer 6.0, where PNG images that are supposed to have a transparent background instead have a grey block behind them.

Firefox, Safari, and newer versions of Internet Explorer don’t have a problem rendering transparent PNGs, but since so many people are still using Internet Explorer 6.0, us web designers still have to account for it in our design. (Yet another reason why I hate Internet Explorer 6.0 so much and why I wish people would upgrade already.)

#4: Thumbnail for Excerpts

On some blogs, you’ll see photos used next to the post excerpts as a way to attract people’s attention to particular posts. A great example of a blog that uses this technique is PSD Tuts – visit their website and you’ll immediately see what I mean.

I think that this effect works nicely for when you’re using WordPress as a content management system for clients, rather than just a blog post. The current projects I’m working on fall into that category, so posts are really being used as news updates about particular events. When that’s the case, having a small thumbnail photo is a nice touch that can help accentuate the posts page.

What Thumbnails for Excerpts does in particular is look for the first image within the post, and that becomes the thumbnail that’s displayed next to the excerpt. You can easily specify the size of your thumbnail, and then it’s just a matter of styling the image for how you want it to appear.

#5: Multi-Level Navigation

Drop-down menus are always a contentious topic in the web design world, but I think they do have their uses and can be an important way to help your users dig deeper into your site’s content.

The Multi-Level Navigation plugin lets you have drop-down menus in WordPress, which otherwise would involve some complicated coding in order to have.  This plugin lets you customize everything through an easy-to-use interface. You can add up to two levels to your drop-down menus (which in most cases is probably the most that you should have anyways), style it however you want to, determine the contents for the menus, and more.

#6: Embed iFrame

The reason for using the Embed Iframe plugin is somewhat obscure, and truthfully most people probably won’t have use for it on their websites. Simply put, an <iframe> is a means of embedding one HTML page in another. The projects I’m working are regional websites for a national organization, and they want to be able to include content from the national website without having to duplicate it on the regional websites – so that’s why this is coming in handy.

But there’s also another more common use for an <iframe>, and that’s if you want to include a Google calendar on your website. Calendars are certainly a useful feature to have on your website, especially if they’re used to highlight programming and events. Google calendars are certainly popular and easy to use for your users.

In order to display your Google calendar on your website, after installing this plugin all you would do is reference the URL of your Google calendar within the iframe code on your page, and you’re all set!

Thoughts?

Do any of these plugins sound like something you would use on your WordPress website or blog? If so, let me know what you think of them. Or, if you have any other WordPress plugins that you think might be useful for everyone to know about, share them by leaving a comment below!

There are a lot of resources out there for customizing your login in previous versions of WordPress, but not a lot of resources for working within WordPress 2.7+. So, what I want to do here is use my custom login screen as a way to illustrate how I achieved that look, and what files you need to use in particular.

Why customize the WordPress login?

I’ll cover how to go about customizing your WordPress login screen in a bit, but for now I want to answer the big question you might be having – why would you want to customize it? Here are a few reasons:

• Familiarity for multiple users – A lot of clients may have multiple people posting or administering content in WordPress on their website. Creating a custom login screen with the organization’s or website’s logo in it will let all of them know that they’re in the right spot when they go to post new content, while reminding them of just who they’re posting for.
• You care about their experience too – Creating a custom login screen shows your clients that by including these small touches, you’re thinking about their experiences administering the website as much as you are about what their users experience while visiting the website.
• Extend your branding – On many blogs, people might be required to log in before they can post a comment. As the person running the website, customizing the login screen extends your branding so that those people get a continuous sense of your business as they progress from the actual website through to the admin area.

If you’re looking for some inspiration, the actual design theme of the website should be a good starting point. But you might also want to check out this Flickr gallery of custom WordPress logins for some great examples of what other designers have done.

How to create a custom WordPress login

I wanted to have my WordPress login look like a natural extension of my website, and I think I achieved that look. Here is what my WordPress login screen looks like:

How did I do that? There were two things I had to do – make a minor change to the page itself, and then update the CSS file that governs how the page looks. Let’s go through each one in more detail.

(Note: the following two sections are more technical in nature than I normally write about, and are intended for WordPress designers and developers who understand this stuff.)

Step 1: Update the actual page

Normally I’m not one for updating component pages of the WordPress installation, but when I was styling my form I noticed that some of my styles weren’t taking effect as I wanted them to – in particular, the field labels in my login form. I’m labeling this as step 1 because by doing this first, the new styles that you’re implementing in step 2 will work properly.

You can find the actual login file, called wp-login.php, in your root directory, or whatever directory you have WordPress installed in on your website.

When you open up the file and scroll through it, you’ll notice that there are three separate areas within the page. That’s because this page doesn’t just show the login screen – it also shows the screen if you’ve forgotten your password or are registering as a new user.

In either case though, there is a little quirk to how all those forms are coded on the page. By default, this is how the field labels and input fields are coded:

<p><label><?php _e('Username') ?><br />
<input type="text" name="user_login" id="user_login" class="input" value="<?php echo attribute_escape(stripslashes($user_login)); ?>" size="20" tabindex="10" />
</label></p>
<p><label><?php _e('E-mail') ?><br />
<input type="text" name="user_email" id="user_email" class="input" value="<?php echo attribute_escape(stripslashes($user_email)); ?>" size="25" tabindex="20" />
</label></p>

The best way to explain the problem with this is to use my form as an example again. I wanted to add a few pixels of margin to the top of my input fields so that there would be a bit of visual separation between the field label and the actual input field itself. Because the <label> tag is closed after the input field, that extra margin would be visible after the input field, not after the label as I had intended.

All you have to do to fix this is update the page so it looks like this:

<label><?php _e('Username:') ?></label>
<input type="text" name="log" id="user_login" class="input" value="<?php echo $user_login; ?>" size="20" tabindex="10" />
<label><?php _e('Password:') ?></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" tabindex="20" />

See the difference? You’re closing the label tag after the actual words that will appear above the input field, not after the input field itself. Once you do that, your new styles will work properly. (You can also leave in the <p> tags if you choose to, but I don’t find them necessary because I can add in the proper margins in my CSS.)

Make sure that you do the same thing in the two other spots within the file where this is the case. Just scroll through the file and you’ll see them.

Step 2: Update the CSS

Now that you’ve made the necessary changes to the actual login page, you can go ahead and start styling it. In WordPress 2.7+, how the login screen looks is determined by the login.css file, which can be found in your /wp-admin/css/ directory.

Swap out the logo

One of the first things that I did when I created the login screen above was to swap out my logo for the WordPress logo, which appears as the default. Look for the following line within the login.css file:

h1 a {
background: url(../images/logo-login.png) no-repeat top center;
width: 326px;
height:75px;
text-indent: -9999px;
overflow: hidden;
padding-bottom:5px;
display: block;
}

So in order for your logo to appear instead of the default WordPress logo, you can either save your image as logo-login.png and upload it to the /wp-admin/images/ directory, or you can save the image under a file name of your choosing, and then just update the CSS instead.

One thing to note: make sure to adjust the height accordingly so that it reflects how tall your image actually is. Otherwise, if it’s taller than the default 63 pixels, it will get cut off.

Recommendation: If you don’t have time to completely style the login page and had to choose one thing from here to do, this would be it. By swapping out the logo, you’re accomplishing all three of the points I mentioned above, albeit in a more basic way than by completely styling the login form.

Update the page background

To update the page background, look for this line in your CSS:

body {
border-top-width: 30px;
border-top-style: solid;
font: 11px "Lucida Grande", Verdana, Arial, "Bitstream Vera Sans", sans-serif;
}

Just update it with whatever image or color you’re choosing to use as your background, and you’re all set – almost.

One thing I noticed is that when you update your <body> style, it leaves a lot of white space at the bottom of the page. I don’t think that looks good, so you need to add this into the CSS in order to get the color or background image to take up the whole browser screen:

html {
height:100%;
}

Style the login form

Once you set the new logo and background, it’s just a matter of styling the actual login form. Look for this line in the login.css file:

form {
margin-left: 8px;
padding: 16px 16px 40px 16px;
font-weight: normal;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 5px;
background: #fff;
border: 1px solid #e5e5e5;
-moz-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
box-shadow: rgba(200,200,200,1) 0 4px 18px;
}

This is the code that determines how the actual form area looks, so start styling away to get it to look how you want. There are also separate styles defined for the form input fields, field labels, and field buttons, so you’ll have to style those as well to achieve the look you want.

One final thing to keep in mind

When you upgrade to a newer version of WordPress in the future, that new version will over-write these changes, and your login screen will revert to how it comes by default. This can definitely be a problem if you’re using WordPress 2.7+ because those versions will automatically update themselves when newer releases become available. But, if you save your files somewhere, you should be able to easily recreate the login screen without any problems.

Normally this problem would be solved with plugins, but I haven’t had any luck in finding any WordPress plugins that will do this. If anyone knows of one, share in the comments below.

Thoughts?

So now that you know more about customizing the WordPress login screen, if you have a WordPress-based website, give it a shot yourself and see if you have any success with it. If you want to share your WordPress login pages, leave the link in a comment below, and I’ll compile them for everyone to see.

If you’ve had any success doing this for clients, post a comment too and let everyone know how customizing the login has been received by the client.

(As a quick aside, if you’re curious about why commenting is so important and what some of the benefits are for your website or blog, read through “10 Reasons Commenting is Good for Blogs” by Chris Garrett.)

Upgrading the functionality turned out to be a bigger challenge than I had anticipated. I’ve spent the better part of the last few days trying to get everything working properly and looking the way I want it to, and I’m finally done and am quite happy with the results.

I wanted to mention it here not because I want to show off my work, but because I think that pointing out the resources I used might help others as well.

What features I wanted

I’ve seen plenty of other blogs out there, so I already knew what specific functionality I wanted to incorporate into my new comments area. In particular, I wanted to add:

• Threaded comments – Someone responds to a particular person’s comment, and it posts their reply indented within the same comment box. That way, you know which comment they were directly responding to.
• Gravatars – Globally-recognized avatars that follow you from one blog to another. You can register a gravatar at www.gravatar.com, and then when a blog has them enabled in their comments, your gravatar will display when you comment on a post.
• Author styling – When the author of the post responds to someone’s comment, it will be styled differently than a regular comment.
• Separate out the trackbacks – When someone links back to your post from their website or blog, it’s called a trackback. WordPress will count it as a comment, but if you’ve ever seen blogs where the trackbacks and real comments are mixed together, the actual conversation can be hard to follow – hence the desire to separate them out.

Once I started researching how to do this, I discovered that WordPress 2.7 (the newest release of WordPress) comes with all of this functionality already built in. You don’t have to install extra plugins or hacks any longer, which is what you used to have to do. So although I was only looking to install one or two of these functions, before long I realized that I should just overhaul of the entire comments area.

I can hold my own when it comes to WordPress coding, but I’m not a web developer who really understands what everything means, so it took some time to understand what the articles I found were talking about. But once I got a grasp on it, I was able to get everything working properly and looking how I wanted it to.

Resources that helped me

There were a lot resources that were helpful to me, but these two links in particular are the best articles that I found. They both give you the exact code that you need to use. I’ve labeled each link with the page in your WordPress theme that the article gives you code for:

• Code for functions.php (from Scriptygoddess)
• Code for comments.php and your CSS stylesheet (from eJabs)

Follow the instructions in both of those articles and you should be able to successfully upgrade your comments area. If you have any problems, you can always Google your question or try posting it to the WordPress forums to see if someone can help you out.

Thoughts?

What do you think of the new comments area? You’ll have to leave a comment in order to see the changes! (Although I suppose you can see the comments on my article from earlier this week, “Styling Your Forms to Improve Usability” – but that would be cheating, so leave a new comment instead!)