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!

I can help. I’ve designed hundreds of email campaigns for both large and small businesses and learned the frustrating ins and outs of the process as a result.

First, you have to be willing to let go of all the wonderful standards-based design you’ve learned over the last few years. We’re leaving the world of CSS layouts and the separation of structure and presentation for the old world of tables. Unfortunately, CSS support in email clients varies a great deal, so tables are necessary for the email structure. Here’s the good news: there is a baseline of safe CSS supported by most of the email clients. However, these styles need to be placed as inline styles or included right after the body tag in your email—the safest choice is inline—due to the fact that many online clients strip out the head tags. No important information, especially CSS, should be included in the head of your document. Additionally, avoid using floats and background images if you want it to look good in all of the online email clients. Check out Campaign Monitor’s Guide to CSS Support in Email.

Keep the preview pane in mind when you design. I use a width of 600px for most of the emails I create. You’ll want to make sure the important information is in your text, not embedded in images – many people will have images turned off, at least initially. Because of this, be sure to include alt tags on all of your images. Images need to be linked via absolute URLs to a storage spot on the server for obvious reasons. Keep the email short and to the point – most people scan email; they don’t want to read article-length text. Use teaser links to take the reader to your website.

You’ll also need to watch out for things that trigger spam filters, like red text, use of all caps, and exclamation marks in your subject line. Here’s a good article about spam triggers.

Test your email in multiple clients – I have several accounts set up for testing purposes. Also, test in the popular desktop email programs like Outlook, Thunderbird and Windows Mail. Be sure to include a link to your HTML file stored on your server for those who have trouble viewing the email.

Lastly, Outlook is not for sending email. I can’t stress that enough. To send your emails, use a database program like Listrak or sign up for an account at Constant Contact, Vertical Response or Mailchimp (just to name a few) – all will allow you to paste in your own code to create a custom email. They also ensure that you’re meeting CAN-SPAM guidelines, and they provide excellent tracking feedback.

I’ve just provided a general overview here. For more information, here’s a great online guide to designing HTML email:

http://www.sitepoint.com/article/code-html-email-newsletters/

If you find all of this frustrating, as I do, and want to get involved in improving HTML email standards, visit the Email Standards Project.