Adding a Theme Thumbnail

Adding a Theme Thumbnail

When you look at Appearance → Themes, each theme shows a preview image. Without one, your theme looks unprofessional with a blank gray box. Let's add a thumbnail.

How WordPress Theme Thumbnails Work

WordPress automatically looks for a file called screenshot.png in your theme's root folder. If it exists, it's displayed as the theme preview.

Screenshot Requirements

Property	Requirement
Filename	screenshot.png (exactly this name)
Recommended size	1200 × 900 pixels
Aspect ratio	4:3
Format	PNG (recommended) or JPEG
Location	Theme root folder (same level as style.css)

Creating the Screenshot

1. Open your static HTML page in the browser
2. Take a full-page screenshot:
   • Chrome: DevTools → Ctrl+Shift+P → type "screenshot" → "Capture full size screenshot"
   • Or use a screenshot tool like Snipping Tool, Greenshot, etc.
3. Open the screenshot in Photoshop or any image editor
4. Crop/resize to 1200 × 900 pixels
5. Save as screenshot.png
6. Place it in your theme folder:

   developer-coffee/
   ├── screenshot.png   ← Theme preview image
   ├── style.css
   └── index.php

Verifying the Thumbnail

1. Go to Appearance → Themes
2. Your "Developer Coffee" theme should now show the screenshot
3. Click on the theme to see the full details view with the larger preview

Tips for a Good Screenshot

• Show the header, hero, and part of the content — the most visually appealing portion
• Ensure text is readable even at the small thumbnail size
• Keep the file size reasonable — under 500KB is ideal
• Use vibrant colors that represent the theme's design

Key Takeaways

• Add a screenshot.png (1200 × 900px) to your theme root folder
• WordPress automatically uses it as the theme preview in Appearance → Themes
• Take a screenshot of your static HTML page and crop it to 4:3 ratio
• A good screenshot makes your theme look professional and polished