Create a popular posts shortcode in WordPress
This is a useful way to display popular posts on your blog to encourage users to read more articles rather than just bounce away.
The purpose of this shortcode is to display the three most popular posts on your blog. Popularity in this case is measured by the number of comments. I felt that comments were a better indicator of engagement than simple page views.
Note that the query gets the four most popular posts – just in case the current post is popular.
Rather than running the query every time the page loads, the query results are stored in a transient which is updated weekly. The code is being used on this site as part of the Showcase theme so some of the class names are specific to that theme.
The shortcode outputs the featured image, title and a link to the article. It shouldn’t take too much work to add the excerpt or any other content that you might want.
Here’s the code in its entirety:
| <?php | |
| function st_popular_posts_shortcode( $atts, $content ) { | |
| $pop_posts = get_transient( 'st_popular_posts' ); | |
| if( false === $pop_posts ) { | |
| $args = apply_filters( 'showcase_filter_popular_posts', array( | |
| 'orderby' => 'comment_count', | |
| 'posts_per_page' => 4, | |
| ) ); | |
| $pop_posts = new WP_Query( $args ); | |
| set_transient( 'st_popular_posts', $pop_posts, WEEK_IN_SECONDS ); | |
| } | |
| $current_post_id = get_the_ID(); | |
| ob_start(); ?> | |
| <div class="showcase-popular-posts"> | |
| <div class="row"> | |
| <?php if( $pop_posts->have_posts() ) { | |
| $count = 1; | |
| while ( $pop_posts->have_posts() ) : $pop_posts->the_post(); | |
| global $post; | |
| if( $count <= 3 && get_the_ID() != $current_post_id ) { | |
| $class = array( 'blog-article', 'featured-article', 'col', 'col-xsmall-full', 'article-' . $count ); | |
| $class[] = 'col-large-one-third';?> | |
| <article id="post-<?php the_ID(); ?>" <?php post_class( $class ); ?>> | |
| <div class="article-inner-wrapper"> | |
| <div class="featured-image"> | |
| <a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark"> | |
| <?php the_post_thumbnail(); ?> | |
| </a> | |
| </div> | |
| <div class="entry-wrapper"> | |
| <header class="entry-header"> | |
| <?php | |
| the_title( '<h4 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h4>' ); ?> | |
| </header><!-- .entry-header --> | |
| <footer class="entry-footer"> | |
| <a class="button secondary small" href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark"><?php _e( 'Read more', 'showcase' ); ?></a> | |
| </footer><!-- .entry-footer --> | |
| </div><!-- .entry-wrapper --> | |
| </div><!-- .article-inner-wrapper --> | |
| </article><!-- #post-## --> | |
| <?php $count++; | |
| } | |
| endwhile; | |
| } ?> | |
| </div><!-- .row --> | |
| </div><!-- .showcase-popular-posts --> | |
| <?php $return = ob_get_clean(); | |
| wp_reset_query(); | |
| return $return; | |
| } | |
| add_shortcode( 'popular_posts', 'st_popular_posts_shortcode' ); |
And just take a look below to see it in action: