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

WP SITES

2784

Original Genesis Tutorials & 6000+ Guaranteed Code

Snippets

  • Consultation
  • Full Access
  • Log in

Display Posts In Columns On Genesis Archive Pages

Using the content column classes built into Genesis, you can display posts in 2, 3, 4 & 6 columns on any blog listings page, including archive, author, blog, category, search, and tag pages.

Lets take a look at 2 code examples which generate 2 and 3 columns of posts on archive pages.

2 Columns #

2 columns genesis

And here’s the PHP code you can copy from the view raw link in the Gist and paste at the end of your child themes functions.php file.

Register for full access

3 Columns #

3 columns genesis

Here’s the PHP code you can copy from the view raw link in the Gist and paste at the end of your child themes functions.php file.

Register for full access

4 Columns #

Here’s the PHP code you can copy from the view raw link in the Gist and paste at the end of your child themes functions.php file or archive type template file.

Register for full access

Blog Page Template Columns #

Use the genesis_is_blog_template conditional tag to display entries in columns on any page using the blog page template.

Register for full access

Note : This code works in archives using the WordPress Template Hierarchy and won’t work with Genesis Featured Pages/Posts widget. You can use CSS with the Genesis featured page & featured post widgets to display entries in columns.

Mobile Responsive Columns #

All Responsive StudioPress child themes include Media Queries at the end of the themes style.css file which make the content column classes re-size at different screen sizes so they’re mobile responsive.

Columns On Archives With Genesis Featured Posts Widget

If your archive also includes a widget area populated with the Genesis featured posts widget, you may find the code effects the loop in the widget in which case you’ll need to add the folowing to the conditionals:

is_main_query()

CSS Grid Columns

Reader Interactions

Comments

  1. Scott Fichter says

    March 27, 2018 at 5:23 am

    Hey Brad,

    How would I approach creating a custom page template using this formatting? My objective is to have this layout to a specific category.

    Would this do it?

    function child_loop_args() {
        return array(
            posts_per_page => 5,
        );
    }
    Log in to Reply
    • Brad Dalton says

      March 27, 2018 at 5:34 am

      No. You have 2 options. Use the 1st code snippet in functions.php like this :

      add_filter( 'post_class', 'wpsites_archive_post_column_class' );
      function wpsites_archive_post_column_class( $classes ) {
       
          if ( is_category('category-slug-or-id') ) {
      	global $wp_query; 
      	$classes[] = 'one-third';
      		
          if ( $wp_query->current_post % 3 === 0 ) 
      	$classes[] = 'first';
      	}
      return $classes;
      }

      Or

      You can use the code in a category template file like this without the conditional tag and name the file category-news.php using the WordPress Template Hierarchy.

      add_filter( 'post_class', 'wpsites_archive_post_column_class' );
      function wpsites_archive_post_column_class( $classes ) {
      
      	global $wp_query; 
      	$classes[] = 'one-third';
      		
          if ( $wp_query->current_post % 3 === 0 ) 
      	$classes[] = 'first';
      	
      return $classes;
      }

      Link to your category archive page please.

      Log in to Reply
  2. finiki says

    January 27, 2015 at 12:43 am

    I’m about to try this out and was wondering how I set this up for only one category and not all categories?

    Log in to Reply
    • Brad Dalton says

      January 27, 2015 at 8:09 am

      Change the conditional tag from archive to category and add your category slug like this example:

      if ( is_category('your-category-slug') ) {
      Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

Primary Sidebar

Code written by Brad Dalton specialist for Genesis, WooCommerce & WordPress theme customization. Read More…

Advertise · WPEngine · Genesis · Log in

  • Access Problems
  • Account Details
  • Consulting
  • Tags
 

Loading Comments...
 

You must be logged in to post a comment.