Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active July 19, 2017 05:37
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srikat/d76b96f17d378df1dd0e to your computer and use it in GitHub Desktop.
Save srikat/d76b96f17d378df1dd0e to your computer and use it in GitHub Desktop.
How to display Posts from a Category in columns using Display Posts Shortcode. https://sridharkatakam.com/how-to-display-posts-from-a-category-in-columns-using-display-posts-shortcode/
// 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 );
[display-posts category="featured" posts_per_page="12" wrapper="div" wrapper_class="featured-posts-grid" image_size="featured-cat-image" columns="3"]
.featured-posts-grid .listing-item {
margin-bottom: 40px;
}
.listing-item img {
vertical-align: top;
}
.featured-posts-grid .listing-item a.image {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment