A Path Less Taken

Adding a Thumbnail to Your Theme

Let’s take a brief detour before we dive into building custom menus for your Welcome theme. We have spent a good bit of effort in building our theme. We want to make sure that it has a polished look when it shows up in the administration console. If you go to the WordPress Administration >> Appearance >> Themes you will see a thumbnail image of each theme you have installed in your copy of WordPress. If you are not skipping ahead then you will see no image above your Welcome theme. Since this is easy to fix let’s grab a thumbnail image of your awesome Welcome theme and display it.

To display your thumbnail WordPress is looking in your theme folder for an image file called screenshot.PNG. If this file is present then WordPress will display that image. The image display size that I’ve seen in the few themes that I checked is generally close to 300 by 225 pixels. Since that’s as good a size as any let’s go with it.

The first thing you need to do is grab a thumbnail of your blog. If you have ever looked at screen capture software before you know that there are hundreds of programs to do this. After searching through several of them I settled on the nice little free tool from ArtViper. You can find it at http://www.artviper.net/website-thumbnails.php. The tool is simple. You register for the site (I know, gasp, not register) and you receive an e-mail that you use to complete your registration. After that’s done you receive a second e-mail that tells you how to use the tool.

Once you have the info you need to use the tool you need to activate your Welcome theme. Once it’s active you can type the necessary information into the browser URL box and the tool will read your blog and return the thumbnail of your site. Below is a sample of the URL that I used. My ID and email account have been changed to dummy values.

1

http://www.artviper.net/screenshots/screener.php?url=www.mycoolblog.com&w=300&sdx=1024&userID=xxxxyyyyzzzz123&email=nomail@stopthat.com

When I chose a width of 300 pixels the height is defaulted to 225. Since my Welcome theme uses a fixed width layout I choose 1024 as my display width which makes my theme thumbnail look the way I want it to. When I put this URL with real information into my browser I get back a perfectly scaled thumbnail image of my blog. I then saved it as screenshot.jpg. Once I was done I opened the JPEG file in the Windows Paint program and saved it as a PNG file with the name screenshot.PNG. I then copied that file into my Welcome theme folder and the refreshed the WordPress Administrative console view. Now my Welcome theme (which was currently active in my blog) appeared near the top of the Appearance >> Themes page with a perfectly sized image of the theme displayed.

That’s all it takes to create a thumbnail image for your Welcome theme. It’s a simple way to add polish to the finished theme without much effort.