Advertisement
Posts

How to Generate Website Screenshots For Your WordPress Site

by

In this tutorial you'll learn an open secret: how to generate screenshots of websites to use in your WordPress posts using a service provided by WordPress.com. We'll even turn this into an easy-to-use shortcode to display the screenshots... let's get started!


Background

It's an open secret, and has been for a couple of years, that WordPress exposes a screenshot generator at it's s.wordpress.com subdomain. And the scuttlebutt is that as long as you don't abuse it, then it's free to use. WordPress.com uses it for generating screenshots for it's various activities.

For instance, here's the url to show a screenshot of wp.tutsplus with a width of 400 pixels:

http://s.wordpress.com/mshots/v1/http%3A%2F%2Fwp.tutsplus.com?w=400

You may need to click the link again as the generator takes a little time to cache the image.

What we'll be doing:

  • write a shortcode function to display a screenshot
  • use the shortcode to display a screenshot as part of the post loop using a custom field for the url

Step 1 The Shortcode Function

Our shortcode will be used like:

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

You can add the code to the functions.php file in your theme directory. The full code is available in the source link above.

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!';
  
  }
}

What this code does:

  • declare a shortcode called ss_screenshot with the add_shortcode function
  • the shortcode function accepts the $atts array containing the two shortcode attributes: width and site
  • the width attribute is converted to an integer and checked to make sure it's within a suitable range, in this case between 100 and 300 pixels. Note: we use the PHP ternary operator to assign a default width of 200 if the supplied width is outside our range. This also takes into account a missing width attribute.
  • the site attribute is trimmed to remove accidental left and right spaces
  • we create a query url by adding a urlencoded site attribute and the width attribute
  • finally we wrap the query_url in an image tag and a link tag so that users can click the screenshot and be taken to the site

Step 2 Test The Shortcode

In a post or page, insert this shortcode:

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

When you view the post or page, you should see a 300 pixel wide screenshot of Amazon. Remember, you may have to refresh the page after a few seconds to see the cached screenshot. Play around with the width and watch what happens when you go out of range. By the way, you can set any width range you like. Also, test a bad url: you should see the warning message instead of a screenshot.

Now that we have a working shortcode, let's see how we can incorporate that into our WordPress loop.


Step 3 Custom Field Set-Up

Let's imagine a scenario where we want to display a screenshot of a site beside each of our posts. For formatting and usability reasons, it's best to automate this process by adding a custom field to our post edit screen. Into that field we can input a site url which can then be used in the post loop to display a screenshot using our new shortcode.

If the custom field box is not showing on your post edit screen, then look at screen top right and you should see the Screen Options tab. Click that and tick the Custom Fields box. Now you should see something like this at screen bottom:

Click the Enter New link and create a new custom field called screenshot_url. This is what you should see:

Now when you create/edit a post (the custom field appears for all posts) you can input a url for generating a screenshot related to the post.


Step 4 Add Screenshot Display To The Loop

Here's a seriously cut-down version of the standard WordPress post loop (as found in a theme template file) including our screenshot display code:

if (have_posts()) while (have_posts()) : the_post();

  the_title();
  
  $url = get_post_meta($post->ID, 'screenshot_url', true);
  
  do_shortcode('[ss_screenshot width="280" site="' . $url . '"]'); 
  
  the_content();

endif;
endwhile;

What this code does:

  • check if we have posts, start looping and display the post title
  • get the contents of the screenshot_url custom field by passing the current post ID and the name of the custom field to the get_post_meta function
  • because we are in a template file, we use the do_shortcode function to parse our shortcode which includes the screenshot url for this post
  • then we display the post content and end the loop

Step 5 Test The Loop

If you created a post with the title Honda Accord and gave it a screenshot url of http://www.honda.com, using your new loop setup, you should see something like this:


Conclusion

Instead of displaying a harsh warning message if a post doesn't have a screenshot url attached, you could show a default image.

If you don't wish to use the screenshot generator from WordPress, or if you have larger needs, you could use the free option at a screenshot service like http://www.shrinktheweb.com. You could apply the techniques used in this tutorial to any screenshot service.

Things to remember:

  • the screenshots take a few seconds (usually) to generate, so refresh the page
  • urlencode the url sent to the screenshot service
  • begin your urls with http://
  • if you have more demanding needs for screenshots, use a commercial service
Related Posts
  • Code
    Plugins
    Displaying Information of a WordPress.org Plugin on Your WebsiteWordpressdotorg plugin api border 400
    In the first part of this article, we discussed how to use built-in functions to communicate with WordPress.org and retrieve plugin details. In this tutorial we will put the theory in action to create a simple plugin which will allow us to display details of any plugin hosted on WordPress.org on our WordPress website using shortcodes.Read More…
  • Code
    Plugins
    Creating a Shortcode for Responsive VideoResponsive video shortcode main image 400
    If you're anything like me, you use YouTube to host any video you add to your WordPress site. It saves worrying about browser or device compatibility, it saves space on your servers, and it can be a lot more reliable.Read More…
  • Code
    Plugins
    Create a Shortcode to List Posts With Multiple ParametersPost listing shortcode main image400
    On many of the client sites I build, I find there are times when I need to include a post listing on a page. I'm not talking about archive pages here, but adding a custom listing to an existing static page. For example, I might want to list some posts on the 'About' page, or the site may require an in-depth page for a topic, with a list of posts and custom post types related to that topic. One way to do this is by creating a custom page template to include the current page content plus the results of a second custom query, but if you want more flexibility over how you list posts, or just want to do it a few times, a shortcode will be a simpler solution. In this tutorial, I'll show you how to create a simple shortcode to list all posts of a custom post type, and then I'll expand on that to create a shortcode with various parameters that users can specify to list posts however they want.Read More…
  • Code
    Plugins
    Integrating Multiple Choice Quizzes in WordPress – Creating the FrontendIntegrating multiple choice quizzes in wordpress
    This is the second part of the series on developing a multiple choice quiz plugin for WordPress. In the first part we created the backend of our plugin to capture the necessary data to store in the database. In this final part, we will be creating the frontend of the plugin where the users can take quizzes and evaluate their knowledge.Read More…
  • Code
    Creative Coding
    Making WordPress Apps Ready for FacebookMaking wordpress apps ready for facebook
    It is becoming increasingly popular for people to integrate their WordPress sites into Facebook applications and fan pages. Although this tutorial is not about how to make an integration, it will explain some smart code techniques that can be implemented for a Facebook-specific view. Facebook and other websites have specific policies about what not to do on Facebook and this tutorial will show you just exactly how you can obey these policies.Read More…
  • Code
    Plugins
    Multiple Shortcodes With a Single Function: 3 Killer ExamplesMultiple shortcodes with a single function 3 killer examples
    The powerful Shortcode API allows us to create "snippets" and include special content (such as PHP functions or complex HTML code) in our posts. It's extremely common to build separate functions for each shortcode, but is it really necessary? In this post, we're going to see how we can utilize more than one shortcode by building a single function.Read More…