Website screenshots are a common resource for the images used in WordPress posts. However, creating the proper screenshots is sometimes time-consuming since it usually involves multiple steps. With the traditional way, you have to finish all the following steps before you can insert the screenshots you want to use in WordPress posts.
- Take screenshots manually by using a browser tool.
- Download the images to the local computer.
- Resize and edit the images locally with software like PhotoShop.
- Upload the images to the media library of your WordPress website.
But thanks to the power of WordPress, now you don’t need to spend so much time in downloading, editing and uploading screenshots because all the complexity can be eliminated. In this tutorial, we will present two simple solutions for you to automate website screenshots in WordPress.
Solution 1: Automate Website Screenshots with Browser Shots
Browser Shots is a popular WordPress plugin that is dedicated to making website screenshot creation an easy thing. It automates the entire process of taking and embedding screenshots in WordPress posts and pages by offering a simple shortcode. You only need to enter the URL of the page that you want to capture in the shortcode, and all the rest things are taken care by the plugin.
The screenshots generated by Browser Shots are not supplied from the WordPress media library. Instead, they are served from the servers of WordPress.com because the plugin is developed based on the mshots API of WordPress.com.
Browser Shots doesn’t come with any extra settings, so you only need to install the plugin and activate it before you can use it to generate website screenshots automatically.
After getting the plugin prepared, you can test it by creating a new post or page, and then insert the following shortcode in the text editor.
The URL included in the shortcode is the webpage that you want to capture. It can be any URL on your website or any other site.
By default, the shortcode creates a screenshot in the size of 600×600 pixels, and the screenshot is linked to the image URL automatically. Of course, there are some other parameters available for you to customize the shortcode, which enables you to:
- Change the size of the screenshot by adding width=”700″ height=”400″ to the shortcode.
- Link the screenshot to any URL you like by adding link=”http://domain.com”. This parameter is only needed when you want the screenshot to be linked to another URL other than the image URL. If you want the link to be opened in a new window, use target=”_blank”.
- Add alt text to the screenshot with alt=”WordPress Screenshot” to make it search engine friendly.
Besides, you can also add a caption to an automated screenshot in the following way. The caption uses the default caption styles in WordPress.
If you don’t want to deal with the shortcode, you can also edit your post in WordPress visual editor and add a website screenshot by using the “Browser Shots” button. Clicking on the button, you will get a popup in which you can enter the image URL, width, height, caption and alt text without touching any code.
Saving the popup will generate a shortcode in the post editor automatically.
Preview the post, and you will get a website screenshot like this.
Since the plugin is multisite compatible, you can use it for free on any WordPress multisite network. Simply enable the shortcode for every website in the network.
Solution 2: Automate Website Screenshots by Editing Your Theme
If you don’t like too many plugins to be installed on your WordPress site for the sake of performance, you can also make a shortcode by yourself by editing your theme’s functions.php file.
To be more specific, the code below can help you do this. Of course, you are able to change the shortcode, width, height and image URL in the code according to your own preference.
However, there is one thing to remember. You’d better add the code to the functions.php file of a child theme instead of the original theme, or you will lose your customizations when updating the theme. If you don’t have a child theme, make sure to create one immediately.
Just like the Browser Shots plugin, the code above enables automatic screenshot creation by using the mshots API of WordPress.com, so your new shortcode actually works in the similar way as the shortcode offered by the plugin.
After saving your theme file, you can create a new post and enter the following shortcode to test the automatic generation of website screenshots. The image URL and alt text should be your own.
[screenshot url="https://whatswp.com" alt="WhatsWP"]
This shortcode will create a website screenshot which is 700 pixels in width and 500 pixels in height by default. But you are able to customize the size by defining the width and height attributes in the shortcode.
[screenshot url="https://whatswp.com" alt="WhatsWP" w="600" h="600"]