How to generate website screenshots for WordPress websites

This guide will help you easily generate a screenshot of a website for your WordPress website by implementing PHP code into the functions.php template file and using a WordPress shortcode. This script uses the WordPress.com screenshot generator and all you need to do is copy and paste simple code into your functions.php file and place a simple shortcode on a page or post on your WordPress website.

What we’ll be doing:

• Writing a shortcode function to display a screenshot of any website on your WordPress website using a shortcode

Step 1: Implement the shortcode function

To generate website screenshots for WordPress websites you will need to enter the script below into your functions.php template file. The functions.php file can be found at this path: Appearance > Editor or in your wp-content > theme FTP folder.

add_shortcode('ss_screenshot', 'ss_screenshot_shortcode');
 
function ss_screenshot_shortcode($atts){
 
 $width = intval($atts['width']);
 
 $width = (100 <= $width && $width <= 300) ? $width : 200;
 
 $site = trim($atts['site']);
 
 if ($site != ''){
 
 $query_url = 'http://s.wordpress.com/mshots/v1/' . urlencode($site) . '?w=' . $width;
 
 $image_tag = '<img class="ss_screenshot_img" alt="' . $site . '" width="' . $width . '" src="' . $query_url . '" />';
 
 echo '<a class="ss_screenshot_link" href = "' . $site . '">' . $image_tag . '</a>'; 
 
 }else{
 
 echo 'Bad screenshot url!';
 
 }
}

The PHP script above to displays a screenshot of any website on your WordPress website will also link the screenshot you generate to the website you have taken a screenshot of. To remove the link just delete <a class=”ss_screenshot_link” href = “‘ . $site . ‘”>.

Step 2: Place the shortcode on your webpage

Place the shortcode below on your WordPress website to generate website screenshots for WordPress websites. You will be able to grab a screenshot of any website you enter into the shortcode. The shortcode below would grab a screenshot of example.com. You can change example.com to any webpage you want to generate a screenshot of.

[ss_screenshot width='300' site='http://example.com']

This shortcode also allows you to adjust the width of the screenshot. It is currently set at 300px. To change the size of the screenshot you  grab for your WordPress website just replace 300 to the width you wish to produce.