Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Create Automated Website Screenshots in WordPress

Do you want to create automated website screenshots in your WordPress site? If you frequently add website screenshots to your WordPress posts or pages, then automating the process will save you time spent on capturing screenshots manually. In this article, we will show you how to create automated website screenshots in WordPress.

Creating automated website screenshots in WordPress

Method 1: Create Automatic Website Screenshots in WordPress using Plugin

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

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

The plugin works out of the box, and there are no settings for you to configure.

Simply edit a post/page or create a new one. You will notice a new button in the visual editor to add website screenshots.

Browser Shots button in WordPress visual editor

Clicking on it will bring up a popup where you can enter the website URL, alternate text, link to URL, and height / width of the screenshot.

Enter a URL to generate website screenshot

Click on OK button and the plugin will add a shortcode to your WordPress post. You can now preview your post to see the plugin in action.

If you are using the Text Editor in WordPress or don’t want to use the button in visual editor, then you can also manually add the shortcode yourself.

[browser-shot url="https://www.wpbeginner.com"]

By default, the plugin will create a screenshot of 600 x 600 pixels. You can change that by adding the width and height attributes to the shortcode.

[browser-shot url="https://www.wpbeginner.com" width="400" height="400"]

It will also automatically link to the website. You can change that by adding a link attribute to the shortcode and add any link you want.

[browser-shot url="https://www.wpbeginner.com" width="400" height="400" link="http://example.com"]

If you want to add a caption below the screenshot, then you can do that by wrapping the caption text around the shortcode.

[browser-shot url="https://www.wpbeginner.com"]WPBeginner - WordPress Resource Site for Beginners[/browser-shot]

The caption will use your WordPress theme’s caption styles. Here is how it looked on our demo website:

Website screenshot generated with Browser Shots plugin

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. It is not recommended for beginners. If you are comfortable pasting snippets from web into WordPress, then you can use this method.

Simply add this code to your theme’s functions.php file or a site-specific plugin.


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.

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”]

Replace URL and Alt fields with your own values.

By default, this code will generate a screenshot of 600 x 450 pixels. You can change that by adding your own height and width attributes to the shortcode.

[screen url=”http://wpbeginner.com” alt=”WPBeginner” w=”400″ h=”400″]

That’s all, we hope this article helped you learn how to create automated website screenshots in WordPress. You may also want to see our guide on how to automate WordPress and social media with IFTTT.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

18 CommentsLeave a Reply

    • You would need to reach out to the plugin’s support for adding that functionality

      Admin

  1. I’ve used this plugin but it stops on the third use of the short code and reports ‘too many requests’ – i was hoping to display 45 URLs. Do you have any suggestions to avoid this?

    • You would want to reach out to the plugin’s support if you haven’t already for what options they have available for avoiding that issue.

      Admin

  2. Does this browser shot plugin check for updates to the site, or do you have to manually redo to get the latest look of the target website? Thanks:)

    • You would want to reach out to the plugin’s support for the current refresh rate

      Admin

  3. Your code is just what I was looking for. The only thing is that I want the url not prefilled in the code but generated from a custom field ‘wpcf_websitelink’.
    How can I add the code to get the content from the field.
    So this line
    “url” => ‘https://www.wpbeginner.com’,
    should have something to get the content of the field wpcf_websitelink in stead of the wpbeginner.com link

    • If you are using a plugin to create that custom field then you would want to reach out to the support for that plugin for how to access that information and replace the url value with what they tell you.

      Admin

  4. This is a wonderfully simple plugin to use. Great job! Is there any way to crop the images? Some sites show with the cookie warning t the top or bottom and it would be good to be able to crop that off.

  5. Helpful tutorial and information, but it feels a little incomplete.
    If it contained info on how to save the images to the library then it would be perfect :)

  6. With any of these methods, what will be the side effect on the speed of the website? As a plugin, there will be some addition to load time. If the images are not stored on the media library, there will again be some addition to website load times.
    So from the methods given, which one is recommended considering website load speed?

Leave a Reply to Karin Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.