How to Display a Screenshot of Any Website Using Shortcode in WordPress

Created with:

Visibility:

public

September 2, 2023

Have you ever wanted to display a screenshot of a website on your own WordPress site? Whether you’re a developer showcasing your work or a blogger discussing a specific webpage, including a screenshot can add visual appeal and provide valuable context. In this article, we will show you how to use a shortcode to easily display screenshots of any website on your WordPress site. Don’t worry, you don’t need any coding experience – it’s simpler than you think!

					function wpturbo_display_website_screenshot( $atts ) {
    $a = shortcode_atts( array(
        'url' => 'https://example.com',
        'width' => '700',
        'height' => '400'
    ), $atts );

    $screenshot_url = "https://api.screenshotapi.net/capture?url={$a['url']}&width={$a['width']}&height={$a['height']}&format=jpeg&full_page=true";

    return "<img src='{$screenshot_url}' alt='{$a['url']}' width='{$a['width']}' height='{$a['height']}' />";
}
add_shortcode( 'website_screenshot', 'wpturbo_display_website_screenshot' );

The provided code snippet allows you to display a screenshot of any website using a shortcode in WordPress. This functionality is useful if you want to showcase a preview of a website within your WordPress content.

The first step in the code is to define a new function called wpturbo_display_website_screenshot(), which accepts attributes as parameters. These attributes will be passed through the shortcode when it is used.

Inside the function, we use the shortcode_atts() function to set default values for the attributes. In this case, the default values are:

url: ‘https://example.com‘
width: 700
height: 400

These values will be used if the corresponding attribute is not specified in the shortcode.

Next, we construct the URL of the website screenshot using the values from the attributes. We use the provided API https://api.screenshotapi.net/capture to capture the website screenshot. The url, width, and height parameters are set based on the attributes passed through the shortcode. We also specify the format parameter as JPEG and set full_page to true to capture the entire webpage.

$screenshot_url = "https://api.screenshotapi.net/capture?url={$a['url']}&width={$a['width']}&height={$a['height']}&format=jpeg&full_page=true";

Finally, we return the HTML code for an img tag with the src attribute set to the constructed screenshot_url. We also set the alt, width, and height attributes using the values from the attributes passed through the shortcode.

return "<img src='{$screenshot_url}' alt='{$a['url']}' width='{$a['width']}' height='{$a['height']}' />";

To use this functionality, you can simply add the [website_screenshot] shortcode within your WordPress content. By default, it will display a screenshot of the https://example.com website with a width of 700 pixels and a height of 400 pixels. However, you can customize these attributes by including them in the shortcode like [website_screenshot url="https://example.com" width="700" height="400"].

How to Display a Screenshot of Any Website Using Shortcode in WordPress

Add Snippet To Project