Are you looking for a way to display a screenshot of any website using a shortcode? While there’s probably a plugin for this, we have created a quick code snippet that you can use to display screenshot of any website using shortcode in WordPress.
Instructions:
All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:
function wps_screenshot($atts, $content = null) {
extract(shortcode_atts(array(
"screenshot" => 'http://s.wordpress.com/mshots/v1/',
"url" => 'http://',
"alt" => 'screenshot',
"width" => '400',
"height" => '300'
), $atts));
return $screen = '<img src="' . $screenshot . '' . urlencode($url) . '?w=' . $width . '&h=' . $height . '" alt="' . $alt . '"/>';
}
add_shortcode("screenshot", "wps_screenshot");
This is the example of the shortcode. You can replace the image URL with your image and also adjust the width and height as you need.
[screenshot url="http://isitwp.com/image.jpg" alt="WordPress code snippets for your blog" width="200" height="200"]
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly add code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: 9 best WordPress events plugins and how to add a portfolio to your WordPress site.
Any help on how to use this with a custom meta field that can be entered from front-end?
thanks.
I really like this snippit and just put it to use on my portfolio page. After the first page refresh the images seem to load just fine even on my other computer. So I guess they just have to go through that mshots once really. Pretty cool
The main downfall is not utilizing the featured image.
Hi Jamie, You could do this with the featured image but would require you do create screenshots of every site. This way you only need to add the url of any site to get a screenshot.
This may be true but if you preview your post before hand that should not be a big problem.