WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Plugins» How to Create Automated Website Screenshots in WordPress

How to Create Automated Website Screenshots in WordPress

Last updated on July 13th, 2016 by Editorial Staff
283 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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.

283 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

18 Comments

Leave a Reply
  1. Samuel Kaffy says:
    Feb 2, 2021 at 10:05 am

    Pls, how can I make the screenshots downloadable as an image file?

    Reply
    • WPBeginner Support says:
      Feb 3, 2021 at 9:03 am

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

      Reply
  2. Nigel Billam says:
    Oct 22, 2020 at 10:50 am

    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?

    Reply
    • WPBeginner Support says:
      Oct 23, 2020 at 10:13 am

      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.

      Reply
  3. Cory Goodwin says:
    Apr 23, 2020 at 12:09 pm

    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:)

    Reply
    • WPBeginner Support says:
      Apr 24, 2020 at 10:09 am

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

      Reply
  4. Karin says:
    Feb 27, 2019 at 4:54 am

    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

    Reply
    • WPBeginner Support says:
      Feb 27, 2019 at 11:17 am

      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.

      Reply
  5. Tien Le says:
    Dec 30, 2017 at 12:32 pm

    Thank you so much <3
    Now i can make more image from capture screen image :)

    Reply
  6. Steve Renow says:
    Nov 5, 2017 at 8:38 am

    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.

    Reply
  7. Daniel says:
    Oct 10, 2016 at 12:37 pm

    Where do the screenshot get saved too?

    Reply
    • WPBeginner Support says:
      Oct 10, 2016 at 12:44 pm

      These images are not stored in your WordPress media library. They are served directly from WordPress.com servers.

      Reply
  8. Bernd says:
    Jul 26, 2016 at 7:28 am

    Is it possible to get screenshots with https ?

    Reply
  9. Dumitru Brinzan says:
    Jul 15, 2016 at 3:18 am

    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 :)

    Reply
    • Annapurna says:
      May 12, 2017 at 6:01 am

      Did you get how to do this?

      Reply
  10. Damith says:
    Jul 14, 2016 at 11:33 am

    It is possible to save screenshot in media library and make that as featured image. Thanks.

    Reply
  11. Obeng blankson says:
    Jul 14, 2016 at 9:29 am

    Great info. I will surely test the plugin on my website to actually have a feel of it.

    Reply
  12. Ankit Agarwal says:
    Jul 14, 2016 at 2:34 am

    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?

    Reply

Leave a Reply 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.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
OptinMonster
OptinMonster
Convert website visitors into email subscribers. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2020 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2020)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2020)
    • SiteGround Reviews from 4196 Users & Our Experts (2020)
    • Bluehost Review from Real Users + Performance Stats (2020)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2020 – Step by Step Guide
Deals & Coupons (view all)
AWeber logo
AWeber Coupon
Get a completely FREE plan with AWeber, or 14.9% off the Pro plan. Start your email list today.
MonsterInsights Coupon Code
MonsterInsights Coupon
Get 50% off MonsterInsights, the best Google Analytics plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).
Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress CDN by MaxCDN | WordPress Security by Sucuri.