An Automated Way of Taking Website Screenshots in WordPress

Adding visuals through screenshots improves page engagement as research shows 64% of people are visual learners. However, taking website screenshots manually for each of your WordPress posts can be extremely tedious and time-consuming.

In this post, we‘ll compare two methods for automatically generating screenshots in WordPress to save you time while also creating optimized visual content.

Why Website Screenshots are Useful in WordPress

Here are some stats around using images and screenshots in your WordPress content:

• Articles with images get 94% more views than articles without images (Source)
• Posts with images get 650% more likes and over 150% more shares (Source)
• 53% of users say that image optimization impacts their brand perception (Source)

Specifically, website screenshots in WordPress allow you to:

• Give readers a visual preview of an external site or page
• Compare before/after site changes from themes, plugins, upgrades etc.
• Create visual guides and tutorials by showing each step
• Show website usage over time with dated screenshots
• Improve SEO as Google indexes screenshot images

However, taking screenshots manually can slow down your editing and publishing cadence.

That‘s why automating website screenshots in WordPress is so useful.

Here‘s an overview of the two methods we‘ll cover:

Now let‘s look at how to implement each method…

Method 1: Using WP Browser Shots Plugin

We recommend the WP Browser Shots plugin as the fastest way to automate screenshots with very little technical expertise required. Over 17,000 WordPress sites actively use this plugin.

Step 1: Install & Activate WP Browser Shots

• Go to Plugins » Add New in your WP dashboard
• Search for "WP Browser Shots"
• Click Install, then Activate the plugin

Step 2: Generate Screenshots

When editing a post or page:

1. Click the Add Block icon
2. Search for "Browser Shots"
3. Select that block
4. Enter the URL of the site you want a screenshot of
5. Customize dimensions, alt text, etc.
6. View screenshot automatically added to content

Customization Options

The WP Browser Shots plugin allows you to easily customize each automated screenshot by:

• Setting custom width and height in pixels
• Adding alt text for accessibility
• Choosing whether to link images to their live site URLS
• Configuring aspect ratio stretching preferences

For even more control, WP Browser Shots offers a Pro version with additional features like full page screenshots, custom user agents, custom templates, and more.

Pros

• Fast and easy automated screenshots without coding
• Generate multiple screenshots from many sites in each post
• Additional customization through Pro version

Cons

• Images loaded externally from WordPress.com‘s servers
• Basic style customization options in free version

When to Use WP Browser Shots

The WP Browser Shots plugin is the best solution when you want to quickly generate automated screenshots without technical expertise. It‘s extremely useful if you:

• Run a multi-author WordPress site where contributors have varying skill levels
• Have many posts linking to external resources that would benefit from visual previews
• Want to demonstrate website changes over time and need to easily generate dated screenshots periodically

Method 2: Custom PHP Code Screenshot Integration

For developers, custom code allows you to fully customize automated screenshot generation in WordPress by using PHP and hooks. This gives you maximum control and customization options.

We recommend adding custom code for automated screenshots using a code snippet manager like WPCode rather than editing functions.php directly. This helps prevent breaking your site from code tweaks.

Here is starter code for automated WordPress screenshots:

function wpb_screenshots($atts) {

  //Default parameters
  extract(shortcode_atts(array( 
    "url" => "https://example.com",
    "alt" => "Description of image", 
    "w" => 600,
    "h" => 400
    ), $atts)); 

  $upload_dir = wp_upload_dir();

  //Capture screenshot
  $imgpath = $upload_dir[‘path‘] . ‘/‘ . $alt . ‘.jpg‘; 
  $content = file_get_contents($url);
  $screenshot = imagepng(imagecreatefromstring($content), $imgpath);

  //Generate <img> tag for screenshot
  $img = ‘<img src="‘. $imgpath .‘" alt="‘. $alt .‘" width="‘. $w .‘" height="‘. $h .‘">‘;

  return $img;

}
add_shortcode("screenshot", "wpb_screenshots"); 

To display, add shortcode:

[screenshot url="https://examplesite.com"]

Customization Options

With custom PHP, the possibilities for customizing your automated WordPress screenshots are endless. You can:

• Store screenshots locally instead of externally
• Set custom widths, heights, compression quality, and more
• Programmatically generate screenshots on post publish
• Create scheduled tasks for automated dated screenshots
• Extract specific elements from sites to showcase in screenshots
• Apply custom styling and effects like blurred backgrounds
• Integrate directly with CDNs and image optimization plugins to enhance performance

And much more! The flexibility is a core benefit of custom coding for your needs.

Pros

• Full control for maximum customization
• Local storage and image asset management
• Modified and expanded over time via code tweaks

Cons

• Requires PHP and WordPress hooks expertise
• Risk breaking site if custom code has bugs
• More complex initial setup

When to Use Custom PHP Screenshots

Rolling a custom solution is recommended when you need to:

• Mimic an exact visual style for branded screenshots
• Program complex generation triggers and logic
• Integrate tightly with existing image workflows
• Avoid reliance on external providers

So for developers and advanced WordPress site owners, custom coding automated screenshots has distinct advantages.

Even More Powerful Screenshot Automation

If you want to take website screenshot automation to the next level, tools like:

• Webshot – Browser extension and API for one-click screenshots as a service
• PagePeeker – Automated screenshots to monitor website changes
• UrlBox.io – Developer API for advanced screenshot automation

These premium tools include features like full page capture, PDF exports, cloud infrastructure, and integrations. They can be overkill for basic WordPress needs, but provide enterprise-grade power combined with simplicity.

Which Method Should You Use?

Deciding whether a WordPress screenshot plugin vs custom code is best depends on your specific needs and technical capabilities.

For most simple WordPress sites, we recommend starting with WP Browser Shots plugin. It offers the best blend of ease-of-use while still being customizable.

Developers and tech-savvy site owners willing to trade complexity for control will appreciate a custom PHP code solution more.

In some cases, using both methods in tandem can provide flexibility across teams and uses cases.

We hope this guide gave you ideas on how to save time by adding automated website screenshots in WordPress. Let us know if you have any other questions!