Adding a Website Snapshot Shortcode to WordPress

There isn’t anything quite so boring as viewing websites full of links. Link. Description. Link. Description. Link. Descr— Well, you get the idea. If you have such a list on your website, you might seek to spice them up with screenshots to give a bit of pop to further encourage your users to follow the links.

But it can be a hassle to create, resize, and upload the screenshots that you need. It is an even bigger hassle to keep those screenshots up-to-date with how those websites might look over time.

What if there was a better way?

What if, with a simple shortcode, you could include within your content an automatically generated snapshot of a website which will stay reasonably up-to-date as the website changes?

screenshot of the original 'snap' shortcode at Geekeries That is exactly what [snap] is! Inspired by code at Geekeries, the [snap] shortcode is presented below with improved error-proofing and the option to specify a class attribute for the snapshot. I think you’re gonna love it!


There are multiple ways in which you can add this shortcode to your WordPress installation, among them:

  • Add the following code block to your theme’s functions.php file.
  • If you’re using Thesis 1.8.5, add the following code block to your theme’s custom_functions.php file.
  • If you’re using a custom plugin to hold your site’s customizations, add the code block to it.
  • Last, you can ignore the code block altogether by downloading this code block as a WordPress plugin, which can then be uploaded via your site admin panel’s Plugins → Add New page.

The Code (v2.0.0)

 * [snap] - Website snapshot shortcode
 * @via
 * @inspiredby
function custom_snapshot_shortcode( $atts, $content = null ) {
	# Default values
	$defaults = [
		'url'   => '', # URL to be snapshotted
		'alt'   => __( 'Website Snapshot', 'snap' ), # Alt text for snapshot image
		'w'     => 400, # Width of snapshot
		'h'     => 300, # Height of snapshot
		'class' => '', # CSS class(es), space separated

	# Parse attributes
	$atts = shortcode_atts( $defaults, $atts, 'snap' ); # @filter: shortcode_atts_snap

	# Sanity checks to ensure proper variables
	$url = urlencode( wp_http_validate_url( $atts['url'] ) ?: $defaults['url'] );
	$alt = esc_attr( $atts['alt'] );
	$w = absint( $atts['w'] ) ?: $defaults['w'];
	$h = absint( $atts['h'] ) ?: $defaults['h'];
	$class = ! empty( $atts['class'] ) ? esc_attr( $atts['class'] ) . ' website_snapshot' : 'website_snapshot';

	# Put together our IMG tag to be output, with final data sanitation
	$img = '<img src="' . $url . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '" class="' . $class . '">';

	return $img;
add_shortcode( 'snap', 'custom_snapshot_shortcode' );


At its most simple, you can insert [snap] anywhere within your posts to see how it behaves. By default, you’ll be shown a screenshot of the Google homepage.

But that isn’t very fun, is it?

Here is a fully formed [snap] example, followed by an explanation of what each optional attribute controls:

[snap url="" alt="screenshot of my homepage" w=200 h=200 class="aligncenter mine"]

That example will look like this: screenshot of my homepage

If this shortcode is useful to you, I hope you’ll check out my other WordPress thingamajigs, and please don’t forget to like and share this page!


The [snap] shortcode can be controlled using several attributes. They are as follows:

The full address of the site for which you want a snapshot. Defaults to in case you give it an invalid address or none at all.
For accessibility and SEO reasons, you’ll want to provide a relevant alt text for your snapshot. This text should serve to describe the snapshot, and it defaults to “Website Snapshot.”
w and h
The width and height of your snapshot, respectively, as measured in pixels. Any positive integer can be used here, and both should be specified. Width defaults to 400 while height defaults to 300.

In order to provide seamless integration of the snapshots into your design, you can provide classes with which to target it in your styles or JavaScript. Every snapshot will be given a website_snapshot class, even if you add your own. Valid classes must start with an underscore (_), a hyphen (-), or a letter (a–z), followed by any numbers, hyphens, underscores, or letters. Class names must be at least two characters long, and you can add more than one by separating them with a space in your shortcode.

Most WordPress installations should have a few basic image styling classes which you can use to position your snapshots in your content: alignleft, alignright, and aligncenter.


When you preview a post using the [snap] shortcode on a new site, you may notice that it doesn’t show a screenshot but instead shows a placeholder image. This is because the WordPress snapshot service takes a few moments to fetch and cache a screenshot once it is first requested. Subsequent visits to the page using the [snap] shortcode should display the expected screenshot.


2.0.0 — July 13, 2019

  • Replaced URL validation function with a WordPress native function
  • Minor code cleanup and updating to take advantage of newer PHP features

1.0.0 — August 30, 2011

  • Initial version

This post was originally published on 2011-08-30. It has been updated for republication. Comments below may reflect the original version of this content.


How to Add a Site Name Shortcode to WordPress

A cosmic cloud of gases condenses under its own gravity, forming a star. Generations upon generations of single-celled organisms lead to multi-cellular complex life. And your humble blog has grown beyond its seminal inspiration.

Change happens, and you don’t have to find yourself in a situation where if you decide to change the name of your site, you’ll need to find and replace potentially hundreds of mentions of the old name to keep your branding consistent.

Most of my online projects suffer from many identity crises as I refine over and over again what it is I want to do with my online presence. To save myself all of the trouble of laboriously updating references to my site’s title throughout all of a its content, I started using an incredibly simple WordPress shortcode to do the work for me.

This post was originally published on 2013-04-06. It has been updated for republication. Comments below may reflect the original version of this content.


Enabling Form Validation on WordPress Comments

For over a decade, The Cerulean Standard has accumulated comments from a wide variety of people — many who have posted confidently using their real name and what seem like valid email addresses while others have chosen anonymity with pseudonyms and pretty obviously fake email addresses.

The websites entered with the comments have been just as varied — from links to personal sites that match the rest of the information given (name, email address) to links to Google to strings which don’t resemble a valid website address at all. You know what I mean: “none,” “http://no,” “na,” and so on. Users for whatever reason don’t want to leave the field empty (even though it isn’t required), so they put in some invalid data if they don’t have a website. 


How to Add Whimsical Form Field Placeholders to WordPress Comment Forms

The WordPress comment form is a humble little thing: a few form fields, an explanation or two, and not much else, barring any plugins or customizations, that is.

Users who have left comments already will be greeted with a form that is already filled out the next time they visit, thanks to a cookie which WordPress sets, but what about before their first comment?

Would-be commenters are greeted by empty form fields for their name, email address, and website address, which is straightforward enough, but what if you want to jazz things up ever so slightly by adding some placeholder text to these form fields? 


Add `phpinfo()` to Your WordPress Site

From time to time, you may find it necessary to check out phpinfo() in order to see your server’s capabilities, limitations, or whatever. While it’s tempting to upload a file to your serve containing only <?php phpinfo(); ?>, it’s not a good idea to leave that file there for the world to see; likewise, it’s a pain to delete it and upload it repeatedly, as it’s needed.

You can add phpinfo() capabilities right to WordPress by adding the following code to your Thesis custom_functions.php file, appropriate theme custom file, or site customization plugin. The code will allow you to access phpinfo() by appending ?phpinfo=1 (or &phpinfo=1 if there are already parameters present) to any address on your site, front or backend.

There will also be a link to the phpinfo() added to the Tools section of the WordPress admin panel menu for your convenience.

And you can easily control which of your registered users by modifying the PHPINFO_ACCESS variable near the top of the code; possible values for it are available on the WordPress Codex.

 * Enable phpinfo() viewing from within WordPress
function custom_do_phpinfo_page() {
	# Define access level
	define( 'PHPINFO_ACCESS', 'remove_users' );

	if ( current_user_can( PHPINFO_ACCESS ) && isset( $_GET['phpinfo'] ) &&  true == $_GET['phpinfo'] ) {
add_action( 'init', 'custom_do_phpinfo_page' );

 * Add phpinfo() link to WordPress admin menu
function custom_add_phpinfo_menu_item() {
	global $submenu;

	$submenu[ 'tools.php' ][ 500 ] = array( 'phpinfo()', PHPINFO_ACCESS , get_home_url() . '/?phpinfo=1' ); 
add_action( 'admin_menu', 'custom_add_phpinfo_menu_item' );

Did you know you can add arbitrary links to the WordsPress admin menu? Sure can!


How to Avoid Losing Visitors Due to Comment Links

Note: The code in this article was updated and tested to work as of 2015-09-01.

If you run a WordPress-powered website, ask yourself, how many users leave your site by following the links left by commenters? The answer will no doubt vary greatly site to site, but if your users are leaving your site prematurely and forgetting to come back, then you need to improve that situation straightaway.

And it’s easy to do! What we’ll do is add a small snippet of code to your site which will alter the links to instead open in a new tab (or window, if tabs are unavailable), ensuring your site remains open in the user’s browser. Links which point to the current site’s address (as determined by home_url() will not open a new tab). 


OpenHook, The Best Customization Manager Plugin for WordPress

You’re a self-hosted WordPress blogger, and you’ve finally picked out a beautiful theme for your site — that’s a tough feat, one I certainly struggle with — and now it’s time to customize your site to fit your content and your personality. There are a variety of ways to go about doing that, but… how? Even for an experienced user, simple customizations that typically require multiple steps, including creating a plugin or child theme, can be tedious. But what if there is an easier alternative?

I want to introduce you to a two-part system so you’ll understand the power of what I have to share with you.

Hooks and Actions

Meet the hooks and actions system. WordPress has numerous hooks, or customization points, throughout its system, into which you can easily add your own actions, or customizations. Themes (and even plugins) can have their own hooks, and some themes certainly have many more than others.

Let’s look at a very basic example to see how these work. A common customization which you might want to make is to add your copyright statement to the footer of your site. In many themes, you can accomplish by adding your action (in this case, your copyright text) to the wp_footer hook. The code would look like this:

function custom_add_copyright_statement() {
 echo '<p>Copyright &copy; 1603, William Shakespeare</p>';
add_action( 'wp_footer', 'custom_add_copyright_statement' );

Decently simple, right? But what if we could make that simpler? That’s where my free WordPress plugin, OpenHook, comes into play.

OpenHook, the Customization Manager for WordPress

What is OpenHook? In short, OpenHook is a WordPress plugin that streamlines the process of adding customizations to your WordPress site! But wait, there’s more!


  • Customize the hooks present in your favorite themes!
    • NEW! Define any hook you want within OpenHook and add an action to it! In addition to the following themes which OpenHook supports explicitly, you can now use OpenHook to customize ANY hook (even something as arcane as theme_hook_before_meta_987) in ANY theme or plugin that has ANY hooks, from WordPress’ bare minimum hooks to hooks that are dynamically created and are as infinitely diverse as your site can be!
    • Hooks are explicitly enabled for the following themes, but you’re by no means limited to these alone!
      • Flat (defunct?)
      • Headway
      • K2 (defunct? // actions created with the K2 Hook Up plugin can be imported)
      • Thesis 1.8.x (defunct)
      • Any theme that supports Theme Hook Alliance hooks
  • OpenBox, a PHP-friendly “box” for use in customizing Thesis 2 (defunct)
  • Quick access to the header and footer hooks of WordPress
  • All hooks can be customized with text, HTML/CSS/JavaScript, PHP, or shortcodes
  • All actions created with OpenHook can be selectively disabled
  • A variety of actions already present in Flat, Thesis 1.8.x, and WordPress can be selectively disabled
  • Hook visualization allows you to see exactly where each hook is fired on the front-end of your site
  • Shortcodes
    • , for masking email addresses from some spam robots
    • [global], which makes use of custom fields on a draft page in order to provide a library of reusable strings
    • [php], an admin-only shortcode for including PHP code within posts
  • Ability to disable all shortcodes
  • Display of phpinfo() in the admin panel
  • Options management, including tools to upgrade from OpenHook 2 and to uninstall (delete) all OpenHook options
  • Only users with the edit_themes permission may access OpenHook or its features. If enabled by such a user, other users may use or [global] shortcodes in their entries as well.


  • An installation of WordPress 4.1 or newer, naturally
  • The exec function must not be disabled by your host if you plan to use OpenHook to add PHP customizations

OpenHook may work with older versions, but given the ease with which both of those softwares can be updated, you really, really are encouraged to stay up-to-date!


OpenHook is available from the WordPress plugin repository, and so can be installed automatically from within your blog’s administration panel.

If you must do or just prefer the manual method, OpenHook is installed just like any other WordPress plugin.


Visit the WordPress plugins repository to download the latest version!


For support inquiries, please use the Contact panel within the OpenHook itself, the plugin repository support page, or the comments below!


OpenHook development has been supported by the following generous individuals:

Donate to Further Development

If you would like to support OpenHook development, you may do so in one of two ways. The simplest way would be a monetary donation via PayPal:

Or you can buy me something directly from my wish list, thereby saving me the trouble!

OpenHook is released under the GPL and was both inspired and based upon K2 Hook Up.



  • [fixed] load_plugin_textdomain() changed to properly reference the /languages directory (thanks pm1932)
  • [changed] Localization namespace is now thesis-openhook to conform to WordPress’ guideline that this namespace match OpenHook’s slug in the plugins repository (see
  • [changed] Author links updated to reflect current domain and Twitter account


  • [added] Ability to define custom hooks and to then add actions to them, effectively opening OpenHook support to all hooks across all WordPress themes!
  • [added] New themes: K2
  • [added] Ability to specify priorities on actions
  • [added] Access to the WordPress hook comment_form
  • [added] Include Facebook “like” button in admin panel sidebar
  • [fixed] Contact form link now works
  • [fixed] Asterisks denoting that a hook has customizations added to it are now more accurate
  • [fixed] OpenHook version and the Flat and Theme Hook Alliance hook options are now properly deleted when deleting OpenHook options
  • [fixed] OpenHook::upgrade()‘s “is an upgraded needed?” checks now actually work, preventing upgrade code from processing on every page load
  • [fixed] More WP_DEBUG notices taken care of
  • [changed] OpenHook admin panels are more responsive on smaller screens
  • [changed] Only one theme’s actions may be enabled at one time, saving processor power and preventing hook name conflicts
  • [changed] Explicitly adhere to semantic versioning going forward
  • [changed] OpenHook CSS is now minified
  • [changed] File structure organized
  • [changed] Simplified admin panel tabs to only highlight active action groups


  • [added] Flat hooks
  • [added] Theme Hook Alliance hooks
  • [fixed] OpenBox is now compatible with Thesis 2.1.x
  • [changed] Various text and links throughout OpenHook admin panel
  • [changed] Optimized various bits of code, bringing it in line with WordPress coding standards
  • [changed] Admin sidebar no longer appears on the server info page


  • [fixed] Fixed broken class calls in options management functions


  • [added] Now supporting Headway theme hooks!
  • [added] Shortcodes manager introduced!
  • [added] Users can now choose whether all hook panels are displayed or just one at a time
  • [added] PHP shortcode – Arbitrary PHP code in your posts! (Admin users only.)
  • [added] Email shortcode – Encodes email addresses for use in posts to thwart harvesters
  • [added] Global shortcode – Take advantage of custom fields on a draft post to create a library of strings which may be used in any post
  • [changed] Various code optimizations


  • [added] OpenBox – a box added to Thesis 2’s box management, allowing for arbitrary code in Thesis 2’s skin editor
  • [changed] OpenHook is now programmed as a class to allow its code to be self-contained. More code refinements will be coming
  • [changed] Plugin is now named simply “OpenHook.” Viva la simplicity!


  • [fixed] thesis_hook_after_post_box restored. Hat tip: Doug Foster


  • [added] Hook visualization (Based upon
  • [changed] Improved handling of the options management functions (upgrade/delete options)
  • [changed] When action groups are disabled, the hook pages now include a nag stating as much
  • [fixed] Warnings about empty arrays when activating action groups


  • [fixed] Bumped to make the repository update


  • [added] Hooks with customizations are marked with asterisks in the dropdown select box
  • [changed] Add link to phpinfo() under Tools menu
  • [changed] Verbiage for unhooking updated
  • [fixed] Many undefined variable errors
  • [fixed] Slashes are now properly stripped when upgrading from 2.x.x
  • [fixed] Default Thesis 404 content can now be properly removed


  • [fixed] Rare issue where the general settings panel doesn’t fully appear


  • [changed] Total rewrite of the plugin
  • [added] phpinfo() panel
  • [added] per-hook disabling of custom actions
  • [added] option to process shortcodes on custom actions
  • [added] ability to choose which actions to process (WordPress’s or Thesis’s or both’s)
  • [added] ability to remove all OpenHook options
  • [removed] several deprecated options


  • [fixed] Remember the typos fixed in 2.3.1? There were others I should have caught then. I’m a terrible proofreader, but thanks, Dean, for catching them!


  • [fixed] Fixed two stupid typos that killed everything that was right with the world. Well, they broke the plugin anyway. Thanks, Jim, for reporting so quickly!


  • [added] Thesis 1.7’s four new hooks are now included.
  • [removed] OpenHook’s file editing panels have been removed — Thesis has these by default now.
  • [changed] Readme.txt updated.


  • [fixed] Reverted change introduced in 2.2.3 regarding stripping of slashes


  • [fixed] Fixed a syntax error, reported by multiple users.


  • [fixed] Fixed a bug which prevented the After Teasers Box hook from saving properly. Thanks, Michael Curving.
  • [fixed] Fixed an issue where the file editors would strip slashes unnecessarily. Thanks, Kristarella.


  • Adding content to the wp_footer hook block actually works now. Thanks, Illustrata


  • Very minor bug fix: Removed option to remove thesis_admin_link() so that it can be used elsewhere; this function is no longer added via a hook in Thesis 1.5, so the OpenHook option essentially did nothing. There’s nothing to gain by upgrading other than a slightly cleaner “Footer” section on the main OpenHook page.


  • New hooks: wp_head, thesis_hook_comment_field, and wp_footer!
  • Separation of stylesheet editing to its own page.
  • Addition of custom functions file editing, also on its own page.
  • Major internationalization improvements
  • Jump box added to quickly navigate to any of the dozens of hooks
  • Option to include an invisible, nofollowed Project Honey Pot link in the footer area to help in the war against spammers.
  • …and probably more that I can’t even remember!


  • Added two new hooks: thesis_hook_before_content_area and thesis_hook_after_content_area.


  • Added ability to customize the save button text.
  • Added a bit more explanatory text on the OpenHook panel in the top area.
  • Fixed a bug with the “404 Title” hook that prevented slashes from being stripped properly. Thanks, Justin Thomas.


  • Fixed a bug with the “After Header” checkbox for PHP usage thanks to Alec Wild


  • Reorganization of just about all of the under-the-hood code.
  • More robust stylesheet editing — should work for more people now.
  • Complete stylistic redesign to match other WordPress admin panels.
  • Save buttons added liberally throughout the page.
  • Added support for the latest Thesis hooks.


  • Debug info bugfix thanks to firstdayblack
  • Simple custom/custom.css editing from within the OpenHook panel


  • Renamed from 0.2 to mark inclusion in the WordPress plugin directory!


  • Some code reorganization
  • Added options to easily remove Thesis’s default actions
  • Add some explanatory text to some hooks


  • Initial release

Seven of Your Favorite, Most Indispensable WordPress Plugins

For the past few years, it seems as though at least a couple of times a month I’ll come across new “Top x WordPress Plugins” posts, where one user takes the time to enumerate a few of their most-loved blogs.

But who cares what they think, right? I wanted to know what you thought, so I turned to the hive mind which is Twitter (Hey, follow me!), and asked what you considered the most indispensable WordPress plugins. I threw in the criterion that the plugin be not spam-related — yes, I know you love Akismet; I do too! — and this is what you said. 


Turbocharge Your Thesis Installation with the Thesis Compatibility Suite

Note: The following code is no longer maintained. Use only if you know what you’re doing, and you should probably only use the code to see how simple plugin compatibility can be attained in Thesis. This add-on was made for Thesis 1.x.x; don’t expect it to do anything for Thesis 2.x.x.

In my quest to help Thesis users out as much as possible, I have put together an add-on to the Thesis framework which I hope to continually update to provide sweet compatibility improvements for plenty of WordPress themes.

I’m doing this to make using plugins and Thesis together as simple as possible, especially for the non-coder. 


Just a Dash: Better Typography through Ems and Ens

I’m still trying to learn all the various typographical rules for various hyphens and dashes and so on. Perhaps it isn’t worth my time, but the difference between a minus symbol and a hyphen should have been taught in school! (It wasn’t.)