How to Add a Theme Preview Image on WordPress

How to Add a Theme Preview Image on Wordpress

This is a pretty basic WordPress design tidbit, but still important nonetheless – because it’s the little things that make the biggest difference, right? When you’re selecting your theme you’ll notice that all the professionally made themes have a nice little preview image of what the theme will look like. Well, wouldn’t it be nice to have a similar image for your own theme as well? Of course it would! So here’s how to do it.

How to Add a Theme Preview Image on WordPress

Step 1

In my WordPress design tutorials, Step 1 is always to create a child theme. If you have one already – then great – bypass this step. But, if you don’t have a child theme, you need to stop right now and read my post – How to make a child theme & why you need one. In a nutshell, a child theme allows you to create a safe place to put all your design changes so you never risk breaking your theme and your edits are never lost. Follow the steps in that post to create the child theme, and then you can come back here and continue on with this tutorial. Once you have created your child theme you go to Appearance > Editor to find the style.css file and that is where you put all your code in.

Step 2

If you go to Appearance > Themes where you select the theme you want to use, you will see your theme there. If you haven’t set a preview image already, it will likely look like this with no image at all. Not pretty.

Wordpress Theme Preview Image - no image

Next, decide what page of your site you want the preview to be of. Of course, you know what the design looks like so it can be any page you like. Maybe the home page or the blog roll, anything at all. Go to that page and take a screen size of the browser window. I like to zoom out before I take a screenshot so that I can get more of the design in the image.

Step 3

Next you have to crop the image to the right size. WordPress recommends that you use 660×880 pixels.

Step 4

Next, save the image as screenshot.png. You can use any image format with this name, but the png format is recommended, and will give you the clearest image.

Step 5

Now you want to save the image into the top level folder of your child theme. This just means in the main folder of the active theme that you want the image to apply to. I use cyberduck and I just drag the image off my desktop into the folder.

Wordpress Theme Preview Image Folder

Step 6

Last, but not least, check that you’ve done it right! If you have, when you go to Appearance > Themes it should show there as a preview of your theme.

Wordpress Theme Preview Image

And that’s all! It’s a nifty little trick but does all the more to make your theme look and feel really professional. Of course you can use this technique for any theme, and you should definitely use it if you’re a designer like I am.

Does your active WordPress theme have a preview image?

5 thoughts on “How to Add a Theme Preview Image on WordPress”

  1. Is it possible to “hide” the parent theme from the Theme directory so all that is visible is the customized child theme?

Leave a Reply

Your email address will not be published. Required fields are marked *