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 ); |
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"] |
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; | |
| } |
Source:
https://github.com/billerickson/display-posts-shortcode/wiki
http://www.billerickson.net/code/add-column-classes-to-display-posts-shortcodes/
Just writing you to say “Thank You”.
The code works like a charm.
Happy New Year.
Best regards and all the best.
Valter
You are very welcome.
Happy new year to you too.
Hello! Sorry for bothering, I’m just really interested in using this method but after doing all the mentioned steps it’s still not working fine on my end.
The display is cool, but it shows only one column instead of the 3 I configured so there’s surely something I skipped or something that I need to do additionaly.
My website is using the free Parabola WordPress theme and I just created a child theme to apply this.
Try adding this CSS:
https://gist.githubusercontent.com/studiopress/5700003/raw/2c86d86b9df438f5a4d226301fb08f51a251d5ac/columns.css
will this work for posts that are in a category?
Do you want to display posts on category archive pages in 3 columns?
Awesome.. works thanks.. how to limit excerpt content?
https://github.com/billerickson/display-posts-shortcode/wiki#customizing-the-excerpt