How to Change Theme Screenshot in WordPress using Child Theme? : A Step-by-Step Guide

Changing the screenshot of a WordPress theme can be a great way to personalize your website and make it stand out. One way to do this is by using a child theme, which is a separate theme that inherits the functionality and styling of a parent theme.

By making changes to the child theme, you can customize your website without affecting the original parent theme. Using a child theme to change the theme screenshot in WordPress is a great way to add a personal touch to your website.

By following the steps outlined above, you can easily create a new screenshot image and replace the default one without affecting the original parent theme.

Creating a WordPress Child Theme to Change Theme Image

When it comes to changing the theme screenshot in WordPress, creating a child theme is a recommended approach. A child theme inherits all the functionalities of its parent theme and allows you to make customizations without affecting the parent theme’s code.

Here’s how to create a WordPress child theme to change the theme image.

Set up a Child Theme from Parent Theme

Before creating a child theme, you need to have a parent theme installed on your WordPress site. If you don’t have one, you can download a free theme from the WordPress repository.

Once you have the parent theme installed, follow these steps to set up a child theme:

1. Create a new folder in the wp-content/themes directory and give it a name that is different from the parent theme’s name.
2. In the child theme folder, create a new file named style.css. This file will contain the child theme’s stylesheet.
3. Open the style.css file and add the following code to define the child theme:

/*
 Theme Name:   My Child Theme
 Theme URI:    https://example.com/my-child-theme/
 Description:  My Child Theme
 Author:       John Doe
 Author URI:   https://example.com/
 Template:     parent-theme-folder-name
 Version:      1.0.0
 Text Domain:  my-child-theme
*/

Replace the values in the code with your own values. The Template value is the name of the parent theme’s folder.

4. Save the style.css file.

Next, you need to enqueue the child theme’s stylesheet and any other scripts or styles that you want to add. To do this, add the following code to the child theme’s functions.php file:

function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' )
    );
}
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );

The code above enqueues the parent theme’s stylesheet first and then the child theme’s stylesheet. The child theme’s stylesheet depends on the parent theme’s stylesheet, so it is added as a dependency.

You can also follow this video to see how to set this up.

With the child theme set up, you can now make any customizations you want to the child theme’s files without affecting the parent theme’s code.

If all these sound technical to you and you want to skip these, then you can directly install this Child Theme Configurator Plugin and simply get your Child Theme ready in a few clicks.

Designing the Theme Screenshot Image for Right Format Size

When designing the theme screenshot image, it is important to keep in mind the right format size. As per the current WordPress standards, the theme screenshot size should be 1200×900 pixels. The image should be crisp and clear in quality, and capture the essence of the theme.

Edit the Screenshot Image

To edit the screenshot image, one can use a photo editing tool such as Photoshop, Canva, or anything you’re comfortable using.

The following steps can be followed for Photoshop:

1. Open the image in Photoshop.
2. Check the resolution of the image. It should be at least 72 pixels per inch (ppi) for web use.
3. Crop the image to the desired size of 1200×900 pixels.
4. Resize the image if necessary. Make sure to maintain the aspect ratio to avoid distorting the image.
5. Save the image as a JPEG or PNG format to maintain the quality.

And your image is not ready to go live

If you have a lot of images on your site, then you should ensure they are optimized for faster performance. Check out this blog, where I discussed how you can optimize images at bulk for free and within a few seconds.

Updating the Screenshot to Child WordPress Theme

Here are the steps to update the screenshot of a child theme in WordPress:

Uploading the Image Screenshot Designed

Next, navigate to the child theme folder in wp-content/themes/child-theme-folder and place the screenshot file in it.

Make sure to name the file “screenshot.png” to ensure that WordPress can recognize it.

Activate the Child Theme

Now that the screenshot is in place, it’s time to activate the child theme. This can be done by navigating to the “Appearance” section in the WordPress dashboard and selecting “Themes”. Find the child theme in the list and click “Activate”.

Once the child theme is activated, the new screenshot should be visible in the “Themes” section. If it’s not visible, try refreshing the page or clearing the cache.

It’s important to note that WordPress uses the wp_get_theme() function to retrieve the screenshot for a theme. This means that the screenshot file must be named “screenshot.png” and placed in the root directory of the child theme folder for it to be recognized.

Conclusion

In conclusion, changing the theme screenshot in WordPress using child themes is a straightforward process that anyone can follow. By creating a child theme and uploading a new screenshot, users can customize their WordPress site to their liking.

Frequently Asked Questions