Adding Estimated Read Time to a WordPress Post

Ever since Medium popularized the concept of the read times on articles, I’ve been seeing it as a design element in more WordPress projects.

Getting a great estimate for average read time is complicated, but if you just need a blunt tool for calculating it, you can use:

amount of words in the post / average reading speed

According to Medium, people read about 275 words per minute. Medium also adds 12 seconds for each inline image, but I didn’t get that fancy.

Here’s the snippet:

<?php
/**
* Estimates the reading time for a given piece of $content.
*
* @param string $content Content to calculate read time for.
* @param int $wpm Estimated words per minute of reader.
*
* @returns int $time Esimated reading time.
*/
function prefix_estimated_reading_time( $content = '', $wpm = 300 ) {
$clean_content = strip_shortcodes( $content );
$clean_content = strip_tags( $clean_content );
$word_count = str_word_count( $clean_content );
$time = ceil( $word_count / $wpm );
return $time;
}

To output the read time in your post, use something like this:

<div class="reading-time">
<?php echo prefix_estimated_reading_time( get_the_content() ); ?> min read
</div>
view raw output.php hosted with ❤ by GitHub

If you prefer to use a plugin, there’s a few around. This snippet is mostly borrowed code from Reading Time WP, which is also on GitHub.

Automatic Accounts on WooCommerce Checkout

There are a lot of good reasons to require a customer account on checkout:

  • It’s easier for customers to manage their orders and get support.
  • It’s for customer to purchase again (all their details are saved).
  • It’s easier for store manager to track life time value of customers.

However, the checkout process for first time customers should still be as seamless as possible. This is why I like to create accounts automatically if the email hasn’t been used before. WooCommerce has this functionality built-in. Continue reading

Subscription Toggle in WooCommerce

In WooCommerce subscription products and standard products can’t be combined. For example, if you’d like to offer customers the option to purchase coffee as a one-time sale or as a convenient monthly subscription, you’ll need to create two separate products on the backend (even though it’s essentially the same product and SKU).

If you’re SEO focused, this might be a concern in terms of duplicate content and splitting page rank. For customers, this also isn’t a great experience. If a customer lands on the one-time product page, they might not know about the subscription option (and vicea versa).

A better example of subscription user experience is Target. If a product offers a subscription option, there’s a radio button toggle with a discount clearly highlighted. Turns out, with a little work, this is also possible to do in WooCommerce. Continue reading

Altering Comment Markup

Changing the default markup for comments can be difficult in WordPress. The wp_list_comments function has useful parameters for avatar size and reply text label, but if you want to make more structural changes (like moving the timestamp to below the comment body, or altering class names) you basically need to recreate the function inside a custom callback.

To me it makes more sense to have markup inside of a template file (rather than a function), and when looking at the Hybrid Theme by Justin Tadlock I saw it does exactly this. In Hyrbid, devlopers can use a custom comment.php template to alter comment markup. So, how it this done?

First, let’s specify a custom callback for wp_list_comments.

<?php
	wp_list_comments( array(
		'style' => 'ol',
		'short_ping' => true,
		'avatar_size' => 50,
		'callback' => 'prefix_comment_callback'
	) );
?>

Once we’re inside the custom callback function, we’ll want to call the theme template to use:

/**
 * Use a template for individual comment output
 *
 * @param object $comment Comment to display.
 * @param int    $depth   Depth of comment.
 * @param array  $args    An array of arguments.
 */
function prefix_comment_callback( $comment, $args, $depth ) {
	include( locate_template('comment.php') );
}

Note that we’re using “include” rather than “get_template_part” so that we can use all the variables available to the callback function.

We now need to take the markup that the default callback uses and paste that into comment.php. You can find that in the WordPress core file “/wp-includes/comment-template.php” in the function html5_comment. Here’s the version I used from 3.9.1.

Once that is pasted into the comment.php, you can move items around as you choose. Make sure to add text domains for any translated text if your theme will be used by international users!

Update Page Templates Automatically

In the latest version of Portfolio Press I decided to move all the custom page templates into their own “templates” directory. This helps to organize the files better and simplifies the directory. However, I also needed to build an update routine for existing users who had the page templates set at the previous paths

To do that, I needed to query for all pages that had a page template set, check if matched one of my existing templates, and then update it to the new path. Here’s the code snippet in case it is useful to anyone else. Continue reading

Add UTM parameters with jQuery

On a recent project we needed to add UTM query parameters (for Google Analytics tracking) to all outbound links to a specific domain.

I didn’t feel like updated all the links on the site directly in the code since these campaign query strings might change, so I created a basic jQuery plugin to do this:

jQuery.fn.utm_tracking = function() {
	$(this).find('a[href^="http://www.example.com"]').each(function() {
		var url = $(this).attr('href');
		$(this).attr( 'href', url + '?utm_source=example&utm_medium=link&utm_campaign=campaign' );
	});
}

Continue reading