• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

WP SITES

2665

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

  • Support
  • Newsletter
  • Videos
  • Log in

Premium Member? - Request custom code

Genesis Popular Posts In Columns

This tutorial provides the CSS & CSS for Media Queries for 2 different solutions which enable you to display popular posts in columns.

You can use a plugin like WordPress Popular Posts or a modified version of the Genesis Featured Posts widget which includes a option to display posts by page views.

Here’s an example of what you get when using the modified version of the Genesis Featured Posts widget :

Here’s an example of what you get when using the WordPress Popular Posts plugin with nil styling :

CSS For Genesis Featured Posts Widget ( Modified )

Use CSS like this ( which supports both CSS Grid & all versions of browsers like MS I.E, Edge & Opera Mini ) to display each entry in a column when using the Genesis Featured Posts Widget ( Modified Version ) :

@supports not (display: grid) {

    .after-entry .entry {
        display: inline-block;
        width: 31%;
        margin: 1.16666666667%;
    }

    @media only screen and (max-width: 960px) {

        .after-entry .entry {
            display: block;
            width: 100%;
        }

    }

}

.after-entry .widget-title {
    grid-area: header;
}

.after-entry .entry:first-of-type {
    grid-area: one;
}

.after-entry .entry:nth-of-type {
    grid-area: two;
}

.after-entry .entry:last-of-type {
    grid-area: three;
}

.after-entry .widget-wrap {   
        display: grid;        
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 20px;
        grid-template-areas:
            'header header header'
            'one two three';
}

@media only screen and (max-width: 1340px) {

    .after-entry .widget-wrap {        
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'header header'
            'one two'
            'three three';
    }

}

@media only screen and (max-width: 960px) {

    .after-entry .widget-wrap {        
        grid-template-columns: 1fr;
        grid-template-areas:
            'header'
            'one'
            'two'
            'three';
    }

}

Note : Edge will support CSS Grid from the 17/10/2017

The 1st solution also enables you to display posts in columns using the default Genesis featured posts widget with CSS Grid which makes it easy to control the size and order of each popular post.

You can also code your grid areas for each entry or post like this :

.after-entry .entry:nth-of-type(1) {
    grid-area: one;
}

.after-entry .entry:nth-of-type(2) {
    grid-area: two;
}

.after-entry .entry:nth-of-type(3) {
    grid-area: three;
}

CSS For WordPress Popular Posts Plugin

Use this CSS if using the WordPress Popular Posts plugin by Hector C :

.after-entry .popular-posts li {
        float: left;
        clear: none;
        width: 31%;
        margin: 1.16666666667%;
}


@media only screen and (max-width: 680px) {

    .after-entry .popular-posts li {
        float: none;
        width: 100%;
        margin: 0;
    }
    
}

Assumes the use of the After Entry widget in Genesis which uses the .after-entry class.

Genesis Featured Posts Grid Columns

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

PHP Code

template_include

get_body_class

if else

array

class_exists

foreach

sprintf

add_action

printf

variable

Advertise · WPEngine · Genesis · Log in

  • How Premium Membership Works
  • Sign Up
  • Support
  • Subscription Details/Invoice
  • Tagged Tutorials
  • Access-Download Problems