Docs

[Rob V]

Done, but now no excerpt at all 😉

What’s wrong?

[Zeshan]

Hi Rob,

Thank you for writing in!

Your code was containing a conditional that was the issue, I’ve updated your code again, please try using the following code:

// =============================================================================
// 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
// =============================================================================

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, 'recent_posts' ) );

  $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;

  $js_params = array(
    'fade' => ( $fade == 'true' )
  );

  $data = x_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_output       = '<div class="x-recent-posts-img">' . get_the_post_thumbnail( get_the_ID(), 'entry-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>'
                       . '<span class="x-recent-posts-excerpt">' .  strip_tags(excerpt(25))  . '</span><div class="xreadmore">Read more</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( 'recent_posts' );
    add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
}

Hope this helps. 🙂

Thank you.

[Rob V]

Yezzz, that’s it! Thank you very much!

[Mrinal]

You’re Welcome Rob.

Have a nice day, Cheers!

[bwelds]

Is there a way to set enable_excerpt to false by default so that the excerpt only shows if I pass enable_excerpt=”true” in the shortcode?

[bwelds]

Don’t worry, I figured it out 🙂

Added

	    if ( $enable_excerpt == 'true') {
	    	$excerpt_output = '<span class="x-recent-posts-excerpt">' .  excerpt(50)  . '...</span><div class="x-read-more">Read more</div>';
	    } else {
	    	$excerpt_output = '';
	    	
	    }

and then put $excerpt_output into the output instead.

[Rad]

Great find Bwelds! Thanks.

[luciano c]

This reply has been marked as private.

[Zeshan]

Hey Luciano,

Thanks for writing in!

#1: Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You may wish to consult a developer, or a service like WerkPress or Elto to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

#2: You can do it by using the following CSS code under Custom > CSS in the Customizer:

.x-recent-posts-excerpt {
   /* Add your Styling After this line */

}

#3: You can do it by replacing using the following code instead 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
// =============================================================================

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>'
                       . '<span class="x-recent-posts-excerpt">' .  strip_tags(excerpt(25))  . '</span><div class="xreadmore">' . __( '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( 'recent_posts' );
    add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
}

Thanks for understanding. Take care!

[luciano c]

This reply has been marked as private.

[Nabeel A]

Hi there,

1. For line-height, Please add the following CSS code via Appearance > Customize > Custom > CSS:

p {
line-height: 18px !important;
}

2. To add more spacing between the date and the excerpt, try this code:

.p-meta {
margin-bottom: 25px !important;
}

3. The read more link is already red, however you can change it to any color via Custom CSS. Try this:

.more-link {
color: #e32119 !important;
}

Let us know how this goes!

[luciano c]

HI!
Thanks for your help! Unfortunately, is still not working…

I’ve included the line-height into the .x-recent-posts-excerpt block in my custom css but it only works for values above 22px. If I insert any value below that (like 18px) it seems to ignore the command. Is not a big problem if I can control the space between the date and the text, but…

The .p-meta do affect the display of the meta in regular posts on the entire site, but does nothing on the excerpts of the home page, the ones I’m trying to stylize. I removed the entire get_the_date from the functions.php in order to avoid this problem by the moment… I doesn’t know almost nothing about php, but maybe it is possible to add some kind of space directly into the functions.php, like:
. ‘<h3 class=”h-recent-posts”>’ . get_the_title() . ‘</h3>’
. ‘<span class=”x-recent-posts-date”>’ . get_the_date() . ‘</span>’
<ADDING SPACE HERE>
. ‘<span class=”x-recent-posts-excerpt”>’ . excerpt(25) . ‘</span>
what do you think?

The .more-link doesn’t changes the link color in the excerpts (it still looks grey). Any ideas on that?

[Zeshan]

Hi there,

Thank you for writing in!

#1: Instead of using above code for lineheight, please use following:

.x-recent-posts-excerpt {
   line-height: 20px !important;
   display: block;
}

#2: Please ignore above provided code and use following:

.x-recent-posts .x-recent-posts-date {
   margin-bottom: 15px;
}

#3: Use following CSS:

.x-recent-posts-content .xreadmore:hover {
   color: #e32119;
}

Cheers!

[luciano c]

Everything perfect, thanks a lot!

[Nabeel A]

You’re most welcome!

[Author]

Posts