Columns or Grid Display

[GeneW]

After a week or so of reading, research and contemplating, I bought Genesis Framework today and pretty much what sold me on that was according to what I have been reading, the ability to display posts in columns or a grid style. This does not seem to be the case and is not at all what I am experiencing.

I have spent the last 4 hours trying to understand the tutorials for Grid Loop and any other method I came across to accomplish this. I'm sure it's a simple solution, but apparently not one I can grasp.

Is there or is there not an easy way for me to display posts in columns or a grid style arrangement?

---

Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

[wario]

The easiest way I've found to do posts in columns is with a filter that adds a class to posts. Found it on Bill Erikson's site:

/**
 * Archive Post Class
 * @since 1.0.0
 *
 * Breaks the posts into two or three columns
 * @link http://www.billerickson.net/code/grid-loop-using-post-class
 *
 * @param array $classes
 * @return array
 */
function custom_archive_post_class( $classes ) {

	$classes[] = 'one-third';
	global $wp_query;
	if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
		$classes[] = 'first';
	return $classes;
}

add_filter( 'post_class', 'custom_archive_post_class' );

The are two things to modify above depending on the grid columns you want.
1.) The class string you are passing to the $classes[] array, in this case it's 'one-third'
2.) The modulus ( % ) number is based off the grid column class. In this case it's 3 since we want 3 columns for the grid. This is used to check which posts get the 'first' class to make the grid work.

You can put this in a page template if you want it to work on a per page basis, or just right in your functions.php file for all post (blog, archives, etc).

Hope that helps.

[GeneW]

Now that is easy!

I have no idea why the tutorials I found were so complicated or just plain didn't work. One even broke the functions.php!

This is great, thank you. If I change the % 3 to 2 will I need to change the $classes[] array to something other than 'one-third'? I would change it up because the grid posts are very narrow and long. Fixed that 🙂

And, not to be a big pain, but how difficult would it be to have one featured post, say the latest article sitting above the grid?

---

Writing at Simple Theology, Messy Life | Resources for Spiritual Growth

[wario]

Cool, glad you got it working.

If you want to add a single featured post at the top, the easiest way would be to make a widget area and then use the built in Genesis Featured Post widget. That way you can always change if you wanted to add a notice, promotion, or some other content in addition to the featured post (or instead).

I want to mention also, that you if you put the grid Archive Post Class function I gave you above in the functions file, you may run into an issue where a single post adopts the same class as well, so it may appear in a third or half column instead of the full content width. To avoid this you need to put that function in a home.php page template (and an archive.php if you want it to work for category archives as well). Or if you just want to keep it in your functions file you need wrap the inside of the function in an if() statement like this:

/**
 * Archive Post Class
 * @since 1.0.0
 *
 * Breaks the posts into two or three columns
 * @link http://www.billerickson.net/code/grid-loop-using-post-class
 *
 * @param array $classes
 * @return array
 */
function custom_archive_post_class( $classes ) {

	if( ! is_singular() ) {
		$classes[] = 'one-third';
		global $wp_query;
		if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
			$classes[] = 'first';
		return $classes;
	}
}

add_filter( 'post_class', 'custom_archive_post_class' );

It's the same as the first one, but just has the if() to check if it's a single post or not.

Ok, so to add new widget area we'll hard code it in our functions.php file. You can also use the Genesis Simple Sidebars plugin, but this way will insure it doesn't get accidentally deleted. Either way will work, just make sure you grab the id (slug) if you use the plugin. Add this to your functions.php file:

//* Register Featured Article Sidebar
genesis_register_sidebar( 
	array(
		'id'            => 'home-featured-article',
		'name'          => __( 'Homepage Featured Article', 'genesis' ),
		'description'   => __( 'Featured article above the post grid.', 'genesis' ), 
	)
);

If you haven't already made a front-page template or home template, create a file in your theme folder and call it home.php. This is what will load when someone visits the homepage. This template only works if you have your homepage set to your latest posts (not a static page) in your Reading Settings. Copy this into the home.php template:

<?php

//* Add the Featured Article section 
add_action( 'genesis_after_header', 'home_featured_article' );
function home_featured_article() {

	echo '<div class="widget-area"><div class="wrap">';

	if (is_active_sidebar( 'home-featured-article' )) { 
		genesis_widget_area( 'home-featured-article', array(
		'before' => '<div class="featured-single">',
		'after' => '</div>'
		) );
 	}
	
	echo '</div></div>';

}

/**
 * Archive Post Class
 * @since 1.0.0
 *
 * Breaks the posts into two or three columns
 * @link http://www.billerickson.net/code/grid-loop-using-post-class
 *
 * @param array $classes
 * @return array
 */
function custom_archive_post_class( $classes ) {

	$classes[] = 'one-third';
	global $wp_query;
	if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % 3 )
		$classes[] = 'first';
	return $classes;
}

add_filter( 'post_class', 'custom_archive_post_class' );

genesis();

Again, if you have the Archive Post Class function in your functions.php file using the if() statement, you don't have to include it in the home.php. Actually, if you do you would get an error because you're defining the same function twice so make sure to double check that.

And that should do it. The featured section will only appear if you something in that sidebar widget area, so be sure to drag over the featured posts widget and pick your settings.

If you wanted to add 2 featured articles side by side, you would have to make 2 sidebars (you can add "left" and "right" to there names) and then add another if (is_active_sidebar()) function below the first. In each function add a "one-half" class name to the <div class= "featured-single">, and also add "first" class to the first one so they float correctly. That "featured-single" class is just there to help you style your post.

Hope that helps!

[Author]

Posts