Categories
WordPress

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!

Installation

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 https://www.rickbeckman.org/
 * @inspiredby http://www.geekeries.fr/snippet/creer-automatiquement-miniatures-sites-wordpress/
 */
function custom_snapshot_shortcode( $atts, $content = null ) {
	# Default values
	$defaults = [
		'url'   => 'https://www.example.com/', # 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="https://s.wordpress.com/mshots/v1/' . $url . '?w=' . $w . '&h=' . $h . '" alt="' . $alt . '" class="' . $class . '">';

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

Usage

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="https://rickbeckman.org/" 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!

Attributes

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

url
The full address of the site for which you want a snapshot. Defaults to https://www.wordpress.org/ in case you give it an invalid address or none at all.
alt
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.
class

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.

Disclaimer

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.

Changelog

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.

Categories
WordPress

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.

Categories
WordPress

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. 

Categories
WordPress

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? 

Categories
WordPress

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'] ) {
		phpinfo();
		exit;
	}
}
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!

Categories

WordPress

Commenting

Development

Optimization

Posting

Shortcodes

Security

Categories
WordPress

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). 

Categories
WordPress

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.