How to Create Automated Website Screenshots in WordPress

Manually updating website screenshots wastes a lot of time. Whether you’re building a portfolio, creating a directory, or reviewing software, the constant capturing, cropping, and uploading can severely slow down your content creation.

I’ve found that while detailed tutorial screenshots still need a personal touch, automation is a massive time-saver for quick website previews. It’s the key to keeping your site fresh without the never-ending manual effort.

In this guide, I’ll show you three reliable methods to easily take automatic website screenshots in WordPress.

Whether you want to display a screenshot of any website or automatically generate thumbnails for your portfolio, these methods will help you maintain a professional, updated site.

Why Create Automated Website Screenshots in WordPress?

If you have a WordPress website, then adding screenshots to your posts gives readers a quick visual way to see what your content is about. However, taking and cropping these images manually for dozens of links can take a long time.

Automated screenshots are the perfect solution for:

• Building a web design portfolio
• Creating a theme directory
• Writing software reviews
• Performing visual testing on your own sites

Automation saves time and guarantees that your image sizes remain perfectly consistent. Plus, many of these tools allow you to easily capture a full page screenshot automatically, rather than piecing together manual captures.

This professional consistency boosts user engagement and contributes to your website’s SEO. Relevant, high-quality images keep visitors on your page longer, which sends positive signals to search engines.

Similarly, you can use automated website screenshots to create a visual backup of your site before updating a theme or making major design changes. This makes it easy to compare your website’s new and old styles side-by-side.

When to Stick to Manual Screenshots

Now, it is important to know when not to use automation. If you are creating an instructional, step-by-step tutorial, then you should stick to taking screenshots manually.

Automated tools cannot log into your WordPress admin dashboard, open hidden dropdown menus, or add precise red boxes and arrows to show a user exactly where to click.

For example, at WPBeginner, we take all of our backend tutorial screenshots manually. We then use dedicated graphics apps like Adobe Photoshop or Affinity Studio to clean up the images, blur sensitive data, and add our signature annotations.

But for public website previews, automation is absolutely the best route.

Now, let’s look at how to easily create automated website screenshots in WordPress:

Method 1: Use the Capture Plugin for Screenshots & PDF

If you want to show dynamically updated website previews without dealing with custom code, then this is the easiest method.

By using a dedicated plugin like Capture, your screenshots are generated automatically in the background. If the target website changes its design, your screenshot will update all by itself to match the new look.

Plus, because the plugin handles the image files, they won’t take up any storage space on your own WordPress server.

While there are many older screenshot plugins out there, most have been abandoned. Because of this, I highly recommend using the actively maintained Capture plugin to reliably generate these professional previews with a simple shortcode.

Step 1. Install and Configure the Capture Plugin

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

After activating the plugin, you need to navigate to Settings » Capture. Here, you will need to click the ‘Capture Console’ link to create a free account and get an API key.

While this requires an extra signup step, it ensures the service remains stable and reliable compared to older, abandoned plugins.

Below that, you will find the Default Settings section. The default viewport width and height (1200×800) work perfectly for standard desktop screenshots.

However, I suggest changing the Default Delay (seconds) to 2 or 3 seconds. Many modern websites have loading screens, custom fonts, or animations. Adding a slight delay gives the target website enough time to fully load before the plugin snaps the picture.

When you are happy with your setup, make sure to click the ‘Save Changes’ button.

After that, I highly recommend clicking the ‘Test Connections’ button. This quickly verifies that your key is working correctly, so you don’t run into errors later.

Step 2. Create a Screenshot Using Shortcode

Now, you can easily add a screenshot to any post or page using a simple shortcode. Simply search for the Shortcode block in the block editor and paste a code like this:

[capture_screenshot url="https://wpbeginner.com" vw=1200 vh=800 full=true]

How Does the Screenshot Appear?

Unlike a standard image you upload to your media library, these automated screenshots are generated instantly when a visitor loads your page.

Because they act as a ‘live window’ to the target website, this approach is incredibly useful if you run a theme directory, a web design portfolio, or a software review blog.

You can guarantee that your readers are always seeing the most up-to-date version of the target website, without you having to lift a finger to replace old images.

Customizing Your Screenshots

The Capture plugin is incredibly flexible. You can add extra parameters to the shortcode to change how the screenshot looks:

• Full Page: Use full=true to capture the entire length of the page.
• Dark Mode: Use darkMode=true to capture the dark version of a website.
• Block Ads: Use blockAds=true to hide annoying advertisements from the screenshot.
• Image Format: Use type="webp" to ensure your images are in a lightweight, modern format for faster loading.

For example, if you wanted a dark mode, full-page screenshot in WebP format, your shortcode would look like this:

[capture_screenshot url="https://example.com" full=true darkMode=true type="webp"]

This method gives you much more control than basic free tools. It’s perfect for professional review sites and portfolios.

Method 2: Use WPCode + mShots (Free Option)

If you want the exact same dynamic, space-saving benefits as Method 1, but prefer a completely free solution without creating extra accounts, this is the method for you.

By adding a custom shortcode to your site, you can tap into the WordPress.com mShots API. Just like the Capture plugin, mShots generates live images instantly when the page loads and hosts them externally, saving your server’s storage space.

Step 1: Add a Code Snippet Using WPCode

To safely add this code, I highly recommend using WPCode. It is the best WordPress code snippets plugin on the market. It allows you to add custom code without ever editing your theme’s functions.php file directly.

First, install and activate the free WPCode plugin. Then, navigate to Code Snippets » + Add Snippet in your WordPress dashboard.

Select ‘Add Your Custom Code (New Snippet)’. Give your snippet a name, like ‘Automated Screenshots’, and make sure the Code Type dropdown is set to ‘PHP Snippet’.

Next, copy and paste the following secure code into the Code Preview box:

function wpb_automated_screenshots($atts) {
    $a = shortcode_atts( array(
        'url' => 'https://www.wpbeginner.com',
        'alt' => 'Website screenshot',
        'w'   => '600',
        'h'   => '450'
    ), $atts );

    $mshots_api = 'https://s.wordpress.com/mshots/v1/';
    $target_url = urlencode( $a['url'] );
    $width      = intval( $a['w'] );
    $height     = intval( $a['h'] );
    $alt_text   = esc_attr( $a['alt'] );

    $img_src = $mshots_api . $target_url . '?w=' . $width . '&h=' . $height;

    return '<img src="' . esc_url( $img_src ) . '" alt="' . $alt_text . '" />';
}
add_shortcode('automated_shot', 'wpb_automated_screenshots');

Scroll down to the Insertion section and make sure it is set to ‘Auto Insert’.

Then, toggle the switch at the top of the screen from ‘Inactive’ to ‘Active’ and click the ‘Save Snippet’ button.

Step 2. Create a Screenshot Using Shortcode

Now, to display the automated screenshot in your WordPress posts or pages, simply add a Shortcode block to the content editor and paste the following shortcode:

[automated_shot url="https://example.com" alt="Example Website" w="800" h="600"]

Make sure to replace https://example.com with the actual website URL you want to capture. You can also easily change the alt text, width, and height right inside the shortcode.

If your target website updates its design but your screenshot is still showing the old version, the mShots API may be caching the image. You can easily force it to take a fresh screenshot by adding a random number to the end of your URL, like this: url="https://example.com/?v=1".

Method 3: Use Browse AI + Zapier for Hands-Off Automation

Unlike the first two methods that display live, externally hosted previews, this method provides true hands-off automation by physically saving the files directly to your WordPress site.

We will use Browse AI to automatically capture the screenshots and Zapier to send them directly into your Media Library. This gives you complete control over your images.

Since your screenshots are saved to your own server, they will load instantly and stay on your site permanently, even if the target website goes offline or completely changes its design.

Step 1: Create a Screenshot Robot in Browse AI

First, go to Browse AI and create a free account.

Once logged in, click the ‘Build New Robot’ button and select the ‘Monitor Site Changes’ option.

You will be asked to enter the URL of the website you want to capture.

Once you enter the link, you will need to click the ‘Start Training Robot’ button.

Browse AI will then open a new window showing that live website.

Simply click the robot icon on your screen to open the menu and select ‘Capture Screenshot’.

A small menu will appear asking what part of the page you want to capture. You can select ‘Entire page’ if you want a full, top-to-bottom screenshot, or ‘Visible part’ if you just want the top section of the website.

Next, Browse AI will ask you to give the screenshot a name. You can type in something easy to remember, like ‘Homepage Screenshot’ or ‘Competitor Pricing’, and hit Enter.

Once you are done, click the purple ‘Finish’ button at the bottom of the left panel to end the recording.

Browse AI will then ask you to give your new robot a name.

Type in something easy to recognize and click the ‘Save’ button.

After saving, you can set up a schedule.

For example, you can tell the robot to automatically visit the site and take a fresh screenshot every week or month.

Once finished, make sure you click the ‘Save’ button.

Step 2: Prepare Your WordPress Website

Before we build the automation, we need to give Zapier a secure way to talk to your website’s Media Library.

In a new tab, head over to your WordPress dashboard and install and activate the free Zapier for WordPress plugin. If you need help, see our guide on how to install a WordPress plugin.

Once the plugin is active on your site, you are ready to connect Zapier to your WordPress site.

Step 3: Create a Zap in Zapier

Next, you need to connect your robot to WordPress using Zapier.

First, you need to log in to your Zapier account. From your main dashboard, click the ‘+ Create’ button in the upper left-hand menu and select ‘Zaps’ from the dropdown menu.

When you open the builder, Zapier will show a text box asking you to describe your workflow build it using AI. Since we want to set this up precisely, you can ignore this prompt.

Instead, look just below the ‘or’ divider and click directly on the ‘Trigger’ box to build your automation manually.

A menu will pop up.

Search for and select Browse AI as your app.

Look for the ‘Account’ section in the sidebar and click the ‘Sign in’ button to securely connect your Browse AI account.

Once your account is linked, click on the ‘Trigger Event’ box. You don’t need to type anything into the search field here! Simply look right below the search bar and click on the ‘New Task – Instant’ option.

This will automatically fill in the trigger event for you. Next, you need to click the ‘Continue’ button to move to the next setup screen, where Zapier will ask for a few details.

First, select your account in the ‘Team’ dropdown. Once you do that, a new field will appear where you can select the specific ‘Robot’ you created earlier.

Finally, set the ‘Event Type’ to ‘Task finished successfully’ so Zapier only runs when a good screenshot is taken.

Make sure you click ‘Continue’ and then click the ‘Test trigger’ button. This is a necessary step because it pulls your recent test screenshot into Zapier so WordPress can use it later.

Once your test is successful, click on the second box in your workflow (the Action step) and search for ‘WordPress’ as your app.

Because you already installed the plugin in Step 2, connecting your site to Zapier is simple.

Just click the ‘Sign in’ button in the Account section and enter your WordPress login credentials when the popup window appears.

After your website is linked, click on the ‘Action Event’ dropdown menu.

Search for and select the ‘Upload Media’ option, and then click the ‘Continue’ button at the bottom of the page.

Now, you need to tell WordPress which file to upload. Click the ‘+’ (Insert Data) button on the right side of the ‘File’ box. This will open a popup showing a very long list of test data Zapier just pulled from Browse AI.

Because the list is so long, the easiest way to find the right file is to use the search bar at the top of the popup. Type in ‘src’ to filter the options.

Look for the option that ends in ‘Screenshot Src’ and select it. You may need to click the ‘more’ link to see the full name of the option.

You can also fill out the Title and Alt Text fields if you’d like, but you can safely leave all the other optional fields (like Caption or Author) blank.

Once you are done, click ‘Continue’ and then click the ‘Test step’ button.

Zapier will magically pull the screenshot from Browse AI and upload it directly into your WordPress Media Library.

If the test is successful, don’t forget to click the Publish button so your new Zap runs automatically in the background.

The process is now completely automated. Every time Browse AI captures a new image, it will automatically appear in your Media » Library in WordPress, ready for you to use in any post or page.

Bonus: How to Keep Your Screenshot Sizes Consistent

No matter which method you choose above, you will need to set a width and height for your automated images. To keep your blog looking clean and professional, I highly recommend using a standard widescreen 16:9 aspect ratio.

Most WordPress themes have a fixed maximum width for blog posts (for example, 800 pixels). If you set all your screenshots to match this width using the 16:9 ratio, they will all automatically have the exact same height.

This creates a beautifully uniform look as users scroll through your article.

To figure out what numbers to type into your screenshot tool, you can use this simple math:

• If you know your target width: Simply multiply your width by 9, and then divide it by 16 to find your perfect height.
• If you know your target height: Just multiply your height by 16, and then divide it by 9 to find your matching width.

For example, if your blog’s content area is 800 pixels wide, you would multiply 800 by 9, and then divide by 16. This gives you a perfectly scaled height of 450.

So, you would simply enter your new numbers into your shortcode parameters, like w="800" h="450".

Frequently Asked Questions

I’ve answered quite a few questions about automating website images. Here are some of the most common questions people ask about creating automated website screenshots.

1. How do I automatically take a full page screenshot of a website in WordPress?

To take an automatic screenshot in WordPress, you can use a dedicated WordPress screenshot plugin like Capture, integrate a free image API like WordPress.com mShots, or build an automation workflow using tools like Browse AI and Zapier.

These tools automatically fetch a target website’s public URL. Depending on the method you choose, they will either display a live preview instantly or upload the actual image file directly to your WordPress Media Library.

2. Do I have to pay to create automated website screenshots in WordPress?

No, you do not have to pay to generate automated screenshots. You can use completely free methods, such as adding a custom PHP snippet via the free WPCode plugin to connect to the free WordPress.com mShots API.

Additionally, third-party automation platforms like Browse AI and Zapier offer free tiers that allow website owners to capture a limited number of screenshots each month at no cost.

3. Can I use automated screenshot tools on local, staging, or private WordPress sites?

No, automated screenshot APIs like mShots or the Capture plugin require a live, publicly accessible website URL to function. These external screenshot tools cannot access websites that are hosted locally on a personal computer (localhost).

Furthermore, automated screenshot tools cannot access WordPress staging environments that are hidden behind a password, a maintenance mode plugin, or a firewall.

4. Is it secure to use a third-party API to automate website screenshots?

Yes, using reputable screenshot APIs like WordPress.com mShots or the Capture plugin is generally secure for public content. These third-party services simply visit a public website URL and take a picture of what is publicly visible on the internet.

However, website owners should never use third-party screenshot automation tools to capture private, logged-in WordPress dashboard pages or web pages containing sensitive personal data.

5. Why is my automated WordPress.com mShots screenshot showing a blank page?

The WordPress.com mShots API may occasionally show a blank space the very first time a specific website URL is requested.

That’s because the mShots API takes a few seconds to generate the initial image. If the automated screenshot is blank, simply refreshing the WordPress page usually fixes the issue. 

Because mShots also caches images, you can force the API to take a fresh website screenshot by adding a random version string to the end of your target URL in your WordPress shortcode.

Additional Resources for Enhancing Your Visual Content

I hope this article helped you learn how to easily create automated website screenshots in WordPress. If you want to take your website’s images and media performance to the next level, you may also want to see these additional resources:

• Beginner’s Guide to Image SEO – Optimize Images for Search Engines – Learn how to properly name and tag your screenshots to drive more organic search traffic to your site.
• Tools to Create Better Images for Your Blog Posts – Discover our expert picks for the best tools to create engaging graphics, annotations, and visual content for your tutorials.
• How to Optimize Images for Web Performance Without Losing Quality – Find out how to properly compress your screenshots and photos so your website continues to load lightning-fast.
• Best WordPress Portfolio Plugins for Designers & Photographers – If you are using automated screenshots to show off your web design work, these plugins will help you display them beautifully to potential clients.

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.