Hi there,
I would like to display a list of posts from a category onto a page built using cornerstone. I’ve tried searching other topics, but can’t figure out how to do this.
Would very much appreciate any help.
Thank you!
-Josh
Hi Josh,
Thank you for writing in, you can use the Essential Grid to create a Grid of posts is from a certain category.
Essential Grid Basics Part 1: Grid Source
Or if you like a simple posts grid, you can utilize the Classic Recent Posts element that you can also filter by category.
Hope it helps,
Cheers!
Hi Friech,
Thank you for those suggestions. I tried them, but none of them worked for what I needed to do. I ended up using a plugin called List Category Posts, and then customized it using this artictle tutorial http://sundari-webdesign.com/wordpress-the-quest-to-my-perfect-list-view-for-posts-events-and-articles/#comment-1859
Thank you for the help!
- Joshua
Glad you’ve sorted it out 
Hi,
I guess I still need some help with this. What I thought was going to work is not working.
I’m now trying to use the Classic Recent Posts element in cornerstone to make it easy and keep everything native. However, I need to do a couple things. I need the listing to also display an excerpt from the post, and I also need to remove/raise the post count limit of just “4”.
How can I do these things?
Thank you very much.
- Joshua
Hey Joshua,
To add an excerpt to the recent post element, you will have to override the shortcode output through the child theme. Please install and activate the child theme and login through FTP then edit the functions.php then add this code:
// Displaying Excerpt in Recent Posts
// =============================================================================
function x_shortcode_recent_posts_v2( $atts ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'type' => 'post',
'count' => '',
'category' => '',
'offset' => '',
'orientation' => '',
'show_excerpt' => 'true',
'no_sticky' => '',
'no_image' => '',
'fade' => ''
), $atts, 'x_recent_posts' ) );
$allowed_post_types = apply_filters( 'cs_recent_posts_post_types', array( 'post' => 'post' ) );
$type = ( isset( $allowed_post_types[$type] ) ) ? $allowed_post_types[$type] : 'post';
$id = ( $id != '' ) ? 'id="' . esc_attr( $id ) . '"' : '';
$class = ( $class != '' ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
$style = ( $style != '' ) ? 'style="' . $style . '"' : '';
$count = ( $count != '' ) ? $count : 3;
$category = ( $category != '' ) ? $category : '';
$category_type = ( $type == 'post' ) ? 'category_name' : 'portfolio-category';
$offset = ( $offset != '' ) ? $offset : 0;
$orientation = ( $orientation != '' ) ? ' ' . $orientation : ' horizontal';
$show_excerpt = ( $show_excerpt == 'true' );
$no_sticky = ( $no_sticky == 'true' );
$no_image = ( $no_image == 'true' ) ? $no_image : '';
$fade = ( $fade == 'true' ) ? $fade : 'false';
$js_params = array(
'fade' => ( $fade == 'true' )
);
$data = cs_generate_data_attributes( 'recent_posts', $js_params );
$output = "<div {$id} class=\"{$class}{$orientation}\" {$style} {$data} data-fade=\"{$fade}\" >";
$q = new WP_Query( array(
'orderby' => 'date',
'post_type' => "{$type}",
'posts_per_page' => "{$count}",
'offset' => "{$offset}",
"{$category_type}" => "{$category}",
'ignore_sticky_posts' => $no_sticky
) );
if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();
if ( $no_image == 'true' ) {
$image_output = '';
$image_output_class = 'no-image';
} else {
$image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'entry-cropped' );
$bg_image = ( $image[0] != '' ) ? ' style="background-image: url(' . $image[0] . ');"' : '';
$image_output = '<div class="x-recent-posts-img"' . $bg_image . '></div>';
$image_output_class = 'with-image';
}
$excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), the_title_attribute( 'echo=0' ) ) ) . '">'
. '<article id="post-' . get_the_ID() . '" class="' . implode( ' ', get_post_class() ) . '">'
. '<div class="entry-wrap">'
. $image_output
. '<div class="x-recent-posts-content">'
. '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
. '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
. $excerpt
. '</div>'
. '</div>'
. '</article>'
. '</a>';
endwhile; endif; wp_reset_postdata();
$output .= '</div>';
return $output;
}
add_filter('wp_head', 'custom_recent_posts');
function custom_recent_posts() {
remove_shortcode( 'x_recent_posts' );
remove_shortcode( 'recent_posts' );
add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2' );
}
To display more than 4 posts in the recent post element, you can use the offset attribute to the shortcode just like this:
Hope this helps.
Hi Jade,
Thank you for this. It works for me. Although I would prefer to have a flat layout rather than card-view if it was possible.
I need to fix the styling of the except, how can I make the font-color darker, and add spacing above it between the date?
And also, how can I make it so that the Title is not cut off? Some of our post titles are long and we need the full titles to be readable.
Thank you so much for your help!
-Joshua
Hi Joshua,
Please also add this custom CSS:
.x-recent-posts-excerpt {
color: #000;
}
.x-recent-posts .h-recent-posts {
text-overflow: inherit;
white-space: inherit;
}
Hope it helps
Hi @thai
Perfect! Thank you so much. My last question is, on mobile there is hardly any margin between the individual posts. How can I increase the margin between the posts?
Thank you!
-Joshua
Hi Joshua,
Please add this to Theme Options > CSS
@media (max-width: 767px) {
a.x-recent-post {
margin-bottom: 4em;
}
}
If that does not work, please provide us the direct page URL where we can see the recent posts.
Thanks,
Hi @friech
I tried that but unfortunately it is not working. Here is the link. The X Theme recent post widget is towards the bottom of the page.
Hi @SeekGod,
Please update my given CSS code to this:
@media (max-width: 767px) {
.x-recent-posts a.x-recent-post3 {
margin-bottom: 30px;
}
}
Feel free to adjust the 30px, you might want to add it on the Page CSS instead so it does not affect your other page’s recent posts.
Cheers!
This is perfect! Thank you guys.
You’re welcome!
1 Like
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.