30

I'm developing a custom WordPress theme. When I go to select themes in the Appearance menu, my theme does not have a preview image. Is there something I need to do to get a preview image to show up? I can't find any resources on the web that talk about this. Maybe I'm just searching the wrong thing though...?

Improve this question
3
  • 2
    Found it-- I was searching the wrong thing, but this also isn't very well documented. In order to get a screenshot to show up for your theme, you need to include a file called screenshot.png in the root folder of your theme. This is preferably 300x225 but that isn't required.
    – Chiubaka
    Sep 1, 2011 at 6:36
  • You should post this as Answer, so you can mark it as solution. Else the Q will stay open forever.
    – kaiser
    Sep 1, 2011 at 7:32
  • I know, I couldn't because I don't have a rep of 100 or above before.
    – Chiubaka
    Sep 1, 2011 at 20:31

2 Answers 2

Reset to default
42

There is no automatic preview. You need to create the screenshot yourself and place it in the theme/child theme folder named screenshot.png

The recommended image size (currently) is 1200px wide by 900px tall, however the screenshot will only be shown as 387x290. It is over-sized to allow for high-resolution viewing on HiDPI displays. Note that as of version 4.7.4, the bottom ~18% of this image will be cutoff so keep logos or other graphics centered.

For the latest info see: http://codex.wordpress.org/Theme_Development#Screenshot

Improve this answer
6

For wordpress.org themes, the screenshot should be reasonable facsimile of the theme, and should be 880px wide and 660px in height (any 4:3 height:width) screenshot will be fine.

To add a screenshot, create screenshot.png file and add it to the root director of the theme. e.g wp-content/themes/theme-name/

How to create a screenshot of the theme.

You can use screengrab, awesome screenshot or any other firefox addon or chrome extension to take screenshot and set height and width in photoshop. You can also use built-in feature of firefox for this reason.

Click on alt button on your keyboard and you will see a menu at the top of the browser, Click on tools > web developer > responsive design view, now set custom height width and take screenshot

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.