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 Update Page Templates Automatically

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 Add UTM parameters with jQuery

jetpack-banner

JetPack Infinite Scroll + Masonry

I added support for Jetpack Infinite Scroll on a theme of mine that uses Masonry recently.

Since I couldn’t find any good code snippets or recommendations for how the callback should work I wanted to share a couple methods I tried. If anyone has improvements or recommendations, please let me know.

All of these examples use the “post-load” javascript event that Jetpack triggers. You can read about that on the Jetpack Infinite Scroll documentation page. Continue reading JetPack Infinite Scroll + Masonry

meta-display

Featured Image Meta

I’ve built a couple themes where I’ve needed to give users more control over how the featured image is displayed for individual posts. The obvious place to put these options are in the thumbnail metabox itself.

Display Thumbnail Landscape

meta-banner

In this theme the default display of the thumbnails is a cropped to a square next to the title. But if the user had a large landscape image, they could choose to display it full width instead.

Continue reading Featured Image Meta

calendar

Display a “Pretty” Post Date

On services like Twitter and Facebook you’ll see content that was posted “posted X minutes ago” or “posted X days ago”. I like that. I think it’s bit more personalized than simply using the long form date (e.g. December 27th, 2012).

On my site I now display the post dates as a human time diff (aka, a human readable format) if the post is less than a month old. If it’s older than I month, I use the standard date format selected inside the WordPress dashboard under “Settings > General : Date Format” (in my case Month Day, Year).

The Code Snippet

if ( ! function_exists( 'example_posted_on' ) ) :
/**
 * Prints HTML with meta information for the current post-date/time and author.
 *
 * @since Example 1.0
 */
 
function example_posted_on() {
	$post_date = the_date( 'Y-m-d','','', false );
	$month_ago = date( "Y-m-d", mktime(0,0,0,date("m")-1, date("d"), date("Y")) );
	if ( $post_date > $month_ago ) {
		$post_date = sprintf( __( '%1$s ago', 'example' ), human_time_diff( get_the_time('U'), current_time('timestamp') ) );
	} else {
		$post_date = get_the_date();
	}
	printf( __( 'Posted <time class="entry-date" datetime="%1$s" pubdate>%2$s</time><span class="byline"> by <span class="author vcard">%3$s</span></span>', 'example' ),
		esc_attr( get_the_date( 'c' ) ),
		esc_html( $post_date ),
		esc_html( get_the_author() )
	);
}

endif;

Explanation

Use a Function

Instead of adding this code to each template where I need to display the date, I’ve wrapped it in the function “example_posted_on” so I can reuse and easily update it if needed. Whenever I need to call the date, I just use example_posted_on().

Since this is used in a theme of mine, I’ve wrapped it in a “if ( ! function_exists( ‘example_posted_on’ ) ) :” check so someone can easily override it from a child theme if they need to.

Compare the Timestamps

To check if the date of the post is older than a month, I generate a timestamp to compare with the one from the post:

$month_ago = date( "Y-m-d", mktime(0,0,0,date("m")-1, date("d"), date("Y")) );

You could easily change this to be to any time period you want and compare those timestamps instead.

Make Sure it is Translatable

If you’re wondering why the strings are wrapped in “sprintf” and “printf”, that’s so everything can be translated if someone wants to localize the theme for a different language. Make sure to change the textdomain “example” to whatever you’ve defined as the textdomain in your theme.

Be Careful of Caching

If your site makes use of heavy caching (W3C Total Cache, and/or a good CDN) your post “day” may get stuck for a while. If it’s included as part of a publicly released theme you may want to give users an option to turn it off and use the regular date instead.

Another option (in that case), would be to use javascript to look for the post date, and convert it to a human readable format on front end instead- but that’s probably fodder for another post.