When you install a WordPress blog on your own server, you can install plugins to enhance the functionality and improve security. These are some of my favorites:

• Maintenance Mode - Nice plugin for displaying a maintenance message when you’re working on the site.
• Twitter Tools - for integration between your WordPress blog and Twitter account
• WP-SpamFree - Terrific anti-spam plugin
• Contact Form 7 - simple, flexible contact form plugin
• Platinum SEO Pack - Good search engine optimization plugin
• ThickBox - Add ThickBox galleries to your blog
• Multi-level Navigation - for accessible dropdown/flyout/slider navigation
• Google Sitemaps - Creates a Google Sitemaps compliant XML-Sitemap of your WordPress blog
• Image Widget - Image widget for sidebar so clients can easily update images
• Rich Text Widget - Adds a rich text editor widget so your client won’t have to work with code in a text widget.

These are just a few of the plugins I use most frequently. There are many more available. If you can think of something that you’d like to do in WordPress, the odds are good that there’s a plugin for it. When you download plugins, there should be a readme.txt file with installation instructions and notes, but generally you can just add the folder to your plugins directory and activate it through the admin panel. Remember to deactivate plugins when upgrading WordPress and check to make sure that the ones you’re using are compatible with the version you’re upgrading to.

If you’re not familiar with jQuery, it’s an open-source JavaScript library which simplifies adding interactive functionality to your website. In this tutorial, I’ll show you how to use ThickBox, one of my favorite jQuery plugins, to create a simple, yet elegant image gallery.

First, Create the HTML page to display your gallery. My sample is just a centered div (margin: 0 auto) with two sets of thumbnails housed in their own divs. The images are floated left with some right margin applied to each. Feel free to use the code as a starting point. The styles are included in the head tag.

In Photoshop, size the thumbnails (uniform sizes work best) and create the larger images that will open when the thumbnails are clicked. I used 450px x 350px for my large images, and 200px x 142px for the thumbnail images. I applied the following style to my img tag to give the images a white border and some space between each thumbnail:

div.gallery img {

border:1px solid #fff;

float:left;

margin: 0 30px 20px 0;

display:inline;

}

You’ll need the following files for jQuery and Thickbox:

Download the current version of jQuery from jquery.com

Download the ThickBox plugin.

Download the loading animation. (right-click and save to your computer)

Download thickbox.css – the ThickBox style sheet

Now you’re ready to put it all together.

In the head of your html document, add links to the jQuery and ThickBox scripts, and link to the thickbox.css style sheet. If you want to use the following code structure, make sure you’ve placed the jquery.js and thickbox.js files in a scripts directory and the thickbox.css in your root directory:

<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/thickbox.js"></script>
<link href="thickbox.css” rel="stylesheet" type="text/css" />

Place the loadingAnimation.gif file in an images directory. If you choose to rename it or place it in a different directory, be sure to update the file path in the thickbox.js file.

On each of your thumbnail anchor tags, link to the larger images and add a class of “thickbox.” The code will look like this:

<a href="images/image1_lg.jpg" class="thickbox"><img src="images/image1.jpg" width="200" height="142" alt="image 1" /></a>

If you’d like for the user to be able to navigate through a slideshow of all the images when the thickbox image opens, just add a rel="gallery" to the anchor tag. You can use any name you’d like as long as all the images have the same name. Here’s the link with the added code:

<a href="images/image3_lg.jpg" class="thickbox" rel="gallery"><img src="images/image3.jpg" width="200" height="142" alt="image 6" /></a>

You can also use thickbox to display HTML in an iFrame. Simply append the url of the html link with “TB_iframe=true&height=400&width=600″ and adjust the size as needed. The code should look like this:

<a href="text.htmlTB_iframe=true&height=400&width=600" class="thickbox">Click here</a>

See the demo for an example of ThickBox with an iframe.

That’s all there is to it! You can play with the thickbox.css styles to customize your gallery – be creative!

Finding the right color palette for a website design can be challenging. Often the client’s logo will dictate the dominant colors, or you might be basing the design on a photo from which you can sample colors. When I’m struggling with finding the combination that makes it all come together, I turn to some great online color resources - these are my favorites:

Adobe’s Kuler - http://kuler.adobe.com/ Explore palettes, search by tags, save your favorite themes, and create your own to share with other designers. View this tutorial video from AdobeTV to learn more about Kuler. I especially like having the ability to create a theme from a photo.

ColorJack - http://www.colorjack.com/ Hover over a color to see a palette suggestion. Don’t miss the articles section for some interesting background about color symbolism and psychology.

Daily Color Scheme - http://beta.dailycolorscheme.com/ Know of other good color resources? Please share them in a comment. Happy coloring!