Shortcodes are a very powerful tool to get to grips with. They enable the website user to place content where they want without needing a great deal of technical knowledge. If you wanted to put a screen shot of a website in your post you might think that you needed to:

1. Visit the site
2. Take a screen grab
3. Open photo editing software to remove unwanted screen items (desktop, tabs)
4. Upload the file to the Media Library
5. Insert into to post.

That is a lot of work. You might be forgiven if you thought that automating this would be a technical nightmare, but it isn’t. With some simple use of a shortcode hook and availing yourself of a WordPress snapshot resource, you will be good to go in no time.

Website screen shots using a shortcode

function tcb_screenshot_shortcode($atts, $content=null) {
  $default = array(
    'url'   => 'http://www.tcbarrett.com',
    'alt'   => 'TCBarrett - Open Source Architect',
    'title' => 'Screenshot of www.tcbarrett.com',
    'class' => 'screenshot',
    'w'     => '400',
    'h'     => '150'
  );
  extract( shortcode_atts($default, $atts) );

  $mshots = 'http://s.wordpress.com/mshots/v1/';
  $url    = urlencode($url);
  $img    = "<img src='{$mshots}{$url}?w=$w&h=$h' alt='$alt' class='$class'/>";
  return $img;
}

add_shortcode('screenshot', 'tcb_screenshot_shortcode');

You simply add the screenshot like so:

[screenshot]

Here is one of my site:

And one of the Miramedia website:

[screenshot url="http://www.miramedia.co.uk"]