WordPress Theme Screenshots are in fact quite rare to find if they are built from bespoke. That is, when WordPress themes are custom-built for the client in a Web Development Agency, it is uncommon to find theme screenshots in them.
Therefore it will be yet another extra mile for yourself and your agency if you are able to provide a theme screenshot.
The Right WordPress Theme Screenshot Size
The new WordPress screenshot size for themes is 1200×900px. The official WordPress Codex or WordPress Docs recommends that during theme development you must create a screenshot for your theme.
The reason is especially for themes to be published into the WordPress Themes directory, or if you will be releasing a premium theme on websites like Envato’s Themeforest.net.
Why Use 1200×900px as the Theme Screenshot Size?
It may seem odd as this is quite an exotic number. Normally in images you would be expecting a 16:9 ratio (16 / 9 = 1.778) usually seen on monitors. However, this 1200×900px ratio turns out to be a 4:3 ratio.
Previously the theme screenshot size was at 660×880px, however this has been updated since the year 2017, doubling the size of this previous size to ensure an @2x size for HiDPI monitors. This has resulted in the theme screenshot file dimensions being 1200×900px.
The 1200×900px ratio is also simply the result of being able to fit a good amount of imagery within the WordPress Admin > Appearance > Themes given its limited space. Working with a 16:9 ratio will simply not look good.
So it will be natural to keep it a rectangle, but offer enough space for imagery. The decision was the 4:3 ratio common in monitors of the past, due to its square-ish appearance but keeping it a rectangle.
Correctly Formatting the Theme Screenshot Beautifully
The theme screenshot comes in two flavours: PNG and JPG file formats. As a WordPress theme developer you are free to use either one.
You do not have to worry about the file size (in bytes) as administrators will not likely be worried too much about their internet connection speed.
When to Save the Theme Screenshot as PNG File Format
However, it is a general rule of thumb to save the image as a PNG format if the theme screenshot uses simply colours without too much rich imagery that you would expect from a photograph.
If the theme screenshot consists of flat icons and simple background as well as solid-coloured text, then it is better for it be saved as a PNG image.
If the image however does look quite complicated in its imagery, you will want to use the JPG format instead.
When to Save the Theme Screenshot as JPG File Format
But if you do happen to use rich imagery like a photograph, or that you took a screenshot of your own homepage, then you will want to save the theme screenshot in a JPG format.
The image may look a little blurry though if you were to optimise it. But you will not have to ‘compress’ the image, if it will affect the crispness in the quality of the image.
You need to make sure that you get an awesome-looking theme screenshot!
It is a great idea that WordPress has implemented the 1200×900px screenshot size so that you can make sure that your potential customers do not run away from your theme because of a fuzzy theme screenshot!
But if you still wish to optimise your image, you can have it optimised in either TinyPNG or Tiny JPG. It’s a great panda, and it doesn’t matter which of the two websites you use!
Naming Your Theme Screenshot Correctly
Easy — screenshot! You will have to make sure you name your theme screenshot either as screenshot.png or screenshot.jpg.
Next, within your theme, you will place this in the same location as your style.css theme CSS stylesheet file.
WordPress will recognise the theme screenshot once you visit the WordPress Admin > Appearance > Themes section of the WordPress admin panel.
New Theme Screenshot Is Not Showing
There are times you can’t seem to figure out if you placed your theme screenshot correctly.
Check to make sure you’ve got the following sorted:
- Screenshot file is saved in either PNG or JPG file format
- Screenshot file is located in same location as
style.css - Screenshot file is named as
screenshot.jpgorscreenshot.png - Screenshot file is sized as 660×880px or 1200×900px
If you are still not seeing the theme screenshot properly, then you will have to Force Refresh the Appearance > Themes page. You can visit this through (for example) /wp-admin/themes.php of your WordPress admin panel.
Then click the Force Refresh button of your browser.
Alternatively, use the keyboard shortcut: Ctrl + F5 for Windows, or CMD + R for Mac.
Hopefully you will be able to see your new theme screenshot correctly. If you still aren’t seeing it correctly, please let me know or any other WordPress developer and we can look into it for you!
Going the Extra Mile in Theme Screenshots
Now, you are wondering how to make a great impression in your theme. Probably for future developers peeking into your theme code to give that great sign of approval from yourself and your agency.
To go the extra mile, make sure that:
- The theme screenshot is at 1200×900px size at all times
- The theme screenshot captures the essence of the theme
- The theme screenshot is crisp and clear in quality!
Conclusion
In summary, check to make sure you that you have added a:
- Screenshot of file size 1200×900px, or 660×880px at minimum,
- Named it as
screenshot.pngorscreenshot.jpg - Made sure it is found in the same location as your
style.css, - Checked that the Theme Screenshot is working properly!
You may want to check out the 100 Reasons to Learn WordPress Theme Development, especially if you are into web development in general.
Spoiler: it’s going to teach you how to use image manipulation in the works!
Any issues or feedback please let us know in the comments below.