How to display Posts from a Category in columns using Display Posts Shortcode

Display Posts Shortcode is a fantastic plugin by Bill Erickson using which we can fetch and display entries from the WP database easily w/o writing manual queries.

In this article I show how Display Posts Shortcode can be used to show Featured images and linked titles of 12 Posts from a particular “Featured” category in 3 columns.

Step 1

Install and activate Display Posts Shortcode.

Step 2

Add the following in child theme’s functions.php:

	// Register a custom image size for Featured Category images
	add_image_size( 'featured-cat-image', 300, 200, true );
	/**
	* Add Column Classes to Display Posts Shortcodes
	* @author Bill Erickson
	* @link http://www.billerickson.net/code/add-column-classes-to-display-posts-shortcode
	*
	* Usage: [display-posts columns="2"]
	*
	* @param array $classes
	* @param object $post
	* @param object $query
	* @return array $classes
	*/
	function be_display_post_class( $classes, $post, $listing, $atts ) {
	if( !isset( $atts['columns'] ) )
	return $classes;
	$columns = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
	$classes[] = $columns[$atts['columns']];
	if( 0 == $listing->current_post || 0 == $listing->current_post % $atts['columns'] )
	$classes[] = 'first';
	return $classes;
	}
	add_filter( 'display_posts_shortcode_post_class', 'be_display_post_class', 10, 4 );

view raw functions.php hosted with by GitHub

Set your desired thumbnail dimensions in the above in line 2.

Step 3

Regenerate the featured images’ thumbnails.

Step 4

Add this shortcode wherever you want your category posts grid:

[display-posts category="featured" posts_per_page="12" wrapper="div" wrapper_class="featured-posts-grid" image_size="featured-cat-image" columns="3"]

view raw gistfile1.txt hosted with by GitHub

Replace “featured” with your category slug.

Step 5

Add the following in child theme’s style.css:

	.featured-posts-grid .listing-item {
	margin-bottom: 40px;
	}
	.listing-item img {
	vertical-align: top;
	}
	.featured-posts-grid .listing-item a.image {
	display: block;
	}

view raw style.css hosted with by GitHub

Source:

https://github.com/billerickson/display-posts-shortcode/wiki

http://www.billerickson.net/code/add-column-classes-to-display-posts-shortcodes/