[Sean SParticipant]

Yes, I would love to have this added onto future features. I understand that many people used to use this as a side bar type thing, but with things changing and marketing being more content driving, it allows us to use it more creatively and even build entire pages with it.

If you guys add it, it would be nice for the excerpt to be in it’s own and not anchored into the link.

[Paul RModerator]

Noted.

Thanks for the feedback Sean.

Have a nice day!

[chrisrobweeksParticipant]

Thanks to this thread, I was able to get excerpts working. Thank you!

One (semi)related question: Is there an option to disable the paper icon overlay on:hover (see attached) and replace it with a standard mouseover filter, such as brightness or saturation? I like the effect, but it does interfere with the featured image.

Thank you for your continued support!

[ZeshanMember]

Hi Chris,

Thanks for writing in! Your screenshot is not available at my end. Please check. Also, please provide us with your URL so we can take a closer look to your setup.

Thanks!

[MatthieuHParticipant]

I also think that the excerpt just be a main feature, even if it is set off by default.

[DarshanaModerator]

@spiderpw-2

We certainly appreciate the feedback! This is something we can add to our list of feature requests. This way it can be taken into consideration for future development. All of these items are discussed with our team internally and prioritized based on the amount of interest a particular feature might receive. Thanks!

[markavinsonParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,

I see first four recent posts have excerpt. Did you insert recent posts shortcode with two different method?
Please make sure you use following shortcode :

[x_recent_posts type="post" enable_excerpt="true" count="3" orientation="horizontal"]

Please find following lines in functions.php :

remove_shortcode( 'recent_posts' );
	add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );

And update them to :

remove_shortcode( 'x_recent_posts' );
	add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );

Hope it helps.

[Chris StovallParticipant]

What is the final code? I see various versions above with edits to the codes.

We need to be able to find these solutions easily. This is not easy. Wading through all of the codes, making edits to the codes.

What was the final code that fixed this????

Please post the FINAL working cornerstone code to add an excerpt, make it not a link and also how to limit the length of the excerpt.

[ChristopherModerator]

Hi there,

Please add this in child theme’s functions.php file :

// =============================================================================
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>' . __( 'Read More', '__x__' ) .'</div>'
                     . '</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' );
}

Then add following shortcode to your page :

[x_recent_posts type="post" enable_excerpt="true" count="3" orientation="horizontal"]

Hope that helps.

[Chris StovallParticipant]

Can you please also do this for me from the request above.

“Please post the FINAL working cornerstone code to add an excerpt, make it not a link and also how to limit the length of the excerpt.”

I would also like to know how to limit the length of the title of the post as well.

[RadModerator]

Hi there,

Here is the complete code,

function x_shortcode_recent_posts_v2code( $atts ) {
  
  extract( shortcode_atts( array(
    'id'          => '',
    'class'       => '',
    'style'       => '',
    'type'        => 'post',
    'count'       => '',
    'category'    => '',
    'offset'      => '',
    'orientation' => '',
    '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';
  $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}"
    ) );

    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 = wp_trim_words( strip_tags( get_the_excerpt() ), 10, '<a href="'.get_permalink().'">read more</a>' );

      $output .= '<div class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', csl18n() ), 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">'
                       . '<a href="'.get_permalink().'"><h3 class="h-recent-posts">' . get_the_title() . '</h3></a>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       . '<span class="x-recent-posts-excerpt">' . $excerpt . '</span>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</div>';

    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( 'cs_recent_posts' );
  remove_shortcode( 'x_recent_posts' );
  remove_shortcode( 'recent_posts' );
  add_shortcode( 'cs_recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );

  echo '<style>

.x-recent-posts > div.x-recent-post1 {
    width: 100%;
}

.x-recent-posts > div.x-recent-post2 {
    width: 48%;
}

.x-recent-posts > div.x-recent-post3 {
    width: 30.666%;
}

.x-recent-posts > div.x-recent-post4 {
    width: 22%;
}

.x-recent-posts > div:last-child {
    margin-right: 0;
}

.x-recent-posts > div {

    overflow: hidden;
    float: left;
    display: block;
    margin: 0 4% 0 0;
    border: 1px solid rgba(0,0,0,0.1);
    padding: 5px 5px 0;
    color: #999;
    background-color: #fff;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

}

.x-recent-posts a {
    overflow: visible;
    float: none;
    display: block;
    margin:0;
    border: none;
    padding: none;
    color: #999;
    background-color: transparent;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
</style>

';
}

Though, you may not able to see excerpt from the preview since this not directly customize the builder element. But excerpt should work on live page. And about excerpt length, just change 10 from this line,

$excerpt = wp_trim_words( strip_tags( get_the_excerpt() ), 10, '<a href="'.get_permalink().'">read more</a>' );

Cheers!

[FranzParticipant]

Hiya Folks!

I’ve been following this thread and tried the code in functions.php. It worked like a charm but seem to have lost the hovering effect. Could there be some code missing in the CSS between the <style> </style>?

I’ve commented your recommended script in functions.php for the time being for you to see the hover effect. Hover effect should look like this http://staging.markuppros.com/cspv3/ (Recent Posts below the page).

Would gladly appreciate if you can help me get just the hover effect back. I can fix the rest of the styling issues.

Sending my login credentials on a private message shortly. Thanks!

[FranzParticipant]

This reply has been marked as private.

[RadModerator]

Hi Francis,

The main purpose of the above change in custom code is to remove the link that wraps the recent. More links within another link will break the whole layout. Since there is now excerpts, another link is introduced within the wrapper.

The solution is removing the main link wrapper and replace it with <div></div>. But that also removes the hover effect that covers the whole item.

Plus, this code is very old which doesn’t match the new structure of recent posts shortcode. Hence, it will not work as the latest version of recent posts.

Thanks for understanding.

[Author]

Posts