Mar.20.2007

How to Create a Theme Screenshot

Small Potato

WordPress looks for a .png image file named, screenshot, in your theme’s folder. If you don’t already have a screenshot of your theme, here’s how:

  • Point your browser to the blog currently using the theme.
  • Press the Print Screen button on the keyboard.
  • Open a new file in Photoshop.
  • Change the size to 300 by 225 (in pixels)
  • Press Ctrl + v or Right click > Paste.
  • With the Move tool activated, resize the screenshot to in the 300 x 225 space.
  • Go to File > Save for Web…
  • Save it as a PNG file, instead of GIF or JPG.
  • Name it screenshot.
  • Place your image file in the theme’s folder.
What's Next?
Related Posts
Freesitebuilder:

For those who haven’t got Photoshop, I find IrfanView http://www.irfanview.com good for screenshots and basic editing.

Sadish:

Just to add my 2 cents.

It could also be screenshot.jpg or screenshot.gif. WP will look for it if it could not find screenshot.png on that folder.
All my themes have screenshot.jpg and displays with no issue.

Thanks
Sadish

Small Potato:

Thanks Sadish. I actually never tried .jpg before.

David:

I’d also highly recommend SnagIt for all sorts of great quick screen captures. It’s the best out there and I use it ALL the time. They even have a free 30-day trial.

http://www.techsmith.com/download/trials.asp

~Dave

http://ww.crmblogger.com

Small Potato:

Thanks for the link to Snagit, David.

However, I’d recommend using Photoshop to get used to maneuvering within Photoshop because my future tutorials require Photoshop.

CRM Blog:

I agree Small Potato, Photoshop is the way to go and I followed your demo and appreciate it!

Andiz:

Paint Shop Pro:

* Point your browser to the blog currently using the theme.
* Press ALT + Print Screen button on the keyboard. (this way you will only take a printscreen of the current window!)
* Press Ctrl + v or Right click > Paste.
* Change the size to 420 by 315 (in pixels) (as seen on themeviewer…..)
* Image > Resize ( Don’t forget to use Weighted Average)
* Go to File > Save as…
* Save it as a PNG file, instead of GIF or JPG. I always use .jpg, .png didn’t work a couple of times for me.
* Name it screenshot.
* Place your image file in the theme’s folder.

Small Potato:

Thanks Andiz, but the WordPress.net theme viewer generate its own screenshots. The dimension for the admin theme viewer is 300 x 225 isn’t it?

Andiz:

You are welcome.

Yes it is, but the old page of the themeviewer had some requirements on it. One of theme was that the screenshot should be 420 x 315. But they removed that page (linking to the codex right now). Anyways 300 x 225 will do just fine ;)

Scot Smith:

This is a detail that is often overlooked by beginners. Good reminder.

Gail:

Hi,

I tried to do this screenshot but don’t know a great deal about using photoshop. How do you move it to the right size.

Gail

John:

This plugin for firefox lets you take screenshots and immediately saves the screenshot to png or jpeg (customizable), and also lets you take a screen shot of the full length of a web page (i.e. not just the area you can see on one screen). It’s brilliant.

Gail:

Hi John,

Thanks for that I have downloaded it so I will check it out. It sounds like it will be much easier to do.

Thanks
Gail

Reply
Comment Policy
  • Theme support questions should be posted at the support forums.
  • Name and Email are required. Email is never published.
  • You grant this site perpetual license to reproduce your words and name/website in attribution.
  • Inappropriate comments will be removed at my discretion.
Close
Powered by ShareThis