How to display a grid of popular posts in WordPress

One of the strongest points of the WordPress Popular Posts plugin lies in its customization options. If you know a little CSS/HTML, the possibilities are endless!

For those of you who don’t know how to code though it’s a completely different story. Understandably, I often get asked questions like:

  • How can I make a grid of popular posts?
  • I’d like to show a grid of thumbnails with post titles using WordPress Popular Posts, can it be done?
  • I want to display my popular posts in a grid layout, how can I do that?

… and a bunch of other similar questions, you get the idea.

In this article, I’ll show you how to create a responsive grid of popular posts with thumbnails.

Before we start

  • If you haven’t done so already, install the WordPress Popular Posts plugin on your site (if you don’t want to watch the whole video, installation instructions start at 0:45).
  • For this to work flawlessly, each of your popular posts must provide an image (a Featured Image, for example) so that WPP can generate the image grid.
  • A fair understanding of CSS is recommended, but not really necessary for this tutorial.
  • Note that all this is meant merely as a guide, so you may need to make some adjustments to make this work on your current theme.

Oh, by the way, here’s what we’re trying to accomplish:

A nice image grid with a cool overlay that displays upon mouseover. Neat, huh?

The HTML Markup

Our first step would be, of course, to modify’s WPP’s HTML markup so we can then apply some CSS sorcery on it to make our popular posts list look like a nice image grid.

  1. Go to Appeareance > Widgets and click on the WordPress Popular Posts widget to expand its options (you did add the widget to your sidebar already, right? Right!)
  2. Under Posts settings, tick the Display post thumbnail checkbox and hit the Save button to apply changes. You’ll then be able to set the desired width and height of the thumbnails (in this tutorial I’ll be using 225×135).
  3. Under HTML Markup Settings, tick the Use custom HTML markup checkbox and hit the Save button to apply changes.
  4. Under Before / after Popular Posts, set the first field to the following:
    <ul class="wpp-grid">
    
  5. Next, change Post HTML Markup to:
    <li>
        {thumb_img}
        <div class="wpp-grid-overlay"></div>
        {title}
    </li>
    
  6. Finally, hit the Save button to apply changes.

And that’s it! Our WPP widget’s HTML markup is ready for our image grid.

Now, say we wanted to do the same thing with the wpp_get_mostpopular() template tag. Fortunately, it provides parameters such as wpp_start, wpp_end and post_html that we can use to customize WPP’s HTML markup (for more, see Settings > WordPress Popular Posts > Parameters).

In this case, we’ll need wpp_start and post_html, where the former sets the opening HTML tag of our image grid (see step 4) and the latter the HTML markup of each post (see step 5):

<?php
if ( function_exists('wpp_get_mostpopular') ) {

    $args = array(
        'range' => 'all',
        'thumbnail_width' => 225,
        'thumbnail_height' => 135,
        'wpp_start' => '<ul class="wpp-grid">',
        'post_html' => '<li>{thumb_img}<div class="wpp-grid-overlay"></div>{title}</li>'
    );

    wpp_get_mostpopular( $args );

}
?>

And this is the [wpp] shortcode version, which uses the same set of parameters as the wpp_get_mostpopular() template tag:

[wpp range='all' thumbnail_width=225 thumbnail_height=135 wpp_start='<ul class="wpp-grid">' post_html='<li>{thumb_img}<div class="wpp-grid-overlay"></div>{title}</li>']

Styling the grid

Now that the HTML markup is ready, all that’s left to do is to style our popular posts list to make it an image grid.

In the example above, and if you’re checking this post from a device with a large screen like your desktop computer, you should be seeing a 3-column image grid. If you resize the window (or if you visit this post from a mobile device such a smartphone or a tablet) you’ll notice that the grid changes to a two-columns / one-column format according to the available space.

Here’s how the magic is done:

/*
 * The container of our grid.
 */
.wpp-grid {
    overflow: hidden;
    margin: 2.5em auto;
    padding: 0;
}

    /*
     * The container of each post.
     *
     * Each LI will use relative positioning so we can freely move
     * the elements inside them (namely the post title and the overlay)
     * using CSS3 animations.
     */
    .wpp-grid li {
        position: relative;
        display: inline;
        float: left;
        margin: 0;
        padding: 0;
        width: 33.333%;
    }
        
        /*
         * The thumbnail.
         *
         * By settings its width to 100% and its height to auto
         * we are making sure it adapts its size to the container
         * while maintaining its aspect ratio.
         */
        .wpp-grid li .wpp-thumbnail {
            display: block;
            width: 100%;
            height: auto;
            border: none;
        }
    
        /*
         * The overlay.
         *
         * It's initial position is outside the LI element (top: 100%),
         * hiding it from view.
         */
        .wpp-grid li .wpp-grid-overlay {
            position: absolute;
            display: block;
            top: 100%;
            right: 0;
            bottom: 0;
            left: 0;
            opacity: 0;
            transition: all 0.4s;
            background: rgb(0, 0, 0);
            background: rgba(0, 0, 0, 0.9);
        }
        
        /*
         * This defines how the overlay behaves when hovering over a post.
         *
         * The overlay is positioned inside the container (LI) and its opacity
         * is also gradually set to 100% (1) during the animation.
         */
        .wpp-grid li:hover .wpp-grid-overlay {
            top: 0;
            opacity: 1;
        }
        
        /*
         * The post title.
         *
         * Like the overlay, this element is also hidden from view.
         * It's positioned at the top of its container (LI) and its
         * opacity is set to 0 (invisible).
         */
        .wpp-grid li .wpp-post-title {
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            opacity: 0;
            width: 100%;
            line-height: 1em;
            text-align: center;
            transition: all 0.4s;
        }
        
        /*
         * This defines how the post title behaves when hovering over a post.
         *
         * The title is positioned at the center of its container (LI) and its opacity
         * is also gradually set to 100% (1) during the animation.
         */
        .wpp-grid li:hover .wpp-post-title {
            top: 45%;
            opacity: 1;
        }
    
    /*
     * Responsive CSS rules.
     *
     * These are specific to my theme. You'll have to adjust these to fit yours.
     */
    
    /* When the screen width is 940 or lower, switch to a two columns grid. */
    @media ( max-width: 940px ) {
        .wpp-grid li {
            width: 50%;
        }
    }
    
    /* When the screen width is 480 or lower, switch to a one column grid. */
    @media ( max-width: 480px ) {
        .wpp-grid li {
            float: none;
            clear: both;
            width: 100%;
        }
    }

You’ll need to add these styles into your theme’s stylesheet for it to work. To do so:

  • You can edit your theme’s main stylesheet from the dashboard via Appeareance > Editor, or
  • You can download your theme’s stylesheet using your preferred FTP software (eg. FileZilla), edit it locally and then upload it to your server again.

Things to keep in mind

While image grids are quite the eye-candy, there are a couple of issues I must point out:

  • The hover effects won’t work on touch devices (tablets, smartphones, etc.)
  • Some / all of the CSS3 animations implemented here will break on older browsers (I know I already mentioned this but I cannot stress it enough).

Questions? Suggestions?

Got anything to ask/share? Leave a comment below!

10 responses on “How to display a grid of popular posts in WordPress”

Hola Héctor, sólo pasaba a felicitarte por el asombroso plugin que has hecho. Es súmamente completo y personalizable. Me dio orgullo saber que quién lo hizo es un venezolano. Aún soy un newbie pero espero algún día poder ser capáz de desarrollar cosas geniales como las que haces 🙂

Saludos cordiales!

¿Qué tal, Gabriel?

Muchísimas gracias por tus palabras, me alegra bastante saber que el plugin te ha sido de utilidad 🙂

WordPress es una buena plataforma para aprender a programar gracias a la infinidad de temas y plugins que tiene, y por supuesto la gran comunidad que está detrás de eso. Con tiempo y paciencia todo se aprende, sólo necesitas las ganas de hacerlo.

¡Un abrazo de parte de otro venezolano!

Hi Héctor,
I’m having an issue. I followed the directions above, but mine are not displaying in a grid for some reason. I tried comparing it to my old popular posts widget (currently above the WordPress Popular Posts plugin), but I just can’t seem to figure out what the issue is. Any ideas? If not, maybe you can take a quick peek? http://www.basilandoregano.com. Thank you! Tonia

Hi Tonia!

It seems you missed the 4th step under The HTML Markup 😛

You need to make a few additional tweaks to your theme’s stylesheet so the grid works as intended. Try the following:

.wpp-grid li:before {
display: none;
}
.wpp-grid li a.wpp-post-title {
color: white !important; # Change this to whatever color you like
}

when i do this for widget, the images aren’t clickable to send them to the appropriate post?

Since each image on the grid will display a clickable overlay upon mouseover, wrapping them with link tags isn’t really necessary. If you can’t see the overlay then either you’re using an outdated browser, or you did something differently.

Is your image grid somewhere online where I can check it out?

I removed the title as I just wanted a grid of 6 images, 3 side by side on the sidebar. But without the title displayed they are no longer clickable?

Yep, since the post title is the only HTML element wrapped in a link tag (check “Available Content Tags” under Settings > WordPress Popular Posts > Parameters to see what each Content Tag does).

If you want to have a simple image gallery (no titles, no overlay) try switching the {thumb_img} content tag with {thumb} to make it clickable.

Leave a Reply

Your email address will not be published. Required fields are marked *