When I presented the Divi Children plugin on my post Divi Children: The easiest way to create a Divi child theme a couple of weeks ago, I said that the plugin automatically uploads a default screenshot for your new child theme, but also that you could change that screenshot at any time.
A theme screenshot is usually a representation of the way a website looks when using that particular theme. So, if you have just created your child theme but done nothing else yet to customize your site, it doesn´t make sense to “take a picture” of it (unless you want to use a screenshot of the “logo” type).
That´s the reason why I decided to make Divi Children upload a default screenshot at the moment it creates your new Divi child theme, instead of letting you choose your image from the beginning.
That way you first create your Divi child theme, then add all the custom code you want to it and, once you´re satisfied with the final look and feel of your site, then it´s time to make a screenshot that will represent it. After you´re happy with your new screenshot, all you have to do is to go back to Divi Children, click on the Change Screenshot tab of the plugin page and upload your new screenshot, either by using the Media Uploader or by pasting the URL to your image.
Ok, so far so good. Except that some of you may be wondering how do you make your own screenshot. If that is your case, don´t worry. It is a very easy process.
What do we need?
We won´t need any special tools for creating the screenshot image 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, to create the screenshot image and to give it the right format.
- The Divi Children plugin, to quickly place your image inside your child theme without the need for an FTP client and a FTP account to access your server.
If you don´t use Photoshop or any other commercial image editing software, you could always use Paint (which is included in your Windows). But if you plan to work a little more with images, I´d recommend Paint.NET, which is a free yet quite powerful image and photo editing software. I´m talking about Windows here, but I´m sure that Mac users also have a good free available alternative.
And if you are not using Divi Children yet, what are you waiting for? It is a free plugin!
Creating the screenshot image
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 anywhere. Like I said, it´s like taking a picture of your site. Open your favorite image editing program and paste it on a new blank file.
If you are going to use Paint.NET, all you have to do is to click on “New” and paste your image on the blank canvas. Now you have your screenshot image ready to be edited. 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 the “Select a Rectangle” tool, choose the part of the image you want to become your final screenshot, and click “Crop selection”:
The standard size for theme screenshots in WordPress is 600 x 450 pixels.
Once you have your first rough cropping done, click “Resize” under the “Image” menu and enter 600 pixels for the width or horizontal value and let the software calculate the vertical appropriate value by selecting to keep the image aspect ratio.
The resulting resized image will have a height that you´ll need to change to 450 pixels now.
Since you don´t want your image to get distorted, you will give it the desired height not by resizing it, but by cropping it again. This time you will only crop it vertically, adapting the rectangle selection tool window until you get the 600 x 450 pixels size.
Now your image has the right size to make it suitable for WordPress to use it as a theme screenshot, so 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. Go to Appearance > Divi Children, click on the Change Screenshot tab of the plugin admin page, upload your new screenshot, and your Divi child theme is ready with a renewed look!
Latest posts by Luis Alejandre (see all)
- New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
- Understanding Divi Children Output Mode - October 11, 2017
- Customizing Divi post meta with the Post Meta EZ-Builder - September 29, 2017