Hook of the Month: Customizing the Top Posts & Pages Widget

Let’s kick off 2016 with a new series: welcome to the first installment of Hook of the Month!

Hooks are places in WordPress code where you can add your own code or change the default behavior of WordPress. Jetpack includes many of those hooks — 430 at the time of writing. In this series, I’ll introduce you to a new hook every month.

Today, let’s look at hooks help you customize one of our most popular widgets, the Top Posts & Pages widget.

The widget’s default configuration settings.

Jetpack’s Top Posts & Pages widget displays a list of the most popular posts and pages on your site. Here are its default customizing options:

The widget’s settings offer quite a few customization options, but we’ve also added filters and actions to the code — these are the hooks. The hooks allow you to customize things further to build a widget fits your specific needs. In this post, we’ll explore one filter and two actions.

Filter the number of days used to calculate Top Posts

By default, the widget calculates the most popular posts in the past two days. This short timeframe is often more relevant, especially if you post a lot. However, if you post a bit less or have yet to build a large audience, you might want to include more days’ or weeks’ worth of data.

With a filter, you can change this. Let’s update the widget to display a list of the most popular posts in the past month.

To do so, we’ll use the jetpack_top_posts_days filter. To get started, add the following code snippet to a functionality plugin:

Comments

Thanks for this, and I think this will be a great series. Can you cover how to customize the sharing buttons that are packaged with Jetpack? Because it would be totally awesome to not have to roll your own accessible share buttons and just tell clients, especially non-coding ones, that they can use Jetpack’s share buttons. I think they work with keyboard, anddo OK with screen readers, but not sure about the color contrast stuff, which would obviously be covered in the CSS. If there’s already a guide somewhere, I’d be happy to read that instead.

The sharing buttons are indeed keyboard accessible already, but we have some work to do to fix the contrast when using the “Text only” and “Icon + Text” button styles. Until that’s fixed, the quickest solution is probably to switch to a different button style in your sharing options. “Icon” or “Official Buttons” would do.

You can of course use CSS code to customize the look of the buttons, but that code will be different depending on how you want the buttons to be displayed. It would be hard to create a general guide for that.

If you need some help customizing a specific site, or if there are specific changes you’d like to make for all your clients, to all your installations of Jetpack, feel free to send us an email or post in the Jetpack support forums. If you give us some details about what you’d like to achieve, we’ll be happy to help!

I would love to add a hook that adds a tracking parameter to the end of permalinks, like ?ref=topposts. That way we could track how many people are actually using the links in this widget to land on certain posts. This would also be useful for Related Posts.

While the number of plugins you use on your site is important, the quality of those plugins is even more important. In practice, 10 little plugins with only a few lines of code might have a smaller footprint than a single plugin that would perform a lot of actions on your site.

I hope this clarifies things a bit. If you’re interested in learning more about this topic, I’d recommend that you read this post!

Is the current popular posts calculate within the past two days? I see my most popular posts shown are even from the last 10 days ago.

The Top Posts widget does indeed look at your most popular posts in the past 2 days. It doesn’t matter when the posts were published, though. The widget only checks what posts were popular on your site in the past 48 hours.

By the way, can I have the code to show from the last 30 days and beyond? (not to include the last 30 days)

I’m not sure I understand. Could you give me more details about this? If you’d like the Top Posts widget to look at the most popular posts for more than 30 days, you can change the number in the code snippet I posted above.

How can I place those specific location with the functionality plugin?

You can place the whole code in the functionality plugin I mentioned earlier.

/**
* Remove all Popular posts that were published within the last month, and more than 2 months ago.
* That leaves us with posts that were published between the last 30 to 60 days.
*/
function jeherve_remove_old_top_posts( $posts, $post_ids, $count ) {
foreach ( $posts as $k => $post ) {
// Date when the post was published
$post_date = strtotime( get_the_date( 'Ymd', $post['post_id'] ) );
// If the post was published less than 30 days ago and more than 60 days ago,
// let's remove it from the Top Posts widget
if ( $post_date > strtotime( '-30 days' ) || $post_date < strtotime( '-60 days' ) ) {
unset( $posts[$k] );
}
}
return $posts;
}
add_filter( 'jetpack_widget_get_top_posts', 'jeherve_remove_old_top_posts', 10, 3 );

Hi Jeremy, I would really like to put this widget into my footer, in a vertical line across the bottom of the page, instead of vertical down the side. How can I can I change that? Or can you recommend a plugin that does this for me? Thank you.