Recent Posts - Show Excerpt

Hi,

I’m trying to show excerpts in recent posts, along with a Read More link after the excerpt. I was able to remove the featured image and align the posts vertically using the Classic Recent Posts element, but there’s no “Show Excerpt” option.

I had implemented the code found in this support thread, but it didn’t have any effect:

Any help here would be appreciated!

Best,
Andrew

Hey Andrew,

Thanks for writing in! Are you just using the Classic Recent Post element and use it in Cornerstone? That element doesn’t give your the option to enable or disable the excerpt. You just need to make the excerpt be displayed by default. Please have your code updated and use this instead:

// Add Excerpts to the recent post element
// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'false',
    'no_sticky'    => '',
    'no_image'     => '',
    'img_size'     => '',
    '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 : '';
  $img_size      = ( $img_size     != '' ) ? $img_size : 'entry-cropped';
  $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(), $img_size );
    $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 style="color:initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_excerpt_for_social() ) . '</p></div>' : '';

  $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', 'cornerstone' ), 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_action('wp_head', 'change_recent_posts_to_v2');
function change_recent_posts_to_v2() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
// =============================================================================

By the way, the given credentials has avery limited privilege. It does not allow us to check your child theme’s functions.php file.

Please let us know how it goes.

March 2021 Update: The above code example has been adjusted to account for a change to a function name.

Thanks RueNel!

I updated your login to an administrator role, so you should be able to see all of the php settings.

I added the above code to the child theme’s functions.php, but i’m still not seeing any excerpts unfortunately.

This page is displaying recent posts with “Minister’s Update” category, but right now it’s just showing the post title and date:

http://new.uustudiocity.org/connect/news-and-events/

Hi there,

That customization is only applicable for shortcode and not for cornerstone recent posts element. You can’t customize existing element, so what you have to do is add text element and add it as a shortcode, example

[x_recent_posts show_excerpt="true" count="4"]

Right now, it’s added as element and there is no option for excerpt.

Thanks!

1 Like

Hey Rad!

Ah, I had originally added it via shortcode in a text element, had just recently tried the recent posts cornerstone element to see if that fixed the issue.

That seems to have done the trick, thank you! A couple of minor changes needed:

  1. Is there any way to add a little padding above the excerpt? It’s showing up really close beneath the post date right now. As seen under “Minister’s Update” at: http://new.uustudiocity.org/connect/news-and-events/

  2. How would I change the ellipsis at the end to a “read more” text link?
1 Like

Hello There,

Thanks for updating in!

1.) To add a padding above the excerpt, please add the following CSS code in the X > Launch > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-recent-posts-excerpt {
    padding-top: 15px;
    padding-bottom: 15px;
}

2.) You will do two things:
i.) Please find this line:

$excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p style="color:initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

And replace it with this:

$excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p style="color:initial;">' . cs_get_raw_excerpt() . '</p></div>' : '';

ii.) And in your child themes functions.php file, you will need to add this:

// Excerpt More String
// =============================================================================

if ( ! function_exists( 'x_excerpt_string' ) ) :
  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );
endif;

We would loved to know if this has work for you. Thank you.

Thank you! This code worked exactly as needed, and the changes in the funcitons.php made the css unnecessary (the excerpt was pushed down a bit below the date in the process).

One last thing: for some reason these changes also added either a margin or padding to top of the entire recent posts item so that it no longer lines up with the top of the section:

Before:

After:

Hi there,

The link shouldn’t be added to another link. Please don’t do the 2)i.) and 2)ii.) procedures, instead, just replace this line

$excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p style="color:initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

with this line

$excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p style="color:initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . ' <div><span class="more-link">' . __( 'Read More', '__x__' ) . '</span></div></p></div>' : '';

The recent posts item itself is already wrapped by the link which is why there is no read more link there, but if you wish to add, then you should just add the text and not the whole read more structure.

Thanks!

Got it, thank makes sense. This did the trick, recent posts and excerpts are looking exactly as intended, thank you!

Best,
Andrew

You’re most welcome, Andrew.

Hi Support team,

I applied the above code in my child theme functions.php file, then used a text element to create a recent posts widget:

[x_recent_posts show_excerpt="true" no_image="true" count="1"]

However, I am still only getting the title and date, nothing else. Any ideas what I can look for? I attach my functions.php file in case it helps at all.

website URL is: http://aftertheflood.co.routing.yourhost.co/

Thanks in advance for your help!

functions.php

<?php

// =============================================================================
// FUNCTIONS.PHP
// -----------------------------------------------------------------------------
// Overwrite or add your own custom functions to Pro in this file.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Enqueue Parent Stylesheet
//   02. Additional Functions
// =============================================================================

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );



// Additional Functions
// =============================================================================

// Disable support for comments and trackbacks in post types
function df_disable_comments_post_types_support() {
	$post_types = get_post_types();
	foreach ($post_types as $post_type) {
		if(post_type_supports($post_type, 'comments')) {
			remove_post_type_support($post_type, 'comments');
			remove_post_type_support($post_type, 'trackbacks');
		}
	}
}
add_action('admin_init', 'df_disable_comments_post_types_support');

// Close comments on the front-end
function df_disable_comments_status() {
	return false;
}
add_filter('comments_open', 'df_disable_comments_status', 20, 2);
add_filter('pings_open', 'df_disable_comments_status', 20, 2);

// Hide existing comments
function df_disable_comments_hide_existing_comments($comments) {
	$comments = array();
	return $comments;
}
add_filter('comments_array', 'df_disable_comments_hide_existing_comments', 10, 2);

// Remove comments page in menu
function df_disable_comments_admin_menu() {
	remove_menu_page('edit-comments.php');
}
add_action('admin_menu', 'df_disable_comments_admin_menu');

// Redirect any user trying to access comments page
function df_disable_comments_admin_menu_redirect() {
	global $pagenow;
	if ($pagenow === 'edit-comments.php') {
		wp_redirect(admin_url()); exit;
	}
}
add_action('admin_init', 'df_disable_comments_admin_menu_redirect');

// Remove comments metabox from dashboard
function df_disable_comments_dashboard() {
	remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
}
add_action('admin_init', 'df_disable_comments_dashboard');

// Remove comments links from admin bar
function df_disable_comments_admin_bar() {
	if (is_admin_bar_showing()) {
		remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
	}
}
add_action('init', 'df_disable_comments_admin_bar');


// =============================================================================
// Add Excerpts to the recent post shortcode. You can use this by adding a text element and then using the shortcode 
// [x_recent_posts show_excerpt="true" count="1" no_image="true"]
// =============================================================================
function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'false',
    'no_sticky'    => '',
    'no_image'     => '',
    'img_size'     => '',
    '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 : '';
  $img_size      = ( $img_size     != '' ) ? $img_size : 'entry-cropped';
  $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(), $img_size );
    $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 style="color:initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . ' <div><span class="more-link">' . __( 'Read More', '__x__' ) . '</span></div></p></div>' : '';

  $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', 'cornerstone' ), 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;
}
// Show excerpt with Read More String
// =============================================================================

if ( ! function_exists( 'x_excerpt_string' ) ) :
  function x_excerpt_string( $more ) {
    
    $stack = x_get_stack();

    if ( $stack == 'integrity' ) {
      return ' ... <div><a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a></div>';
    } else if ( $stack == 'renew' ) {
      return ' <a href="' . get_permalink() . '" class="more-link">' . __( 'Read More', '__x__' ) . '</a>';
    } else if ( $stack == 'icon' ) {
      return ' ...';
    } else if ( $stack == 'ethos' ) {
      return ' ...';
    }

  }
  add_filter( 'excerpt_more', 'x_excerpt_string' );
endif;
// =============================================================================

Hi There,

Regretfully, we can not provide further customization on that function. I advise that you use a plugin instead to output a very flexible recent post content. Something like the Display Posts Shortcode It does offer a lot of parameters. It may look very raw at first but that is one thing good about it, it is fully styleable (with CSS).

Thank you for understanding,

Hi Friech,

No worries I understand, that was quite an involved function already! The Display Posts Shortcode plugin you suggested is fantastic and actually much easier to work with, so thank you, it has solved my issue.

Happy Friday!

Best,
Sabih

You’re welcome! :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.