How to display WordPress Popular Posts in columns

WordPress Popular Posts is one of the most popular plugins for displaying popular posts (based on the number of views) in WordPress.

This tutorial provides the steps to display 3 most popular posts in columns with image, title and category appearing one below the other in each post in a custom “Home Featured” widget area below the header on the homepage in Genesis.

Note: The plugin does not currently support showing all the categories and only shows one at the moment. Apparently, support for multiple categories is coming in the next version.

Step 1

Install and activate WordPress Popular Posts.

Step 2

Add the following in child theme’s functions.php:

// Register home-popular widget area.
genesis_register_widget_area(
    array(
        'id'          => 'home-popular',
        'name'        => __( 'Home Popular', 'my-theme-text-domain' ),
        'description' => __( 'Place a Popular Posts widget in here.', 'my-theme-text-domain' ),
    )
);

add_action( 'genesis_after_header', 'custom_popular_posts' );
/**
 * Display Popular Posts below the site header on homepage.
 */
function custom_popular_posts() {
    // if we are not on the front page, abort.
    if ( ! is_front_page() ) {
        return;
    }

    // display `home-popular` widget area.
    genesis_widget_area( 'home-popular', array(
        'before'    => '<div class="home-popular widget-area"><div class="wrap">',
        'after'     => '</div></div>',
    ) );
}

Step 3

At Appearance > Widgets, drag a WordPress Popular Posts widget into the Home Popular widget area and configure it.

Here’s the custom Post HTML Markup:

<li><div class="entry-img">{thumb}</div><div class="entry-info">{title}<span class="entry-cats">{category}</span></div></li>

Step 4

Add the following in child theme’s style.css and modify to suit:

.home-popular {
    padding: 60px 0;
    background-color: #fff;
}

.home-popular .widget-title {
    margin-bottom: 40px;
    font-size: 30px;
}

.popular-posts .wpp-list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.popular-posts .wpp-list > li {
    float: left;
    clear: none;
    width: 31.25%;
    margin-bottom: 0;
    border-radius: 3px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
}

.entry-img {
    overflow: hidden;
    border-bottom: 4px solid #ffe131;
}

.popular-posts .wpp-thumbnail {
    margin-right: 0;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.entry-img a:hover img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
}

.entry-info {
    padding: 12px;
}

.wpp-list a {
    color: #464646;
    text-decoration: none;
}

.wpp-list a:hover {
    color: #000;
}

.wpp-post-title {
    display: block;
    font-size: 16px;
    font-weight: bold;
}

.entry-cats {
    font-size: 13px;
}

@media only screen and (max-width: 860px) {
    .popular-posts .wpp-list {
        flex-direction: column;

        -webkit-box-direction: normal;
        -webkit-box-orient: vertical;
        -ms-flex-direction: column;
    }

    .popular-posts .wpp-list > li {
        width: 100%;
        margin-bottom: 40px;
    }
}