Docs

[smsfthinker]

Hi there,

Can you please tell me how to display the full heading and an excerpt in the Recent Posts shortcode?

And how I can adjust the width between the tiles when the posts are display in masonery view?

Kind regards,
Helen

[Rue Nel]

Hello There,

Thanks for writing in!

To display the full heading in the recent post shortcode, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-recent-posts .h-recent-posts, 
.x-recent-posts .x-recent-posts-date {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

To add an excerpt to the recent post shortcode, please check out this topic:
https://community.theme.co/forums/topic/add-excerpt-to-recent-posts-shortcode/

The width of the masonry layout depends on the number of columns displayed. You can change this settings in the customizer, Appearance > Customize > Blog > Columns.

Hope this helps. Please let us know how it goes.

[smsfthinker]

Thank you Rue,

I’ve managed to display the excerpt but need a little more help please.

All my excerpt text is showing up as hyperlinked text (in my case, hyperlinked text is pink). I would prefer to show a ‘Read More’ button or larger hyperlinked text ‘Read More’ at the bottom of the excerpt, and the rest of the excerpt text not be hyperlinked.

Is this possible?

Kind regards,
Helen

[Darshana]

Hi there,

Please update your previous code with the following code.

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></a>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       . ( $enable_excerpt ? '<span class="x-recent-posts-excerpt">' . strip_tags( get_the_excerpt() ) . '</span>' : '' )
                       . ' ... <a href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', '__x__' ), the_title_attribute( 'echo=0' ) ) ) . '">'
                       . 'Read More </a>'
                     . '</div>'
                   . '</div>'
                 . '</article>';
               
    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' );
}

Hope that helps.

[smsfthinker]

Hello there,

Sorry but when I added this code my excerpt no longer displayed.

???

Kind regards,
Helen

[Rad]

Hi Helen,

Could be because of enable_excerpt condition is false, let’s change that code to this

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></a>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       . '<span class="x-recent-posts-excerpt">' . strip_tags( get_the_excerpt() ) . '</span>' 
                       . ' ... Read More'
                     . '</div>'
                   . '</div>'
                 . '</article>';
               
    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' );
 remove_shortcode( 'x_recent_posts' );
 remove_shortcode( 'cs_recent_posts' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'cs_recent_posts', 'x_shortcode_recent_posts_v2code' );
}

Thanks!

[smsfthinker]

Hi there,

Unfortunately that code completely scrambled my page so I returned it to the hyperlinked excerpt.

I’ve attached 2 screenshots for you.

Regards,
Helen

[smsfthinker]

Hi there,

Here’s the 2nd screenshots for you.

Regards,
Helen

[Rue Nel]

Hello There,

Sorry if it didn’t work out. There was a typographic error in the code. Please have the code updated and use this instead:

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></a>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       . '<span class="x-recent-posts-excerpt">' . strip_tags( get_the_excerpt() ) . '</span>' 
                       . ' ... Read More'
                     . '</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' );
 remove_shortcode( 'x_recent_posts' );
 remove_shortcode( 'cs_recent_posts' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'cs_recent_posts', 'x_shortcode_recent_posts_v2code' );
}

Please let us know if this works out for you.

[smsfthinker]

Hi Rue,

Unfortunately this code still produces scrambled content.

??

Regards,
Helen

[Lely]

Hello Helen,

Please try adding the following custom CSS on Appearance > Customize > Custom > Edit Global CSS:

.x-recent-posts-excerpt a {
    display: initial !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: auto !important;
    float:none;
}

Then try adding the following code instead:

function x_shortcode_recent_posts_v2code( $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() ) . '<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' ) ) ) . '">... Read More</a></p></div>' : '';

      $output .= '<div class="x-recent-post' . $count . ' ' . $image_output_class . '">'
                 .  '<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>'
               . '</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( 'recent_posts' );
 remove_shortcode( 'x_recent_posts' );
 remove_shortcode( 'cs_recent_posts' );
  add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
  add_shortcode( 'cs_recent_posts', 'x_shortcode_recent_posts_v2code' );
}

By default the whole excerpt is link and removing the link from that and adding it to just read more create a little CSS display issue for the columns. Above codes will remove the link on the entire excerpt and add it instead on a readmore link at the end. After adding that codes, would you mind providing us with login credentials so we can take a closer look on the number of columns you were using and the stack? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– Page with recent post

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[smsfthinker]

This reply has been marked as private.

[Lely]

Hello Helen,

Thank you for those information.
Masonry style is not available in RECENT POST shortcode because of how it is structured. Masonry needs some calculation for it’s position and there’s should be one instance, but then maximum number of recent post shortcode is four needing more instance of this element. Please add the following custom CSS to adjust column display:

.x-recent-posts .x-recent-post3:last-child {
    margin-right: 0;
}
.x-recent-posts .x-recent-post3 {
    width: 32.6666%;
    overflow: hidden;
    float: left;
    display: block;
    margin: 0 1% 0 0;
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 5px 5px 0;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0.125em 0.275em 0 rgba(0,0,0,0.075);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

In case you really want masonry, please use normal blog index page.

Hope this helps.

[Author]

Posts