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”:
Final editing
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!
- New Divi Children 3.0.10 update released - April 7, 2022
- New Divi Children 3.0.7 version for WordPress 4.9 - November 15, 2017
- Understanding Divi Children Output Mode - October 11, 2017
I cannot get the screenshot to work; it sends “The file URL you provided for your new screenshot is not valid
The screenshot was not changed.” error, no matter what. It says the file cannot be found but I KNOW it’s there and in the correct directory… Any help is greatly appreciated =)
The plugin first uses a simple function to check if the file exists (no matter what kind of file, it just makes sure there is a file with that URL), and afterwards it checks if it actually is an image file, for the sake of safety. The error message you´re getting belongs to the first check which, like I said, is quite simple. So it looks like the file doesn´t really exist. Now if you´re sure it is there and the URL you entered is correct, the only reason I can think of is that you don´t have enough permissions in your site. If that is the case, you should contact your hosting company.
However, why don´t you use the “Upload or Choose Image” button of the plugin instead? It will open the WordPress Media Uploader and you can load your screenshot from there.
I included the URL option just in case you didn´t want to upload your screenshot in order to save memory resources, or in case you wanted to upload the image from a location other than your WordPress installation. The “Upload or Choose Image” button is the easiest way, though. And, if you don´t plan to use that image anywhere in your site other than as your child theme screenshot and you want to save resources, you can always delete the image from your WordPress Media Library after changing your screenshot (a copy of the image will be saved as your new screenshot in your child theme folder, so there´s no problem in getting rid of the original).
Luis,
Have you had anyone say they had issues with changing the child theme screenshot? When I select my image (600×450) in my media library, it says that “Screenshot has been Changed” View changed screenshot, but it’s still the original. Do you have any idea about how to resolve this? This is a new install and no plugins added at the moment.
Thanks so much for the awesome child theme.
Mike
Yes! I get the same error message regardless of the upload method I select. I cannot find anyone who can help.
“The file URL you provided for your new screenshot is not valid”
Hi Luis,
first of all…amazing plugin! i don’t know how i could live without it 😉
There is a small isue i have and that is i can’t change the screenshot for the life of me…tried .jpg and .png in 600×450 size and nothing is working…
i get “No valid image file found in the URL you provided for your new screenshot”…
Any idea how to fix this? Don’t use a caching plugin.
Thanks.
Hi, Mark. I´m glad you like my plugin so much, and sorry to know you´re having trouble with the screenshot change. I don´t know what´s wrong in your case because I´m not able to reproduce your issue. I´ve just tested the Change Screenshot feature with the most recent versions of Divi Children and WordPress and it worked alright for me on my test site.
Hey Luis having the same problem as others with changing the screenshot – I have uploaded a 600×450 image into my media for the site, and when I select it as my screenshot I get the error:
“No valid image file found in the URL you provided for your new screenshot”
Is there another way to change the screenshot? I’ve used this plugin on other Divi sites of mine, but have consistently gotten this error – all my sites use the image that you include for a general child theme because I havent been able to get them to work in the past.
Hi, Jason.
As I mentioned before, I don´t know what´s wrong because I´m not able to reproduce that issue and everything looks to me like working alright. I guess there must be something to do with server file permissions or something. I´ll have to find a way to get into this.
Having the same issue here as well.
Hosting with flywheel, and using this plugin on our staging site.
Help please