Docs

[pdopchev]

Hi guys,

Was looking to add short excerpt to the recent post element in cornerstone. After searching on the forum found this thread: https://community.theme.co/forums/topic/recent-posts-with-excerpt/ but it seems like the code there was incomplete/improper and cannot figure out where to add the second part of the code.

Any suggestions how to do that?

link: http://www.enjoycrestedbutte.com

[Christopher]

Hi there,

Are you referring to this one?

[recent_posts type="post" enable_excerpt="true" count="3" orientation="horizontal" category="Love"]

If so, please add a text element and insert shortcode there.

Hope it helps.

[pdopchev]

Hi, actually I was referring to using recent post as an element in cornerstone. I did try both ways – added a recent post element in one row and the shortcode in another and still there is no excerpt. Followed this thread: https://community.theme.co/forums/topic/recent-post-excerpt-and-excerpt-length-cornerstone/#post-297951 and added the last code provided to the functions.php file

[Rupok]

Hi there,

Thanks for writing back. That’s modified shortcode and you need to use as shortcode as it’s not available as element. If you are looking for element, you can find some addons from CodeCanyon

Cheers!

[pdopchev]

Thank, it seems like I will be using the shortcode instead of the element but ran into a an issue after adding this code for the excerpt from this thread: https://community.theme.co/forums/topic/add-excerpt-to-recent-posts-shortcode/

function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => '',
    'count'       => '',
    'category'    => '',
    'enable_excerpt' => '',
    'offset'      => '',
    'orientation' => '',
    'no_image'    => '',
    'fade'        => ''
  ), $atts ) );

  $id            = ( $id          != ''          ) ? 'id="' . esc_attr( $id ) . '"' : '';
  $class         = ( $class       != ''          ) ? 'x-recent-posts cf ' . esc_attr( $class ) : 'x-recent-posts cf';
  $style         = ( $style       != ''          ) ? 'style="' . $style . '"' : '';
  $type          = ( $type        == 'portfolio' ) ? 'x-portfolio' : 'post';
  $count         = ( $count       != ''          ) ? $count : 3;
  $category      = ( $category    != ''          ) ? $category : '';
  $category_type = ( $type        == 'post'      ) ? 'category_name' : 'portfolio-category';
  $offset        = ( $offset      != ''          ) ? $offset : 0;
  $orientation   = ( $orientation != ''          ) ? ' ' . $orientation : ' horizontal';
  $no_image      = ( $no_image    == 'true'      ) ? $no_image : '';
  $fade          = ( $fade        == 'true'      ) ? $fade : 'false';
  $enable_excerpt = ( $enable_excerpt == 'true'      ) ? true : false;

  $output = "<div {$id} class=\"{$class}{$orientation}\" {$style} data-fade=\"{$fade}\">";

    $q = new WP_Query( array(
      'orderby'          => 'date',
      'post_type'        => "{$type}",
      'posts_per_page'   => "{$count}",
      'offset'           => "{$offset}",
      "{$category_type}" => "{$category}"
    ) );

    if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post();

      if ( $no_image == 'true' ) {
        $image_output       = '';
        $image_output_class = 'no-image';
      } else {
        $image_output       = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry-' . get_theme_mod( 'x_stack' ) . '-cropped', NULL ) . '</div>';
        $image_output_class = 'with-image';
      }

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), 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>'
                       . ( $enable_excerpt ? '<span class="x-recent-posts-excerpt">' . strip_tags( get_the_excerpt() ) . '</span>' : '' )
                     . '</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( 'recent_posts' );
	add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
}

The featured images are displaying in their original ration instead the default ration of the recent post shortocde. Is there a way to fix that?

Also, would like to remove the post date from displaying – any thoughts on that?

Thank you!

[Rupok]

Hi there,

Thanks for writing back. Upon checking your site, I can see the image ratio is usual as it supposed to be. To remove the date, you can add this under Custom > CSS in the Customizer.

.x-recent-post2 .x-recent-posts-date {
  display: none;
}

Cheers!

[pdopchev]

Thank you for the code! However checking back at home page (using 3 different browsers with clean cache) it is still showing difference in the image ratio, which I am assuming is causing the white “gap” between the image and the excerpt…

[Rupok]

Hi there,

Are you using two different shortcodes? Second one seems different than first one where image is being used instead of background image hence styling is different. Ca you make sure you are using same shrotcode/element?

Thanks!

[pdopchev]

Hi, yes – the first one is the recent post element directly from cornerstone, the second one is the shortcode integrated in a text element. Had to use the shortcode since this is the only way to display an excerpt with recent posts (followed this thread): https://community.theme.co/forums/topic/add-excerpt-to-recent-posts-shortcode/ but when the excerpt code is added it also adds the big white “gap” and the images have different ratio. So my question is, is that possible to fix or there is no way to display excerpt text with recent posts?

Thank you!

[Rupok]

Hi there,

Thanks for clarifying. I can give you a solution for this. You need to add a class (say my-recent-posts) for the Row/Column that contains the second shortcode.

Then you can add this under Custom > CSS in the Customizer.

.my-recent-posts .x-recent-post2 .x-recent-posts-img {
  padding-bottom: 0;
}

Make sure to replace the my-recent-posts with your given class name.

Cheers!

[pdopchev]

Great – it works perfectly for the extra padding space. However, the images are still displaying with different ratios! Is there a way to have them display just like using the post element directly from cornerstone? (like the first example on the same page)

[Paul R]

Hi,

The recent post code you have added is no longer compatible with the new version of the theme.

Kindly change it to this

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'     => '',
    '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(), 'full' );
        $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( __( '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>'
                        . '<span class="x-btn x-btn-rounded x-btn-regular">Read more</span>'
                   . '</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' );
}

Then use this shortcode to display excerpts

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

Hope that helps.

[pdopchev]

Yes, it does but oddly enough when the count value is changed to “2” the images are not displayed… Is there a way to fix that?

Also, it seems like that the excerpt length is not the same – thought that was from the Customizer -> Blog. Does it have to be set within the shortcode?

Thank you!

[Jade]

Hi there,

Please remove this code on the customizer:

.front-page-excerpt .x-recent-post2 .x-recent-posts-img {
    padding-bottom: 0;
}

as it is causing the featured images to not display.

[pdopchev]

Thank you so much! That fixed the issue!

On the second question – is there a way to set the excerpt length in the recent post shortcode? Tried with this code but it doesn’t seem to work:

// Excerpt Custom Length
function custom_excerpt_length(  ) {
  return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

[Author]

Posts