WordPress featured posts in a horizontal scrolling container.

For a while now WordPress designers have been moving away from layouts with sidebars, placing related content right under the article content. Related content can be featured blog posts, related articles with the same tag, you name it.

We will be looking at how to display a set of featured blog posts in a horizontal scrolling container.

A couple of words on why it is a good idea. Traffic from mobile devices is 20 to 80% on any site these days. So the designer must think about real estate on small screens. The best way to display top priority content that on large screen is displayed in 3-4 columns is to make the columns fit 2-in-a-row on small screens. The best way to display auxiliary content is a horizontal scrolling panel. This way the content is both available and occupying very little vertical space.

The result look & code we will be looking to get is displayed in this fiddle. You can, of course, style the elements to fit your design. The important thing is to get them scrolling horizontally.

You can simply copy the SCSS code in your theme’s SCSS. The WordPress loop code below can be inserted into the front page template, default page template, single post – any place – under the article content.

Important note on the styling: always set the loop-item widths in such a way as to leave the next column in a row “peaking out”, i.e. partially visible at the left margin of the screen. This way the mobile users will know that they need to swipe the columns’ row to reveal the next columns in line.

<div class="container scroll-container text-center">

 <h2 class="text-center"><?php esc_html_e( 'New on Blog', 'understrap' ); ?></h2>

  <div class="row">    

<?php 
$my_query = new WP_Query(array(
            'category_name' => 'featured',
            'posts_per_page' => 6 //change to whatever you want
            //'tag_slug__in' => get_the_title() 
            ) 
            );

while ( $my_query->have_posts() ) : $my_query->the_post();

$do_not_duplicate = $post->ID; ?>

<div <?php post_class('loop-item col'); ?> id="post-<?php the_ID(); ?>">      
          <?php
		   if ( has_post_thumbnail() ) { ?>
			<a href="<?php echo get_permalink( $post->ID ); ?>" class="display-block"><?php echo get_the_post_thumbnail( $post->ID, 'post-cover', array( 'class' => 'img-fluid rounded-lg mb-2' ) ); ?></a>
		  <?php } else { ?>  
           <a href="<?php echo get_permalink( $post->ID ); ?>" class="display-block"><img src="<?php echo get_template_directory_uri(); ?>/src/img/noimg.png" alt="<?php the_title(); ?>" class="img-fluid rounded-lg mb-2" /></a></div>
         <?php } ?>        
         
         <a href="<?php the_permalink(); ?>"><h4 class="h5 text-left"><?php the_title(); ?></h4></a>
         <div class="entry-meta text-left text-muted small">
			<i><?php understrap_posted_on(); ?></i>
		 </div><!-- .entry-meta --> 
     
         <div class="text-left mt-2"><?php the_excerpt(); ?></div>
         <?php }?> 
        </div>

<?php
endwhile; 
wp_reset_postdata();?>    
    
  </div><!--//row-->
  
</div><!--//container-->