[StefanParticipant]

Hi! Sorry to bother you again, but I’ve run into a new problem that I’ve been mulling over for hours and hours and can’t find a solution to.

I want to add an excerpt to the recent posts feature. I’ve tried various things in topics I have found here, but nothing works. I followed the instructions in this thread: https://community.theme.co//forums/topic/recent-post-excerpt-and-excerpt-length-cornerstone/ but to no avail.

Then I thought that maybe it’s because I didn’t use a child theme. So I installed a child theme. Now, when I paste the function code into functions.php, everything goes white and I have to re-upload the old functions.php via FTP to make it work again.

Ideally, it would be great to add the option of excerpts to the recent posts element in Cornerstone. But I need a quicker solution. Please help!

Ideally, I’d actually need the option to display the full content, since the posts are going to be rather short.

My info:

URL: http://www.brandsourcery.com
Wordpress Version 4.2.2
Theme Version: 4.0.1
X-Shortcodes Version 3.0.5

I’ll post my login info below, so you can take a look. The news section is on my home page.

[StefanParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

Thanks for writing in.

Try adding following PHP code into the functions.php file locates in the child theme’s folder:

// Displaying Excerpt in Recent Posts
// =============================================================================

function x_shortcode_recent_posts_v2( $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';
      }

      $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>'
                       . '<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_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );

  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
}

Let us know how it goes!

[StefanParticipant]

Hi! Thanks for the quick reply! I added the code. It didn’t give me the white screen, at least, but it’s still not working.

I use this line to insert it into my page:

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

I also tried turning “Full Post Content on Index” on and off again in the Customizer –> Blog settings. That didn’t help either.

[ChristopherModerator]

Hi there,

I added a new page called ‘X support’ and added recent posts shortcode in there, the excerpt display on Cornerstone but not in the page itself.

Please update X and try again, Also you could try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Hope it helps.

[StefanParticipant]

Thanks! The update did it!

One (I hope) last question: Now the whole excerpt text is displayed as a link. Is there a way to remove that?

And would it be possible to remove all links from the displayed posts? The posts are meant to be really short and there is no need to link to an extra post page.

[NicoModerator]

Hi There,

Not sure of what are you trying to achieve. Would you mind sharing us more details about it.

Recent post shortcode is wrapped with link. So from images to the texts its a link. If you want to remove the link for the text only for the image and title. That could be a technical coding, it would be best to contact a custom developer for that one. But if you want just to make the text looks like not clickable, Try adding this code below.

a.x-recent-posts-excerpt{
pointer-events:none;
cursor:none;
color:#aaa;
}

Hope it helps.

Thanks.

[StefanParticipant]

Hi! Thanks for the tip! Didn’t work though, unfortunately. (I also tried it with “_” instead of “-“).

What I try to achieve is this:

The majority of the content of the site is on the main page. On this page there shall be a section that displays “news” about the company. Those news are rather short, maybe one or two sentences. I want the clients to be able to easily add those news as posts in the back end. It does not make sense to have separate pages for such short news items, so I just want those items displayed as is, with no link and no hover effect.

It should look more or less like this:

I don’t know how better to describe it. Just display the (full) posts, with no link (on the headline, image, text …) whatsoever. No “read more” links either (I know they’re in the image).

—

My next idea would be to go into the x-shortcodes/functions/shortcodes.php file and remove the<a> tag there.

Or maybe I can just copy the whole section and create my own shortcode and call it something else?

I’d prefer a solution that doesn’t need me to customize the system files though.

[Rue NelModerator]

Hello There,

You can just edit your custom recent post shortcode and remove the link from there. You can not remove a tag because if you do so, it will break the styling. Please try to replace your code with this one instead:

// Displaying Excerpt in Recent Posts
// =============================================================================

function x_shortcode_recent_posts_v2( $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';
      }

      $output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="#" 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>'
                       . '<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_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );
  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2' );
}

We have remove the href="the-link" so that it will not go anywhere. And to remove the link pointer, you also need to add this css code in your customizer, Appearance > Customize > Custom > CSS

.x-recent-posts a{
    cursor: default;
}

And to make sure that the link doesn’t go anywhere, please add the following js code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  $('.x-recent-posts a').on('click touchstart', function(e){
    e.prevenDefault();
  });
})(jQuery);

Please let us know if this works out for you.

[StefanParticipant]

Hi! Thanks for the new suggestion! It kinda works.

But there are still some problems:

a) Now the excerpt is shown in the live version, but not in Cornerstone.

b) The image still has a rollover effect.

c) There’s still a link, which, granted, doesn’t go to the post, but to the main page instead. So if you happen to click on the article, it reloads the page and goes back to the top.

Do I lose all kind of styling if I remove the <a> tag? Couldn’t I just add my own CSS class to it somehow by replacing the <a> with a <div> tag?

[Rue NelModerator]

Hello There,

To remove the rollover effect of the featured image, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:before,
.x-recent-posts a:hover .has-post-thumbnail .x-recent-posts-img:after {
    display: none;
}

To prevent it from going to the top of the page, how about we try this code instead in the customizer,

(function($){
  $('.x-recent-posts a').on('click touchstart', function(){
    return false;
  });
})(jQuery);

If you want to remove <a> tag, you can do so and you will loose the styling. This particular customization request will be outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customizations. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself. If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

Thank you for your understanding.

[StefanParticipant]

Hi! Sorry for the slow reply, had a private emergency… Anyway, thank you! The last JavaScript did it!

I appreciate the help!

It still would be great to have this option as a feature in the recent post element!

[Rue NelModerator]

Hello There,

No Worries 😉 We are just glad that it works out for you.

We certainly appreciate the feedback! We already added this 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!

[luminateParticipant]

I’m interested! Need full post with styling please!

[ChristianModerator]

Hey there,

We’re sorry but further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts