- 1 The correct size for a WordPress theme screenshot is 1200×900 pixels
- 2 The correct WordPress theme screenshot size, name and format
- 3 El tamaño correcto de la captura de pantalla del tema de WordPress
- 4 ¿Por qué usar 1200 × 900 px como tamaño de captura de pantalla del tema?
- 5 Correctly Formatting the Theme Screenshot Beautifully
- 6 When to save theme screenshot in PNG file format
- 7 When to save theme screenshot as JPG file format
- 8 Properly name your theme screenshot
- 9 New theme screenshot not showing
- 10 Go the extra mile on themed screenshots
- 11 conclusion
- 12 Video WordPress theme screenshot size
The correct size for a WordPress theme screenshot is 1200×900 pixels
WordPress Tips from Zac March 4, 2013June 8, 2017
It’s something I have to research regularly and it has changed over time to a much higher resolution. I believe this was to accommodate updates to the WordPress.org theme library.
Since summer 2017, the screenshot.png file that accompanies your theme must be 1200 x 900 pixels . However, “The screenshot will only display at 387×290, but the large image allows for high resolution viewing on HiDPI displays.” (WP Codex)
How to display author avatar photo in a WordPress templateFebruary 26, 2014In “WordPress Theme”
Cool Front-end WordPress Editor by Raptor EditorFebruary 10, 2014In “WordPress Plugins”
MP6 UI Plugin ScreenshotsApril 15, 2013In “WordPress Plugins”
Edited by Zac
View all posts by Zac
Posted on March 4, 2013 June 8, 2017
Best viewed article on: https://smnr.co/2MayuAN
The correct WordPress theme screenshot size, name and format
WordPress theme screenshots are actually quite rare to find if customized. In other words, when WordPress themes are custom-made for the client at a web development agency, it is rare to find screenshots of the themes on them.
Por lo tanto, será un esfuerzo adicional para usted y su agencia si puede proporcionar una captura de pantalla del tema.
El tamaño correcto de la captura de pantalla del tema de WordPress
El nuevo tamaño de captura de pantalla de WordPress para temas es 1200×900px . El Codex oficial de WordPress o WordPress Docs recomienda que durante el desarrollo del tema debe crear una captura de pantalla para su tema .
La razón es especialmente para que los temas se publiquen en el directorio de temas de WordPress, o si lanzará un tema premium en sitios web como Themeforest.net de Envato .
¿Por qué usar 1200 × 900 px como tamaño de captura de pantalla del tema?
This may seem strange because it is quite an exotic number. Normally in images you would expect a 16:9 ratio (16:9 = 1778) which is usually seen on monitors. However, this 1200×900px ratio turns out to be a 4:3 ratio.
These are common monitor sizes. However, the 4:3 ratio is fine for screenshot sizes.
Previously, the theme screenshot size was 660×880 px; however, this has been updated since 2017, doubling the size from that previous size to ensure @2x size for HiDPI monitors. This resulted in theme screenshot file dimensions of 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 theme screenshot in PNG file format
However, it’s a general rule to save the image as a PNG if the theme screenshot just uses colors without too much of the rich imagery you’d expect from a photograph.
Simple gradients, countable colors… That’s all you can do for a PNG image.
If the theme screenshot consists of flat icons and a simple background along with solid color text, it is best to save it as a PNG image.
If the image however seems quite complicated in its imagery, you will want to use the JPG format instead.
When to save theme screenshot as JPG file format
But if you happen to use rich images like a photograph, or if you took a screenshot of your own homepage, then you will want to save the theme screenshot as a JPG.
Blur effects, vignette, intense colors, photography is when using a JPG image
However, the image might look a bit blurry if you were to optimize it. But you won’t have to “compress” the image, it will affect the sharpness of the image quality.
You need to make sure you get a great screenshot of the theme!
It’s a great idea that WordPress has implemented the 1200x900px screenshot size so you can make sure your potential customers don’t run away from your theme because of a blurry theme screenshot!
But if you still want to optimize your image, you can optimize it to TinyPNG or Tiny JPG. It’s a big panda, and it doesn’t matter which of the two websites you use!
Properly name your theme screenshot
Easy: screenshot! You will need to make sure to name your theme screenshot screenshot.pngo screenshot.jpg.
Then, in your theme, you will place it in the same location as your theme’s style.css CSS stylesheet file.
WordPress will recognize the theme screenshot once you visit the WordPress Administration > Appearance > Themes section of the WordPress admin panel.
New theme screenshot not showing
There are times when you can’t tell if you placed your theme screenshot correctly.
Check that you have ordered correctly:
- The screenshot file is saved in PNG or JPG file format
- The screenshot file is in the same location as style.css
- The screenshot file is named screenshot.jpgorscreenshot.png
- The screenshot file is 660×880 px or 1200×900 px in size
If you still don’t see the theme screenshot correctly , you’ll need to force refresh the Appearance > Themes page . You can visit it via (for example) /wp-admin/themes.php from your WordPress admin panel.
Then click the Force Refresh button on your browser.
You can also use the keyboard shortcut: Ctrl + F5 for Windows or CMD + R for Mac .
Hope you can see the screenshot of your new theme properly. If you still don’t see it correctly, let me know or any other WordPress developer and we can look into it for you.
Go the extra mile on themed screenshots
Now you are wondering how to make a good impression on your theme. Probably for future developers reviewing your theme code to congratulate you and your agency.
To go further , make sure that:
- The theme screenshot is 1200×900 pixels in size at all times
- The theme screenshot captures the essence of the theme.
- The theme screenshot is crisp and clear in quality !
In short, check that you have added a:
- Screenshot file size 1200×900 px, i.e. 660×880 px minimum,
- Named as screenshot.pngoscreenshot.jpg
- Make sure it is in the same place as your style.css,
- I checked that the screenshot of the theme works well !
You might want to check out 100 Reasons to Learn WordPress Theme Development, especially if you’re interested in web development in general.
Spoiler alert : it will teach you how to use image manipulation while processing!
Any issues or feedback, please let us know in the comments below.