WordPress theme screenshot size

New Page

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)

Share this:

  • Twitter
  • Facebook

Like that:

Like Loading…

Related

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”

de0a01122ca4a619004332ab04431b7b

Edited by Zac

View all posts by Zac

Posted on March 4, 2013 June 8, 2017

1*rNJyfufq4933Fr3SIC7yJg

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.

0*HCw07Vhu-Yaqsskb

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.

0*8Tm8_gOQ9QbT3qIU

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.

0*R6KiZVwxXu8WQc2g

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 !

conclusion

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.


Video WordPress theme screenshot size

Related Posts

Free chat room code for my website

Contents1 How to set up a free chat room on the website.2 3 comentarios2.1 Trackbacks/Pingbacks2.2 Submit a Comment Cancel reply3 How to Create a Chat Room Website…

Background image full screen css

Contents1 Cómo – Full Page Image1.1 Example1.2 Example2 CSS background image tamaño tutorial: how to codify a complete page background image3 Perfect Full Page Background Image3.1 Méthode CSS géniale,…

WordPress leverage browser caching

Contents1 Aproveche el almacenamiento in hidden del navegador1.1 Will it works for my website?1.2 Where are plugin options1.3 Some JavaScript files still display under Leverage Browser Caching1.4…

WordPress post to facebook page

Contents1 How to Automatically Post to Facebook from WordPress1.1 Download Now: How to Launch a WordPress Website [Free Guide + Checklist]1.2 1. Create an IFTTT account.1.3 2….

Download images from wordpress media library

Contents1 How to export your WordPress media library1.1 Download maintenant : How to launch a WordPress website [Free Guide + Checklist]1.2 How to export your WordPress media…

WordPress single post template

Contents1 How to Create Custom Unique Post Templates in WordPress2 Post Template Files2.1 author.php2.2 Fecha.php3 Handbook navigation4 How to Create Custom Single Post Templates in WordPress5 Video…