[hyperdrive_boomParticipant]

Good afternoon,

via conerstone I have used the Recent Posts Element and have turned off the feature image. However I would like it to also display the first line or two of the blog post and then have a … read more.

Would this be be something I need to add in the functions.php via the child theme?

Kind Regards,
Jason

[ZeshanMember]

Hi Jason,

Thanks for writing in!

Recent posts doesn’t show excerpts by default, but you can enable them with custom development. Because this requires a template change, I’d advise that you setup a child theme. This allows you to make code changes that won’t be overwritten when an X update is released. After your child theme is setup, please review how we recommend making template changes in Customization Best Practices.

After that, add following code in your child theme’s functions.php file:

// =============================================================================
// Custom Excerpt Length - Call: echo excerpt($length);
// =============================================================================

function excerpt($limit) {
   $excerpt = explode(' ', get_the_excerpt(), $limit);
   if (count($excerpt)>=$limit) {
      array_pop($excerpt);
      $excerpt = implode(" ",$excerpt).'.';
   } else {
      $excerpt = implode(" ",$excerpt);
   } 
   // $excerpt = preg_replace('<code>\[[^\]]*\]</code>','',$excerpt);
   return $excerpt;
}

// =============================================================================
// Add Excerpt to Recent Posts -> [x_recent_posts]
// =============================================================================

function x_shortcode_recent_posts_excerpt( $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}",
      'ignore_sticky_posts' => true
    ) );

    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';
      }

      $output .= '<a 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">'
                       . '<h3 class="h-recent-posts">' . get_the_title() . '</h3>'
                       . '<span class="x-recent-posts-date">' . get_the_date() . '</span>'
                       . do_shortcode('[x_gap size="10px"]')
                       . '<span class="x-recent-posts-excerpt">' .  strip_tags(excerpt(25))  . '</span>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;
}

add_action('wp_head', 'update_x_recent_posts_to_v2');

function update_x_recent_posts_to_v2() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_excerpt' );
}

Thank you!

[hyperdrive_boomParticipant]

Excellent thank you! Looking great

How can I have the text in bold ‘Read More’ after the preview text?

Kind Regards,
Jason

[ThaiModerator]

Hi Jason,

Please provide us with your website URL so we can take a closer look.

Thank you.

[hyperdrive_boomParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi Jason,

Please try adding the following CSS under Customize > Custom > CSS:

.entry-content.excerpt .more-link {
    clear: both;
    display: block;
    margin-top: 10px;
}

Hope it helps 🙂

[turnkeydigitalParticipant]

I have used this snippet before on another site but for some reason it has no effect on this site.

[RupokMember]

Hi @turnkeydigital

Thanks for updating the thread. Kindly share your URL and the code you are using.

Cheers!

[Rick LParticipant]

How do I get to the functions.php file?

[JoaoModerator]

Hi Rick,

You need to access the root files of your website via FTP.

It will be inside the folder/ wp-content/themes/x/functions.php

Let us know if you need more information or help with anything.

Hope it helps,

Joao

[Author]

Posts