How to Automatically Take Browser Screenshots and Display Them in WordPress

Posted on October 22, 2020 by 2 Comments

How to Automatically Take Browser Screenshots and Display Them in WordPress
Blog / WordPress / How to Automatically Take Browser Screenshots and Display Them in WordPress
Play Button

Images and screenshots are a key element in any WordPress blog. In particular, screenshots enable you to highlight key aspects of other pages. However, it can be a hassle to take the perfect browser screenshots and add them to your posts. While you can get the job done depending on your Operating System (OS), taking screenshots consistently is a challenge.

Enter the Browser Screenshots plugin. This lets you screenshot any website, without even leaving the WordPress editor. If your ears pricked up at this, you’ll likely want to keep reading.

Let’s check out how it works!

Subscribe To Our Youtube Channel

An Introduction to the Browser Screenshots Plugin

The Browser Screenshots plugin.

Browser Screenshots is arguably a niche plugin that deserves a place on your website. It enables you to take dynamic browser screenshots of any page without leaving the WordPress editor. This applies to both the Classic and Block Editors, depending on your preferred option. This is in contrast to OS-native solutions, that require you to open fresh browser windows and optimize your images further, outside of the platform.

If you use the Classic Editor, Browser Screenshots enables you to use a custom shortcode to generate the shots you want. You can add multiple screenshots within any page or post, and the same applies to the Block Editor.

Since the plugin generates screenshots dynamically, it’s perfect for situations where you don’t want to use outdated shots for your content. If you have a page or post that includes a Browser Screenshots shortcode or block, visitors will see a real-time screen grab. This is a tantalizing proposition for certain types of content.

Regardless of which approach you use, the plugin also enables you to customize the resolution of the browser screenshots taken. You can also add alt text and text to your images, as well as custom CSS classes.

However, it’s important to understand that this plugin only takes ‘above-the-fold’ browser screenshots. This means areas where you need to scroll to won’t be shown. How big this area is will depend on the parameters you configure for each browser screenshot, and you’ll learn how to do this later.

Key Features:

  • Use shortcodes or blocks to take custom shots of whatever website is in your browser window.
  • Add browser screenshots within your content without having to take or upload them manually.
  • Customize your browser screenshots’ resolution.
  • Add custom CSS classes to the images the plugin generates.
  • Add links and alt text to your images.

Price: Free | More Information

How to Use the Browser Screenshots Plugin (2 Approaches)

By now, you already know how the Browser Screenshot plugin works, so let’s discuss how to use it. Shortcodes are a fundamental part of the plugin, so let’s look at this first.

1. Use Shortcodes to Generate Dynamic Browser Screenshots

The Browser Screenshots plugin enables you to use the following custom shortcode to generate dynamic browser shots:

[browser-shot url="" width="600" height="400"]

The shortcode includes two basic parameters: width and height. Both parameters use pixel values, and the default resolution the plugin uses to take shots is 600 x 400. Of course, you’ll also want to add the specific URL you want to screenshot to the shortcode too.

Regardless of whether you use the Block Editor or Classic Editor, the shortcode will render a screenshot similar to the following:

The Elegant Themes homepage.

However, Browser Screenshots also enables you to set several custom parameters. Besides width and height, those include the following:

  • Alt: This parameter enables you to set alt text for your screenshot.
  • Link: You can choose what link the image points towards using this parameter (which can differ from where the shot originates from).
  • Target: This parameter enables you to control whether image links open in a new window or not.

As an example, here’s what a full shortcode including all the parameters would look like:

[browser-shot url="" width="700" height="500" alt="Google's homepage" link=""]

You can also use shortcodes to add captions manually:

[browser-shot url="" width="700" height="500" alt="Google's homepage" link=""]Here's the caption[/browser-shot]

In most cases, the two most important parameters you’ll use are width and height. Using the same values for all the browser screenshots you take often won’t return the best results, so you’ll want to tailor your parameters to suit the content.

2. Use Blocks to Add Screenshots to Your Website

If you use the Block Editor, the Browser Screenshots plugin will give you access to a new block called Browser Shots:

Adding a Browser Shots block.

Selecting the Block will prompt the plugin to ask you what website you want to use to generate a screenshot. In this example, we’re using the Amazon US home page:

Taking a browser screenshot of the Amazon homepage.d

Once you click on Find Image, the plugin will ‘take’ a screenshot and display it within the Block Editor:

A browser screenshot of Amazon.

One thing to keep in mind is that the plugin can’t access private pages or log into them for you. For those types of browser screenshots, you’ll have to do the dirty work yourself.

Moving on, to the right of that screenshot you can see the Block details tab. This enables you to modify all of the parameters we discussed earlier without the need to add custom shortcodes.

Modifying the width and height of your browser screenshots is much simpler using the Block Editor. This is because the editor enables you to check out a preview by hitting the Refresh Image button below the height and width parameters:

Changing the resolution of a browser screenshot.

If you compare both examples, you can see how the change in resolution modifies the area that the plugin screenshots for you. Beyond this, you can also add custom links to your screenshots, configure whether they open in a new tab or not, and set custom CSS classes here.


If you regularly include browser screenshots within your blog’s content, the Browser Screenshots plugin can save you a lot of time. It’s a fairly niche plugin, but if you’re among the crowd we mentioned, it’ll make editing posts a whole lot easier.

Using Browser Screenshots, you can add screengrabs of your browser using a simple shortcode or the Block Editor. For shortcodes, the plugin includes several parameters that enable you to customize screenshots, such as width, height, and even alt (for alt text).

Do you have any questions about how to use the Browser Screenshots plugin? Let’s talk about them in the comments section below!

Article thumbnail image by VectorMine /


Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Premade Layouts

Check Out These Related Posts

How to Use the WordPress Query Loop Block

How to Use the WordPress Query Loop Block

Posted on January 28, 2023 in WordPress

The WordPress editor is growing into a full-fledged site builder. Thanks to the full site editing and the new theme blocks like the Query Loop Block, you can display lists of dynamic content for any post type anywhere in WordPress with ease. In this article, we’ll dive deeper into the...

View Full Post
How to Use the WordPress Stack Block

How to Use the WordPress Stack Block

Posted on January 26, 2023 in WordPress

Thanks to the introduction of Gutenberg blocks in version 5.8, WordPress makes it easy to organize your content and create awesome patterns. With the help of the WordPress Stack Block, you can add any type of block you choose, then display it vertically to create beautifully stunning layouts with...

View Full Post
7 Best Gallery Plugins for WordPress (in 2023)

7 Best Gallery Plugins for WordPress (in 2023)

Posted on January 21, 2023 in WordPress

Image galleries have solidified their place on the web as a popular way to showcase images, videos, products, portfolios, and more. Whether you are a photographer, blogger, or small business, making your image galleries stand out from the crowd is essential to marketing and user experience....

View Full Post


  1. Hi Will,
    I’m amazed at how there’s a plugin for anything we want to do online.
    Does the plugin slow down the website? On a Mac, taking a screenshot is simple (even though I optimize the image on Photoshop, taking some more seconds to upload it, but I’m ok with that), and I don’t see the need for another plugin on my website. Unless each of my posts had hundreds of browser images, I would consider the plugin.
    Thanks for the article.

    • Thanks for sharing your thoughts, Vasco. I ran a few tests and the plugin doesn’t seem to have a significant impact on performance, although you can see a slight dip in page speed with most plugins and themes.

Get Started With Divi