[rockhill.jessieParticipant]

Hello –

I have read through several responses for adding an excerpt to the recent posts function with Cornerstone but none of them have worked for me, so I thought I would just ask.

Ideally, I would like to have my featured image to the left with an excerpt to the right including a “read more” button.

Hoping for a simple solution?
Thanks!
My URL: http://www.howtoadult.com

Jessie

[JoaoModerator]

Hi Jessie,

You need to set-up a child theme using this guide http://theme.co/x/member/kb/how-to-setup-child-themes/

Then you need to add the code below in child theme functions.php

For post_exerpts=”true” to work

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>'
                   . '</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' );
}

Once you have applied that contact us so we can help with styling your recent post according to your wishes.

Hope that helps

Joao

[rockhill.jessieParticipant]

Thank you! I appreciate your help.

I already have a child theme in place so I went to Appearance > Editor and copy and pasted the code above into the Functions.php file at the very bottom and… nothing happened. Could I have messed it up? I am a SUPER beginer at this! Thank you.

Jessie

[Nabeel AModerator]

Hi there,

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

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

[rockhill.jessieParticipant]

This reply has been marked as private.

[DarshanaModerator]

Hi there,

It seems that your site is down. Could you please confirm on your end? so that we can check your issue.

I’m getting the error “Server not found”

Thanks!

[rockhill.jessieParticipant]

This reply has been marked as private.

[JadeModerator]

Hi there,

Instead of using the recent post element in Cornerstone, please add a raw content element and use a shortcode:

[recent_posts enable_excerpt="true" type="post" orientation="vertical"]

Hope this helps.

[rockhill.jessieParticipant]

Hello –

Thank you – this did work, however – the result was very sloppy. It was a huge box with my featured image in the top left corner and then several inches of white space before a small excerpt at the bottom.

It is more important to me that it look clean and professional than having the excerpt. So – is there a way to edit the way this looks?

If I cannot edit the appearance of this raw content, then I will go back to the recent post feature of cornerstone. If I do that – is there a way to make the featured images a particular size? I want them to be square.

Thank you so much for your help!
Jessie

[DarshanaModerator]

Hi there,

You can add this under Custom > CSS in the Customizer.

.x-recent-posts.vertical a.x-recent-post1, .x-recent-posts.vertical a.x-recent-post2, .x-recent-posts.vertical a.x-recent-post3, .x-recent-posts.vertical a.x-recent-post4 {
    margin-bottom: 1%;
}

.x-recent-posts .x-recent-posts-img {
    padding-bottom: 0;
}

Hope that helps.

[rockhill.jessieParticipant]

Ok – we’re on the right track! That looks better.

Now – I would like to customize the size of the featured image and have the image on the left and the excerpt show up to the right of the picture.

Thanks again!

[ChristianModerator]

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 might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts