New P2 Plugin: P2 Hovercards

We’ve released a new plugin for the P2 theme that we’re calling P2 Hovercards. Hovercards are like extra bits of information about particular links that show up when you hover the corresponding inline link or object (for example, check out our Gravatar Hovercards).

With this plugin you can add hovercards to your self-hosted P2 sites. A good example of this is core trac tickets. If you look at the Make WordPress Core blog, you’ll notice that tagged Core Trac tickets are automatically linked up. So, something like #12345 links to http://core.trac.wordpress.org/ticket/12345.

With P2 Hovercards, we took this a step further. I can set it so that #12345 links to the right place, but then also show some additional information when you hover over the link. The following image is an example of what a hovercard could look like for that ticket:

You’ll notice that it gives all the necessary details about the ticket: description, recent comments, and related metadata like owner, status, and so on.

You can extend hovercards, of course, and use them for whatever service you want with a bit of code. Internally, we’re using the plugin to add details to links to support tickets, for example.

The plugin comes with a handy p2_hovercards_add_services() function for adding services:

if (function_exists( 'p2_hovercards_add_service' )
	p2_hovercards_add_service( $service, $pattern, $url, $ticket, $callback );

(Note: We recommend creating a child theme of P2 and adding the additional code to your functions.php file.)

Here’s a quick breakdown of the arguments:

• $service is a string that is the name or slug of the service being added.
• $pattern is a string that is the regex pattern for finding and linking up tags. For our Core Trac ticket example, you would use $pattern = '#(\d+)'
• $url is a string that contains the regex replacement for the anchor tag that gets generated. Again, for the core trac ticket example, you would use $url = '<a href="http://core.trac.wordpress.org/ticket/$1">$0</a>'
• $ticket is a string that contains the regex replacement for a ticket. Following the same example, you would use $ticket = '$1'
• $callback is a callback function for generating the hovercard

The most basic callback looks something like this:

function core_trac_callback( $args ) {
	$id = (int) $args[ 'id' ];
	$url = esc_url( $args[ 'url' ] );
	$service = esc_attr( $args[ 'service' ] );

	// Do stuff with $id, $service, and $url

	return compact( 'title', 'subtitle', 'url', 'description', 'comments', 'meta' );
}

The first four things in the array ($title, $subtitle, $url, and $description) are just strings that will be displayed in the appropriate place on the card. The last two are a little more customizable depending what you want to do though.

Comments are stored in a 2-dimensional array with author, date, and comment fields. Meta is displayed as “Key: Value” in the black bar at the bottom of the hovercard.

More in-depth examples can be found in the examples.php file in the Github repository. As always, we invite you to join us on Github; pull requests and issues are always welcome.

---

Email Newsletter

Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications—please check your spam folder if you don't receive this.

Email Address:

Follow

Join 110.6M other subscribers