WordPress Theme Screenshot: Correct Format, Name & Size

Do you ever wonder about the recommended screenshot size used in the process of theme development?

If you did, then you are going to get the answers to cause in this guide we will discuss the format and size aspect ratio, and more. Usually, developers get confused about the recommended size to use in the process.

Correct WordPress Theme Screenshot Size

WordPress Codex in their documentation recommended theme screenshot size must be (1200*900px) for their development.

There is some website that still recommends the previous low resolution of the size (880*660px). But the updated recommendation which you will find in WordPress codex is (1200*900px).

The WordPress codex mentions that the screenshot is always shown in the smaller view resolution with the high-resolution image which allows them to be on High DPI displays.

Since the screenshot will be visible in the responsive Manage theme section, so the other part like top and bottom might not be visible fully, which make a recommendation to keep the graphics centered.

Why The Recommended Size Is 1200*900px For the Theme Screenshot?

Most of the aspect ratio (16:9) is usually used by most of the monitors. However, the screenshot which is recommended is about the (4:3) ratio.
Before this ratio was recommended the theme screenshot size was 660*880px, they updates it in 2017. They doubled the size to the previous version to ensure a 2x resolution for HIDPI monitors, which then resulted in a file of 1200*900px.
This aspect ratio was perfect for the HD image within the WordPress Admin > Appearance > Themes due to the limited space. The aspect ratio of 16:9 will perfectly align the screen size. Therefore to keep the shot in a square shape and provide enough space in the storage, the 4:3 was recommended.

See also  How To Create A Staging Site For WordPress

Screenshot Name and Format

The format is also the important thing when it comes to saving the WordPress theme screenshot. The recommended theme screenshot format is .png format, which is fairly high resolution, other formats are also available like .jpg, .gif, and .jpeg these formats can be valid extensions, you can use these extensions but are not recommended by the Codex.

So the name of the theme would be a screenshot.png type fileAfter formatting the theme, you have to place that in the same location as your style.css, CSS Stylesheet file.

After placing the file, WordPress will automatically find the screenshot, you just have to go to Admin >Appearance > Theme section of the WordPress dashboard.

Screenshot Uploading

So, for uploading the screenshot to the theme folder or want to change the screenshot which is displayed in the Manage Theme section in the WordPress dashboard.

You can create the screenshot file with the proper file format extension and upload it to the directory. For that, you will need the FTP program like Filezilla and your FTP login credential.

After logging into the FTP dashboard, navigate and Locate the active theme directory and upload the Screenshot.png file. Below are the steps to follow:

  • Your child theme should be installed and activate in WordPress.
  • Now if you want to open the website and snap a screenshot, use some tools and the windows snap tool takes a screenshot, tools like Greenshot or Screenr are the good ones.
  • Remember to name the Screenshot file “Screenshot” with a .png extension. You can also edit the screenshot and keep the resolution (1200*900px).
  • After the editing is complete, the resulted file will look like this Screenshot.png.
  • Now we will use the FTP client to upload the file and replace the Screenshot.png with your file in the WordPress theme folder that is wp-content/theme/theme name/screenshot.png.
  • Done. Now navigate to Appearance > Theme and reference the web page and here you can see the screenshot for the own custom WordPress theme.
See also  What Symbol Would You Use To Add A Broad Match Modifier?

WordPress Theme Screenshot Not Showing

So after everything uploaded and saved there comes a time when the screenshot is showing properly, check out the following factors to make sure everything is right.

  • The screenshot file should be saved in the format of PNG or JPG.
  • The location of the screenshot should be in the same location as style.css
  • The resulted screenshot will look like screenshot.jpg or screenshot.png.
  • The resolution of the screenshot should be 1200*900px or 880*660px.

If the theme screenshot is not displaying properly, then refresh the Appearance theme page, you can access that page through (/wp-admin/themes.php) the WordPress panel. Click on the Force Refresh button of the web browser.

Done if you have any quires comment down below

Leave a Comment