wpthemedetector-logo
WordPress Theme Detector Blog
child-theme-screenshot

Adding a screenshot for a WordPress child theme

If you read my previous posts “A WordPress child theme made easy… and easier” and “A new plugin for WordPress child theme creation“, you may remember that the plugin One-Click Child Theme creates a copy of the parent theme´s screenshot image and puts it into the child theme folder, while Child Themify does not create any screenshot at all.

Also, if you created a new child theme without the aid of any plugin by following the steps I gave you in the first of those two posts, you will not have a screenshot for your child theme yet. So, in none of those cases you would have a screenshot to represent your new child theme.

For example, after creating and activating the child theme on my post about Child Themify, the Manage Themes screen would look like this:

child theme no screenshot

I´ve noticed lately that there are quite a few WordPress users asking how to add a screenshot for a WordPress child theme. If you happen to be one of them, let me tell you that it is a very easy thing to do.

What do we need?

We won´t need any special tools for creating the screenshot or for making it available for WordPress to use as the child theme´s screenshot. All what we are going to use is:

  1. An image editing computer program.
  2. An FTP client (like Filezilla) and a FTP account to access your server.

Wait, wait, wait! I´m already hearing some of you complaining because:

  • you don´t have Photoshop or anything like that, and/or:
  • you don´t know how to access your server via FTP or you just don´t want to try to do it.

But you should not worry. In the first place, if you don´t have a graphics program, you can always use Paint (which is included in your Windows) and I´m sure that Mac users also have a good free available alternative. As for the other “problem”, I´ve thought of a way to put the new screenshot in its appropriate location without the need for the FTP access. But I´ll explain that on my next post.

Creating the screenshot

Once we have made our main design changes or additions to our child theme (otherwise it would look pretty much like the original parent theme), we are all set to “take a picture” of it.

So if you have already activated your child theme go ahead and navigate to the homepage of your site (or any other page if you want your screenshot to represent that one), and press the “Print Screen” key of your computer keyboard (it may read “PrtScn”).

Now a copy of your screen is on your clipboard, ready to be pasted into any graphics program. Like I said, it´s like taking a picture of your screen. So now open your favorite image editing program, or Microsoft Paint if you don´t have any such program installed in your computer, and paste it on a new file.

If you are going to use Microsoft Paint, all you have to do is open Paint and click on “Paste”. Now you have your screenshot image ready to be edited. You may need to change the zoom settings to view the whole image. What you need to do now is to crop that image to make it show only your homepage (getting rid of the surroundings such as Windows bars etc.), resize it and save it. To crop it click “Select”, choose the part of the image you want to become your final screenshot, and click “Crop”. Then click “Resize”, choose “Pixels” and enter the appropriate horizontal and vertical values to make it suitable for WordPress to use your image as a theme screenshot.

Theme screenshot size is usually 600 x 450 pixels, but the theme manager displays them at 300 x 225 pixels, so you could use that size too if you want to make the file lighter. Update: The recommended size for the screenshot is 880 x 660 pixels now. 2017 Update: The current recommended size for the screenshot is 1200 x 900 pixels.

Once your image has the right size, go ahead and save it.  Go to the File Menu and choose “Save As”, navigate to the folder where you want to save the image locally in your computer, type “screenshot” as the file name for the image, select PNG or JPEG as the file type and click the “Save” button. The screenshot file for your child theme is now ready.

Put your screenshot file in the right place

All you have to do now is to upload your new screenshot to your WordPress site. It should be placed directly into your child theme folder, side by side with your style.css.

In case you used the One-Click Child Theme plugin to create your child theme you would already have a screenshot file in that folder, so you will need to erase that file in the first place, since it has the same file name as your new screenshot.

And that´s it! Now if you go to “Appearance” > “Themes” in your admin area you will see that your new screenshot is already there:

child-theme-with-screenshot

16 Comments

  1. Hi Luis (my son’s name is Luis too!); first, let me tell you that either you are a teacher or you should be; your way to explain things, processes and concepts is so clear, understandable, and follow-able. I m a newbie WP/web-designer/developer-want-to-be and I have found your tutorials very helpful.
    I am looking forward to see your continuation of the ‘hooks’ tutorial (whenever is out); in the mean time, have you ever considered tutor ‘the rest of us’ about the Advance Custom Fields plugin? I am reading about it and I understand the powerlessness of it but it has been hard for me to understand exactly how it works… would you consider taking to us about it, please?

    • Thanks a lot for your kind words. I´m very glad to be helpful.

      Custom fields are a great feature of WordPress, and Advance Custom Fields is a wonderful plugin to use them. I haven´t thought about custom fields tutorials yet, but it could be a good topic for future posts.

  2. I meant “power-fullness” of ACF… my bad…

  3. Many thanks!

  4. Does theme image supports .jpeg file extension?

  5. Luis, I just now wanted to know how to do this, and I am so glad SEO brought me to your page. 🙂

    • Hi, Terry. Glad to see you around here!

  6. Hi Luis,

    Good article.

    Since you wrote it, the recommended size for the screenshot has risen to 880 x 660.

    • You´re right, Greg.

      Thanks for pointing it out.

  7. Great and simple! I really appreciate you posting this.

  8. Thank you so much for sharing! I really wondered how to do that! 🙂

  9. New Changes again….. The recommended image size is 1200×900. The screenshot will only be shown as 387×290, but the over double-sized image allows for high-resolution viewing on HiDPI displays.

    https://codex.wordpress.org/Theme_Development#Screenshot

    • Thanks, Steve.

      I´ve updated the post accordingly.

  10. wow!!!!
    i haven’t idea about this things..
    the way you taught us how to out screenshot step by step its amazing..thanks for sharing..

  11. Thanks. This worked didn’t work at first for me. I had to reinstall my child theme first with the image inside already and then it worked.

  12. What is the recommended image size?

Trackbacks/Pingbacks

  1. Creating a child theme – Tom Scalia - […] Having created the appropriate folder and files, it’s a simple matter to activate the new theme. There is no…

Submit a Comment

Your email address will not be published. Required fields are marked *