WP SITES

2520

Original Genesis Tutorials & 5000+ Guaranteed Code

Snippets

Display Genesis Featured Posts In Horizontal Grid With Overlay Title On Hover

This tutorial shows you one way to use the Genesis Featured Posts widget to display posts in horizontal columns like you see in the Brunch Pro child theme by Shay Bocks:

Based on this question from a member of the Genesis community :

Does anyone know of a tutorial on how to get recent/featured posts to display like this?

And here’s what the code produces when used in the Genesis Sample child theme by StudioPress.

Demo Video

Shows the responsiveness of the columns on smaller screens.

Code Installation

There’s 3 simple steps :

Step 1 : Paste the PHP code at the end of your child themes functions file.

genesis_register_sidebar( array(
    'id' => 'home-top',
    'name' => __( 'Home Top', 'genesis' ),
) );

add_action( 'genesis_before_content_sidebar_wrap', 'home_page_widget' );
function home_page_widget() {

    if ( is_front_page() ) {
    
    genesis_widget_area( 'home-top', array(
        'before' => '<div class="home-top widget-area">',
        'after'  => '</div>',
    ) );
    }
}

add_image_size( 'vertical-thumbnail',   680, 900, true );

Step 2 : Paste the CSS at the end of your child themes style.css file

.home-top .entry {
    width: 31.6239%;
    float: left;
    margin-left: 2.5641%;
 }
 
.home-top .entry:nth-of-type(3n+1){
    margin-left: 0;
}

.home-top .entry .entry-title {
    font-size: 16px;
    text-align: center;
}

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

    .home-top .entry {
        width: 100%;
        float: none;
        margin: auto;
    }
    
    .home-top {
        margin-bottom: 40px;
    }
    
}

Thats all you need to do unless you want to add the following image hover effects.

Show Title On Featured Image Hover

If you want to add the overlay which displays the entry title on over, use the following CSS instead :

Here’s the overlay effect :

Step 3 : Drag the Genesis Featured Posts widget into the home top widget area and configure the widget settings as seen in the following screenshot:

This is one way to display featured posts in columns. There are many others you’ll find here on WP SITES.

Related Tutorials