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.
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.
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.
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:
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.
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.
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
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.
Thank you so much <3
Now i can make more image from capture screen image
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.
Where do the screenshot get saved too?
These images are not stored in your WordPress media library. They are served directly from WordPress.com servers.
Is it possible to get screenshots with https ?
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
Did you get how to do this?
It is possible to save screenshot in media library and make that as featured image. Thanks.
Great info. I will surely test the plugin on my website to actually have a feel of it.
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?