If you read my previous posts “A WordPress child theme made easy… and easier” and “A new plugin for WordPress child theme creation“, you may remember that the plugin One-Click Child Theme creates a copy of the parent theme´s screenshot image and puts it into the child theme folder, while Child Themify does not create any screenshot at all.
Also, if you created a new child theme without the aid of any plugin by following the steps I gave you in the first of those two posts, you will not have a screenshot for your child theme yet. So, in none of those cases you would have a screenshot to represent your new child theme.
For example, after creating and activating the child theme on my post about Child Themify, the Manage Themes screen would look like this:
I´ve noticed lately that there are quite a few WordPress users asking how to add a screenshot for a WordPress child theme. If you happen to be one of them, let me tell you that it is a very easy thing to do.
What do we need?
We won´t need any special tools for creating the screenshot or for making it available for WordPress to use as the child theme´s screenshot. All what we are going to use is:
- An image editing computer program.
- An FTP client (like Filezilla) and a FTP account to access your server.
Wait, wait, wait! I´m already hearing some of you complaining because:
- you don´t have Photoshop or anything like that, and/or:
- you don´t know how to access your server via FTP or you just don´t want to try to do it.
But you should not worry. In the first place, if you don´t have a graphics program, you can always use Paint (which is included in your Windows) and I´m sure that Mac users also have a good free available alternative. As for the other “problem”, I´ve thought of a way to put the new screenshot in its appropriate location without the need for the FTP access. But I´ll explain that on my next post.
Creating the screenshot
Once we have made our main design changes or additions to our child theme (otherwise it would look pretty much like the original parent theme), we are all set to “take a picture” of it.
So if you have already activated your child theme go ahead and navigate to the homepage of your site (or any other page if you want your screenshot to represent that one), and press the “Print Screen” key of your computer keyboard (it may read “PrtScn”).
Now a copy of your screen is on your clipboard, ready to be pasted into any graphics program. Like I said, it´s like taking a picture of your screen. So now open your favorite image editing program, or Microsoft Paint if you don´t have any such program installed in your computer, and paste it on a new file.
If you are going to use Microsoft Paint, all you have to do is open Paint and click on “Paste”. Now you have your screenshot image ready to be edited. You may need to change the zoom settings to view the whole image. What you need to do now is to crop that image to make it show only your homepage (getting rid of the surroundings such as Windows bars etc.), resize it and save it. To crop it click “Select”, choose the part of the image you want to become your final screenshot, and click “Crop”. Then click “Resize”, choose “Pixels” and enter the appropriate horizontal and vertical values to make it suitable for WordPress to use your image as a theme screenshot.
Theme screenshot size is usually 600 x 450 pixels, but the theme manager displays them at 300 x 225 pixels, so you could use that size too if you want to make the file lighter. Update: The recommended size for the screenshot is 880 x 660 pixels now. 2017 Update: The current recommended size for the screenshot is 1200 x 900 pixels.
Once your image has the right size, go ahead and save it. Go to the File Menu and choose “Save As”, navigate to the folder where you want to save the image locally in your computer, type “screenshot” as the file name for the image, select PNG or JPEG as the file type and click the “Save” button. The screenshot file for your child theme is now ready.
Put your screenshot file in the right place
All you have to do now is to upload your new screenshot to your WordPress site. It should be placed directly into your child theme folder, side by side with your style.css.
In case you used the One-Click Child Theme plugin to create your child theme you would already have a screenshot file in that folder, so you will need to erase that file in the first place, since it has the same file name as your new screenshot.
And that´s it! Now if you go to “Appearance” > “Themes” in your admin area you will see that your new screenshot is already there:
Latest posts by Luis Alejandre (see all)
- Child Theme Detection Just Got Better - 17 January, 2017
- Child Themes: Enqueuing the parent theme stylesheet instead of using @import - 31 December, 2016
- Add functions to your WordPress child theme (5) – WordPress Filters - 8 August, 2016