The code

In part 1 we created a cool graphic to put on your 404 page.  (Part 1: Photoshop tutorial to make a “torn out” image)

Now, you need to integrate it into your 404 page, which is the page that comes up when a page is not found on the website. Again, I’ll be using the 404 page for Foodwhirl.com in this tutorial.

This tutorial will be written from a WordPress point of view, but I would assume if you have a bit of knowledge, you could use similar steps on any blogging platform.  Also, there are multiple ways to accomplish this, I just tried to come up with a way that is easy to explain and doesn’t require a ton of knowledge.  You should be able to do this without being an expert at getting into the code on WordPress, but be aware this does require some messing with code.

This is also a great tutorial if you’ve always wanted to know a little more about how to change your wordpress theme a bit.

If you’re going to be messing around with your CSS, a great tool to have is Firebug.   You install it on Firefox and then right click and choose Inspect Element.  That lets you view and change (temporarily) your css on the fly. 

I also recommend you install an FTP program, like Filezilla, or Fireftp, to make it easy to upload files.

Part 2:  Adding the graphic to your website 404 Page

Get set up

First off, take a look at your current 404 page.  If you want to know what it looks like, just type your web address, slash a page that doesn’t exist.  So for example:  http://Dabbled.org/sldalkgj will take you to Dabbled’s 404 page (which is what inspired this tutorial!) .

Note: If you don’t get a Page Not Found when you try this on your own site (like the homepage just reloads) then you’re missing your 404.php template in your WordPress theme.

So, we’ll need access to 2 files to fancy up our page:  style.css and 404.php.  You’ll find them in the wp-content/themes/yourthemename directory.   I recommend any time you’re going to mess around with your theme files, getting them via FTP and saving a local copy to work on, as well as a backup copy in case you screw up royally.

You’ll need a text editor.  I always use Notepad++, but regular Notepad or any plain text editor will work.  DO NOT use Word or anything like that.

So, we now both of our files open in our text editor.

Upload your image

You image must be on your server.  I would normally put it in wp-content/themes/yourthemename/images, and that’s what this tutorial assumes.  So upload 404image.png (or whatever yours is called) to this directory.

404.php

The 404.php page is what loads when you get a page not found error.  It will look different depending on your theme, but they will all pretty much have the same elements.

What we are basically going to do here is use the new graphic as a background on a div on the 404 page.  Don’t worry if that doesn’t make sense, I’ll walk you through.

Here is the code in my 404.php file for foodwhirl.com.  Yours probably looks similar.

<?php get_header(); ?>  

        <div id="container">    
            <div id="content">

            <div id="post-0" class="post error404 not-found">
                    <h1><?php _e( 'Not Found', 'your-theme' ); ?></h1>
                    <div>
                        <p><?php _e( 'Apologies, but we were unable to find what you were looking for. Perhaps searching will help.', 'your-theme' ); ?></p>
                    <?php get_search_form(); ?>
                    </div><!-- .entry-content -->
                </div><!-- #post-0 -->            

            </div><!-- #content -->        
        </div><!-- #container -->

<?php get_sidebar(); ?>    
<?php get_footer(); ?>

Look for the part of the page that has the 404 error text.  Something like “We’re sorry, but your page cannot be found”.  You can change this to something clever if you like by just modifying the text.  Note, to be safe, I’d stay away from special characters, apostrophes, and so forth in the error text.

Now, look for the div that surrounds your error text.  In the case of what I pasted above, div id=”content” is what we’re looking for (container would likely work too), and change it like so:

<div id="content">  becomes  <div id="content404">

(Techie note: there are more elegant ways to do this, but this is the easiest to explain in layman’s terms)

style.css

Next on to your style.css file.

You’re going to add this to the end of your css file.

 
#content404 {
    background: url(images/404image.png) no-repeat transparent;
    border: none;
    float: left;
    width: 653px;
    min-height: 600px;
}

The important parts of this are background (that sets the background to our new image), and min-height which i set to taller than my image.  The other items I got from the #content section of the css file.  Start with just adding the background, and if things look wonky go in and search for #content, and copy lines to your new #content404.

Now my 404 page looks like this:

The torn section looks fine, but the words are not in the right place, and it’s only showing up in that small section of the page.

So, improvements.

I decide I don’t want to show the sidebar, so I go to 404.php and remove the line:

<?php get_sidebar(); ?>

Then I centered the image, so my css now looks like this:

#content404 {

}

If you want your 404 image to overlay the header area (like it does on the Dabbled.org example) just move it up a little on the screen by adding something like:  margin-top: -50px;  to the #content404 section.

The Error Text

I also want to move the text so it displays on top of the image.

To do that I need to target the post text, which in my example would be this:

<div id="post-0" class="post error404 not-found">

You’ll notice there is already a class identified called error404.  If there isn’t one on yours, just add it in.

So in my css file I add:

.error404 {
background-color: rgba(256, 256, 256, .5);
font-size: 1.2em;
padding-left: 300px;
    padding-top: 50px;
    width: 200px;
}

• The background color setting adds a semi-transparent white box behind my text for better readability against the image.
• I increased the font-size to my liking, and used the padding settings to move the text to where I wanted it on the screen.
• I set the width of the text area as well.

Now this is what I have:

Obviously, your settings will be different on your text area to get it to the right spot.  This is where firebug comes in really handy, as you can Inspect Element and change width and padding to get it where you want it, then just copy those settings over to your style.css.

And here it is in action: http://foodwhirl.com/notarealurl

That’s it!

If your WordPress theme came out prior to 2.9 or 3.0, it won’t have support for the Featured Image functionality.

To enable the functionality, you need to add this line to your functions.php file.

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
}

Once you do this, you’ll see “Use as Featured Image” next to the Insert Into Post button. (You’ll also see a Featured Image box under the Post Tags box on the right side of the Edit Post page)

If you’re just trying to fix the Facebook issues we talked about yesterday, and you’re using the plugin I suggested, this is really all you need to do to set a specific image to come up on Facebook.

However, this Featured Image won’t do anything else for you, unless you implement ‘featured image’ functionality elsewhere in your theme.

The following is for those who aren’t afraid of messing with their theme files:

So if you want to actually USE the featured image, as say a thumbnail for your for your posts on your archive pages, or something like that, you’ll have to make a few more changes to your theme.

If you want to add thumbnails to your posts.

Let’s say you aren’t using any sort of thumbnailing functionality right now.  On your category page, you just show an excerpt.  If you want to add your thumbnail sized image to display next to the excerpt, add this to your category.php file right above where you see <?php the_excerpt(); ?>:

<?php if(has_post_thumbnail()) { ?>
 <div class="thumb">
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
 </div>
<?php } else { ?>
<?php } ?>

This basically says “If the post has a Featured Image set, then show it in the thumbnail size (and have it link back to the full post)” .  If not, don’t do anything (I left the ‘else’ in there in case you wanted to do something different if it wasn’t set)

If the image display looks odd, you can fix it with css.  In your style.css file, you can set the styling for the thumbnail with something like this .

.thumb {

float: left;
padding-bottom: 5px;
padding-right: 10px;
padding-top: 0;

}

If you already  have some sort of thumbnailing functionality, and you want to use the featured image when it’s set:

Look for where you are displaying the image next to the post.  You’ll want to tell the file to look and see if a featured image is set, and if it is, display that.  Otherwise display the image using whatever method you were using prior (unless you want to go set the featured image on every past blog post, which wouldn’t want to do).

<?php if(has_post_thumbnail()) {      ?>
 <div>
 <a href="<?php the_permalink(); ?>">
   <?php the_post_thumbnail('thumbnail'); ?></a>
 </div>

 <?php } else { ?>

whatever you were doing before

<?php } ?>

Example:
 <div class="entry-summary">
 <?php if(has_post_thumbnail()) {      ?>
 <div class="thumb">
 <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
 </div>

 <?php } else { ?>
 <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
 <div class="thumb"><a href="<?php the_permalink(); ?>">
 <?php get_attachment_image($post->ID, 'thumbnail', 'alt="' .
    $post->post_title . '"'); ?></a></div>
 <?php } ?>
 <?php the_advanced_excerpt(); ?>
 </div><!-- .entry-summary -->

where green text = the new text that was added

There is tons more you can do with featured image functionality. You can set up custom sizes to use other than the standard thumbnail, medium, and large, for example. But this is a good start.

In my other life where I do web design, I’ve helped my blogger friends figure out how to best manage the deluge, and I figured the rest of you might like some of these insights too.  It’s tailored mostly to WordPress blogs/websites, but some of the tips are universal.  As I started writing it, I realized it was getting pretty long, so here’s Part 1… Part 2 will be coming later in the week!

Photo credit: Spam by dok1

We HATE Spam, but love our readers.

As a blogger, you want to make commenting on your posts as easy as possible for your ‘real’ readers.  But as hard as possible for spammers, and it’s a delicate balance.  On one end of the spectrum is registration only sites–sites where you have to sign up, and in some cases even be verified, prior to posting a comment.  Much less likely to get spammers, but you are likely losing out on valuable real people too.  I know I won’t generally go to the effort to comment on a site I have to sign up for.

On the other side of the coin, with no protections at all, it’s easy for your commenters to post, but spammers (both automated bots and humans) will have a field day.  I was working on a new website for a client once (it wasn’t live yet, but it was accessible on the web), and I hadn’t gotten around to installing any spam protection yet on the blog.  Overnight there were hundreds of automated comments on it, as some spam bot had somehow stumbled across it, and went to town.  I deleted them, no harm done, but if that had been a live active site, what a pain it would have been!

Those evil spam-bots

So, minimally you need protection from bots.  Many sites use some form of a Captcha (what is a captcha?), where the commenter must type in a phrase or something to prove they are a human.  Captcha isn’t perfect, and it can be a little bit of a pain to real users, but it’s pretty standard.  There are other methods too… for my WordPress based sites, like this one, I use a plugin called WP-CaptchaFree, which uses some technology tricks to attempt to identify spam bots and stop them.  I’ve been very happy with it.  There’s also Akismet, which tries to guess which comments are spam, and blocks spammers and is provided with WordPress, but I’ve never used it.

Those evil human comment spammers

Must harder to keep out are actual humans who have chosen to be paid to be spammers-usually from other (3rd world) countries where labor is cheap.  Conveniently, being humans they leave manageable amounts of spam, so cleanup is less of a pain that a bot attack.  But since they are human, they can get around captchas and other things that detect bots. They are quite easy for YOU to detect as spammers because their comment makes no sense or has nothing to do with the post!

So what to do about them? Read on…

Comment Moderation

This is particularly for WordPress blogs, but other blog platforms likely have similar settings.

Moderate Everything: Turning on comment moderation on your blog (in WP this is under the Discussion settings) means that every time someone posts a comment it has to be approved before it can be viewed.  While this will ensure you catch spam before it appears on your blog, it also means more work for you.  And you still have to deal with the spam, it just keeps your readers from seeing it.  Plus you have to approve all your good readers comments as well.  I find this more trouble than it’s worth.

Moderate Some Things: There’s a setting (“Before a Comment Appears” in WordPress) that you only send new commenters (ones which have not had a comment approved before) automatically to moderation.  Depending on how many new commenters you have–If most of your commenters are repeat commenters, this might be a helpful alternative.  But if you get lots of legit new commenters, then this may be more trouble that it’s worth to you.

Moderate Likely Spam only: The Comment Moderation section of your Discussion Settings will let you set which items to send to moderation.  For example, items with more than x number of links (I set mine to 2 or more) are automatically sent to moderation.  Also, you can also pick words that show up typically in spam and not typically in your comments.  You can see I few I have set below.  I just added ‘loan’ to the list, because where I can see that a comment could legitimately contain that word, 80% of my spam comments seem to have it these days!

Comment Blacklist

Once you have a spammer post on your site, you can block their IP so they can’t do so again.  You don’t have to deal with it at all, once they are on the blacklist.  This is helpful because they often come back again and again, once they find your site.  In WordPress, this is also done in the Discussion Settings.

Get the IP of your spammer:  In the Comments section of your WP Dashboard, you can see all the details on your spammer. You’ll note in the example below, our scum has left two comments, under 2 different names, but the IP address is the same.  They left the second one a day after the first.  We don’t want to deal with this IP again, so copy it (it’s highlighted in yellow below).

You’ll need to add this IP to the Comment Blacklist section:

Just add the IP to the list, and their comments will never appear, they’ll just go automatically to your Spam folder.  The only downside to this method is that you still may receive email notifications of the comment, even though it never appears on the site.

Coming in part 2…

• Those evil (more educated) comment spammers who look almost real
• De-linking a dubious comment
• Blocking IPs using .htaccess, instead of WordPress settings
• Stopping Trackback Spam

So stay tuned!

(Don’t want to miss anything? Get the RSS Feed)

She had a pretty good scare that she’d lost her entire site, so I figured it would be a good idea to share how to avoid going through that kind of panic!

The advice that follows is specifically for self hosted WordPress blogs, but no matter where you host, you need to be doing regular backups!

First, understand a little about your blog… A WordPress blog is made up of multiple components:

1: Your posts.  All of this information is stored in your Database.  They are also what is exported if you do an export.

2: Your theme.  This is a directory of files on your server, under wp-content/themes  (This determines the look and feel of your site.  If you have a custom or modified theme, you’ll want to make sure you can restore it in case of emergency.

3:  Your photos or other files.  These are the files you attach to posts via the upload/insert button.  These are by default  stored under wp-content/uploads

4:  Your plugins.  Any time you install a plugin on your site, the files for it are stored under wp-content/plugins.

5:  Your settings, Users, and widgets.  Everything else that makes your blog function and look like it does is stored in the database.

6:  The actual WordPress installation (the programs that run WordPress)

So, if you totally lose your blog, and you want to seamlessly restore it to it’s former glory, you’re going to want to have a backup of all of these things (except for #6).  So how do we do this?

Backup your Files

First, set up a backup folder on your computer.  Make sure you know where you put it, so you can find it if you ever need it!  In this folder , you’re going to put everything you need to restore your site.

To get the files off your website, you’ll need an FTP program.  I use Filezilla, but it doesn’t matter which one you use.  If you use Firefox, the FireFTP plugin is another good one.  You’ll need the logon and password from your host to access the files on your site.  Your host should provide instructions on FTP access.  Get your FTP program set up, and access your site.

Find the folder where wordpress is installed.  It may be the www directory, or it may be a directory under your main directory.  The directory will have 3 subdirectories – wp-admin, wp-content, and wp-includes.

If you want to be on the safest side, you can just copy down the entire wordpress folder to your local computer.  But it’s likely that the only folder you really need is wp-content, since that contains your theme, plugins, and uploads, so copy that entire folder down to the Backup folder on your computer.  (Note, you may have additional themes you’re not using in your /wp-content/themes folder.  Those can be deleted)

Most of the things in your wp-content folder (plugins, themes) don’t change very often.  But likely you are uploading new photos all the time.  So it’s not a bad idea to copy down the wp-uploads folder (at least the new files) on a periodic basis, say once a month.  Set up a reminder in your calendar!

Backup your Data

Next we’re going to deal with the Database.  The real meat of your blog is here, and if you lose this, you’re in trouble.  But non-techies hear the phrase “database backups” and get nervous.  Although backing up the database from the phpMyAdmin tool generally provided by your host is not difficult (here’s a step by step), there are also plugins for WordPress which make it less scary, and automate the process.  Here’s the one I use: WP-DB-Backup.  You can use it to make a backup at any time (it saves a compressed SQL file to your computer.  Move that file over to your Backup directory so you know where to find it!).  You can also set it up to make weekly, monthly, or daily backups of your site, and have them emailed to you.  I like to set up this option to email to my gmail account, so I have access to it, even if I’m not at my computer.  (I don’t recommend the option that saves the file to your website.  Besides filling up website space, if you need to rebuild your site due to a failure on the hosting side, you may not have access to it!)   How often to backup?  It depends on how much you can risk losing.  For a personal blog, weekly or monthly may be fine.  But for Dabbled and Foodwhirl, I do daily backups, and just go in every so often and delete the old ones.

You now can recreate your blog if it’s lost.

Restoring your Site

Obviously, whatever happened to cause your site to be lost may impact how you have to fix it, but lets take Carissa’s example of having to move to a new host.  Her site was totally down, so we were just trying to get her back to a web presence as soon as possible.

To get her back up and running, I had to move her URL to point to the new host (in her case, that involved changing the settings at GoDaddy where her URL was registered).  That can take a while to propogate, so you may want to do this early..  If the url is not pointing to the new host, the restore can be a little trickier (you’ll have to modify the database).

I installed a new WordPress installation with a new database on her new host.  (Most good hosts have an automated method of doing this – this just took a few minutes.)  Note your new logon and password.

Make sure you can access your new wordpress install by typing your domain name.  At this point, you may want to throw up a ‘We’re having technical difficulties” message, too!  Just make a new post.  Your site will not be pretty, but at least it’s not an error message.

Next-  restore the files and data.

Files:  Use your FTP program to upload your backup theme(s), plugins, and uploads to the appropriate directories within wp-content.

Go into your wordpress admin panel and set the theme to your old theme if you like.  Your blog will look at least somewhat like home, but your posts, widgets, and so forth are still missing.

Database:

Note: If you’re not comfortable doing this yourself, you can always get someone to help you.  At least you HAVE a backup!  And you can google for more step by steps on doing this, like this one.  I’m just going to give you the basics here, so you understand what needs to happen.

• Use phpMyAdmin to access your new database.
• To be on the safe side, do an Export of the current database (saves a .sql file to your computer).  That way, if you mess something up, you can always restore back to this point!
• Next, the scary part.  Select all the tables and Drop them.
• Then, Import your backup .sql file.

Cross your fingers, and see if it worked!  Since your Users are also stored in the database–and we just overwrote the database–, your logon and password will be your OLD one, not the one you set up when you did your new install.

*I’d been recommending Bluehost so much, that I decided to sign up with them as an Affiliate, so if you need a new host, follow my link above so I get affiliate credit for it!

Two Side by Side

<div style=”clear: both;”></div>

AND SAVE IT, without going back to Visual Mode! (If you save in Visual mode you’ll delete the div tag) so you may want to do this LAST.

Single images, with text beside them:

This is text that shows us beside the image. These might be steps in a recipe, for example

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Second set of text that shows us beside the image.

test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test

The HTML for this last part looks like this:

<h2>Single images, with text beside them:</h2>
<a href=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/lemons.jpg”><img title=”lemons” src=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/lemons-300×225.jpg” alt=”” width=”300″ height=”225″ /></a> This is text that shows us beside the image.

test text
<div style=”clear: both;”> </div>

<a href=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/freezing.jpg”><img src=”http://www.dabbledstudios.com/supperwhirl/wp-content/uploads/2010/02/freezing-300×208.jpg” alt=”” title=”freezing” width=”300″ height=”208″ /></a>This is text that shows us beside the image.

test text
<div style=”clear: both;”> </div>

Here is the same thing, except with a right picture. Works the same way as the left.

For just a picture by itself (no float) just use the None option when inserting the photo.

Hope this is useful to you! It was to me :) I try not to post too much web design related stuff here, since it’s not really the topic of this blog, but I figured this would be more universally useful. If you’re into this stuff, I post more if it at the DabbledStudios blog – latest was a post on troubleshooting problems with Contact Form 7, if you’re interested!

Sharing some tips on good WordPress plugins over at the Dabbled|Studios (my web design site) blog today….

Check it out!

For a site I’m finishing up right now, I went through my list of WordPress Plugins that are really nice “must haves” for a new website. Since I was documenting what I was recommending for the client, I figured I’d share it with you guys as well. There are tons of great plugins out there, but these are a few that provide some great value…

Simple Trackback Validation Eliminates spam trackbacks by (1) checking if the IP address of the trackback sender is equal to the IP address of the webserver the trackback URL is referring to and (2) by retrieving the web page located at the URL used in the trackback and checking if the page contains a link to your blog.

(This one solved my Trackback Spam problems)

READ THE WHOLE THING

Oh, and the mandatory plug for Dabbled|Studios, for your website/graphic design needs!

First off, everyone should do regular spyware checks on your computer. Yes, even if you have a mac–in the forums I was reading there were mac users with these issues.  Yes, even though you already run a virus scan.   There are a bunch of programs out there, but I typically use Spybot Search & Destroy and AdAware. They are both free for personal use. And if you use IE I recommend switching to Firefox. The ad blocking and script blocking add-ons will save you headaches. Also, if you’re using version 8 or below of Acrobat Reader, upgrade to version 9.

Secondly, to my fellow bloggers – check your site and confirm that you haven’t been hacked as well. In my research today I found that this has been a pretty common hack recently, and it’s hidden so you don’t notice it — but you could be spewing icky links to Google or directing your users to malware without even knowing it. If you have a wordpress blog, check your index.php files. Mine all had an iframe to an icky site added to the end of them all. You can also use this site to see if you have hidden evil links: http://www.unmaskparasites.com/.

Note: This was NOT wordpress specific, although alot of WP sites have reported it.

I think I have it all cleaned up now, but my symptoms were:

• some weird site slowness
• 2 reports (over 2 weeks) of malware/virus warnings by readers
• some odd Adobe acrobat errors that I got myself when on the site.

Like I said, not much is really visible, and most of it could be attributed to a flaky link or add in.

Once I got into troubleshooting this morning, I also found:

• Every index.php file had been modified to include an iframe link at the end (even empty ones and ones in unused themes)  (I manually fixed most of these)
• extra html files added (maybe index or default, can’t remember)  (deleted these)
• Modifications to the base wordpress files (a clean install fixes these)
• I couldn’t find any malware on my computer, but I did have a serious computer crash/issues a while back, which could have been malware related.

I think that was all I found.. hopefully that was the extent.  In addition to fixing the above, I changed ftp and website account passwords (especially since multiple sites under the same account were impacted), as well as WP admin passwords, downloaded several security plugins.

Eep! Hacked!

If you do have the iframe hack that I had (there have also been issues reported where malicious javascript was added, or malicious users or plugins, so check those too), you’ll need to clean it up.
First clean your own computer of malware, as directed above. You may also want to go deeper. If you’re using WordPress, you’ll need to reinstall WP, and manually clean up your wpcontent directory, and check every theme. Download fresh copies of your theme from the source, or edit the files manually. If you have a custom theme, manually delete any changes, or upload from backups. Disable plugins and either re-download or manually check.  In my case, all the bad stuff happened on a single date, so I just looked for file/folders with that date to check.   The database is also vulnerable, although I didn’t see any issues with mine.  One of the links below has a SQL statement you can run to check for some common issues.

If you’re running multiple sites, don’t forget to check them all.  I even had the issue show up on my test blog site.

You’ll want to change all your site related passwords, particularly your FTP password. Make sure you’re using a good password (numbers, letters, special characters, caps). You also want to notify your ISP that you’ve been hacked to see if they can check for anything you’ve missed.

Whew! Not me!

If you don’t currently have a virus, do take a few minutes RIGHT NOW (or asap) to download / backup your entire site. Life will be easier then if you are hit with one.  And if you’re running WordPress, upgrade to the latest version.  There were some security flaws in the previous (this wasn’t my issue, I was on the latest).

Anyway, since I’ve spent much of the day Thursday fixing this site, the Dabbled|Studios site, plus 2 client sites, I was less than productive with anything Halloween related, so sorry bout that.  But this counts as scary, right?? [Actually, stay tuned, your regularly scheduled Halloween Pumpkin Carving post will be up shortly!]

If this happens to you, here are some additional writeups to help, and google “iframe hack” for more information.  I’m sure I haven’t covered it all here, and i’m not a security expert by any means.

Resources in case you’ve been hacked:

http://wordpress.org/support/topic/281767
http://blog.unmaskparasites.com/2009/04/29/another-type-of-iframe-hack-php-exploit/
http://blog.unmaskparasites.com/2009/04/15/malicious-income-iframes-from-cn-domains/
http://www.dnxpert.com/2009/07/24/cleaning-up-wordpress-iframe-hack/
http://www.spam-whackers.com/blog/2007/09/27/iframe-hack/
http://smackdown.blogsblogsblogs.com/2008/06/24/how-to-completely-clean-your-hacked-wordpress-installation/
http://codex.wordpress.org/FAQ_My_site_was_hacked

WordPress Blog Security

• Security Plugin Roundup and More Security Plugins and more…  heck just Google it.
• WordPress Security from the Codex

Good luck!

*Photo credit: ‘MUHAHAHAHAHA – black and white’ was taken by chris runoff