How to Create Automated Website Screenshots in WordPress

Taking screenshots for a tutorial can feel like a never-ending task. You have to capture, crop, annotate, and upload each image, repeating the process over and over again.

We know this struggle all too well from creating our own guides here at WPBeginner. It’s a huge time-sink that can really slow down your content creation workflow.

The good news is that you can automate this entire process. This not only saves you valuable time but also helps keep your site looking professional and consistent.

In this article, we will show you how to easily create automated website screenshots in WordPress.

Why Create Automated Website Screenshots in WordPress?

If you have a WordPress website, then you may want to create and add automated site screenshots to your posts to give potential readers a quick way to see what your content is about.

This can boost user engagement and contribute to your website’s SEO. Relevant, high-quality images help search engines better understand your content, and they can improve visitor engagement signals like time on page.

Similarly, you can use automated website screenshots to create a visual backup of your site before updating a theme or making any other changes. This can help you compare and see the difference between your website’s new and old styles.

Automated screenshots can also compare different services or websites, guide your reader through a step-by-step tutorial, and track website progress over time.

That being said, let’s take a look at how to easily create automated website screenshots in WordPress:

• Method 1: Create Automatic Website Screenshots in WordPress using a Plugin
• Method 2: Create Automated Screenshots by Adding Code to WordPress
• Bonus: Take Screenshots Manually For Your Website
• Frequently Asked Questions
• Additional Resources

Method 1: Create Automatic Website Screenshots in WordPress using a Plugin

This method is easier and thus recommended for beginners and users who don’t want to deal with code.

First, you need to install and activate the Browser Screenshots plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Important: Please note that at the time of writing, this plugin has not been updated for a long time. While it may still work, it could pose a compatibility or security risk. We recommend testing it on a staging site first, and always make sure you have a complete WordPress backup before installing it.

Upon activation, the plugin will work out of the box, and there are no settings to configure.

Now, simply visit a page or post where you want to add an automated website screenshot from the WordPress admin sidebar.

Here, click the ‘Add Block’ (+) button at the top left corner of the screen to open the block menu. Next, add the ‘Browser Shots’ block in the editor.

Once you have done that, add the URL for the website that you want to acquire an automated screenshot for and click the ‘Load Image’ button.

The plugin will now automatically add a screenshot for the website that you chose. You can now add an alt text for the image and change its’ width and height from the block panel on the right.

Toggling the’ Use link’ switch in the panel allows you to add a link to the screenshot that directs you to the website.

You can also toggle the ‘Link to the current post’ switch if you want to add the post link to the screenshot.

Finally, click the ‘Update’ or ‘Publish’ button to store your settings.

You can now visit your WordPress site to view the automated screenshot.

Note: Browser Shots plugin uses WordPress.com’s mshots API to generate screenshots on the fly. These images are not stored in your WordPress media library. They are served directly from WordPress.com servers. See our guide on the difference between WordPress.com and WordPress.org.

Method 2: Create Automated Screenshots by Adding Code to WordPress

This method requires you to add code to your WordPress files. To create automated screenshots, you must add custom code to your theme’s functions.php file.

However, remember that the smallest error in the code can break your site and make it inaccessible.

That is why we recommend using WPCode. It is the best WordPress code snippets plugin on the market which makes it super safe and easy to add custom code.

Expert Tip: At WPBeginner, we use WPCode to manage all the custom code snippets across our portfolio of websites. It allows our development team to add and organize code safely without ever having to edit the theme’s functions.php file directly.

First, you need to install and activate the WPCode plugin. For detailed instructions, please see our step-by-step guide on how to install a WordPress plugin.

Upon activation, visit the Code Snippets » + Add Snippet page from the WordPress dashboard.

Once you are there, click the ‘Use Snippet’ button under the ‘Add Your Custom Code (New Snippet)’ option.

You will now be taken to the ‘Create Custom Snippet’ page, where you can start by typing a name for your snippet. The name can be anything that will help you identify the code.

Next, select ‘PHP Snippet’ as the code type from the dropdown menu on the right.

After that, simply copy and paste the following code into the ‘Code Preview’ box:

function wpb_screenshots($atts, $content = NULL) {
extract(shortcode_atts(array(
"snap" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'https://www.wpbeginner.com',
"alt" => 'screenshot',
"w" => '600', // width
"h" => '450' // height
), $atts));
  
$img = '<img alt="' . $alt . '" src="' . $snap . '' . urlencode($url) . '?w=' . $w . '&h=' . $h . '" />';
 
return $img;
}
add_shortcode("screen", "wpb_screenshots");

Similar to the plugin we mentioned earlier, this code also uses the WordPress.com Mshots API to generate screenshots on the fly.

Now, you can add the URL for the website whose automated screenshots you want to take next to the "url" =$gt; line in the code.

You can also add your preferred width and height for the screenshots next to the "w" => and the "h"=> lines in the code.

Next, scroll down to the ‘Insertion’ section and choose the ‘Auto Insert’ mode.

The code will now be automatically executed upon activation.

Finally, scroll back to the top of the page and toggle the ‘Inactive’ switch to ‘Active’.

Next, click the ‘Save Snippet’ button to store your settings and activate the snippet.

Now, to display a website screenshot in your WordPress posts and pages, you will need to enter the shortcode like this:

[screen url="http://wpbeginner.com" alt="WPBeginner"]

You can replace the URL and Alt fields with your own values.

First, open the page/post in the block editor from the WordPress dashboard and click the ‘Add Block’ (+) button.

From here, add the ‘Shortcode’ block to the page/post. Then, add the shortcode above and replace it with your own values.

Finally, click the ‘Update’ or’ Publish’ button to store your settings.

Now, visit your WordPress site to view the automated screenshot in action.

Bonus: Take Screenshots Manually For Your Website

If you don’t want to use automated screenshots, then you can take screenshots manually with different tools like Droplr.

This gives you more freedom to choose a specific area for an image as compared to automated screenshots. Plus, you can edit these images in Adobe Photoshop and add other elements like arrows or red boxes to them.

This feature isn’t available for automated screenshots where plugins or code automatically fetches the image for you.

To take a screenshot with Droplr, you must first install the app on your computer. Once you do that, click the Droplr icon in the Windows or Mac taskbar and select the ‘Screenshot’ option.

Next, you can select the area where you want to take the screenshot.

Droplr will then open that image in a browser where you can download it or share the link with others. For more information, see our tutorial on how to take a screenshot in WordPress.

Frequently Asked Questions

Here are some of the most common questions we get asked about creating automated screenshots in WordPress.

Are automated screenshots as good as manual screenshots?

It depends on your needs. Automated screenshots are excellent for speed and consistency, but manual screenshots give you more control. With manual captures, you can select specific areas, add annotations like arrows or text, and optimize the image before uploading.

Will using automated screenshots slow down my website?

No, they shouldn’t impact your site’s performance. The methods described in this article use an external service from WordPress.com to generate the images. This means the images are loaded from their servers, not yours, which prevents extra load on your hosting.

Can I customize how the automated screenshots look?

Customization is limited. You can typically define the width and height of the screenshot. However, you can’t add annotations, effects, or crop a specific part of the page like you could with a manual screenshot editing tool.

Are the screenshots saved to my WordPress Media Library?

No, the screenshots are generated on the fly and are not stored in your Media Library. This helps save storage space on your hosting account, as the images are served directly from WordPress.com’s servers.

Why isn’t my automated screenshot showing up?

The WordPress.com service that generates these screenshots works great for live, public websites. However, it may not be able to capture screenshots of websites that are on a local computer (localhost), password-protected, or behind certain firewalls. It also may not perfectly render pages that use complex animations or require user interaction to display content.

Additional Resources

Now that you know how to automate website screenshots, you may also want to check out these other helpful guides:

• Beginner’s Guide to Image SEO – Learn how to properly optimize your images for search engines to get more traffic to your site.
• Tools to Create Better Images for Your Blog Posts – Check out our expert picks for the best tools to create more engaging images for your articles.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.