Docs

[el3ctrofuzz]

Hi Guys,

Thank you for such a brilliant theme, your work and dedication is awesome!

I’ve done as much searching and testing as I can. I’ve used suggestions/ fixes from other posts, but none seem to solve my issue.

I’m trying to get the recent posts element in cornerstone to style the posts in the same way that the theme’s blogroll does. I.E. Thumbnail to the left, title and excerpt to the right. (I’m super surprised that this isnt an tickbox option still!)

Would you please be able to take a look and suggest the changes I need to make to reflect my request. I have got it most of the way, just can’t get the title to extend, or excerpt to display.

Recent Posts element i question can currently be found:
http://www.rustypeg.co.uk/newsitey3s/

I really look forward to your reply,
Tom

[Rue Nel]

Hello Tom,

Thanks for writing in! By default the recent post element in Cornerstone will display up to 4 items only. There is no pagination what so ever because you only have a limited items to display. There is no excerpt to display either. If you want to add an excerpt, you need to customize the element to have the excerpt feature. Please consider checking out this topic: https://community.theme.co/forums/topic/add-excerpt-to-recent-posts-shortcode/#post-66964

So since you already have your child theme active and ready, please insert this following code in your child theme’s functions.php file.

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' );
	remove_shortcode( 'x_recent_posts' );
	add_shortcode( 'recent_posts', 'x_shortcode_recent_posts_v2code' );
	add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}

Once you have the excerpt in place, you also need to update your css code. You can make use of this one:

.x-recent-posts .x-recent-posts-img {
    float: left;
    width: 30%;
    min-height: 120px;
    padding-bottom: 120px;
}
.x-recent-posts .x-recent-posts-content {
    float: left;
    width: 65%;
    margin-left: 0%;
}
.x-recent-posts a {
    padding: 0px;
}
.x-recent-posts.horizontal .with-image .x-recent-posts-content {
    padding-top: 0;
}
.x-recent-posts.vertical a {
    box-shadow: none;
    border-radius: 0;
    padding-bottom: 4.5%;
    border: none;
    border-bottom: solid 2px #e5e5e5;
}
.x-recent-posts.vertical a:last-child {
    border: none;
}
.x-recent-posts article.hentry>.entry-wrap:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}
.x-recent-posts article.hentry>.entry-wrap {
    width: 100%;
}
.x-recent-posts .format-standard .x-recent-posts-img:before {
    display: none;
}
.x-recent-posts .x-recent-posts-content {
    padding: 0 0.75em 0.775em;
}
.entry-wrap {}.rev_slider .tp-mask-wrap .tp-caption,
.rev_slider .tp-mask-wrap:last-child,
.wpb_text_column .rev_slider .tp-mask-wrap .tp-caption,
.wpb_text_column .rev_slider .tp-mask-wrap:last-child {
    color: white;
}

Hope this helps.

[el3ctrofuzz]

Thank you Rue!

It took a little working, but I managedin the end. All thanks to your help! Wonderful once again.

Although, after running an update – this has just hapened. It was so close to beingfinished :'( :'(

https://community.theme.co/forums/topic/home-page-destryoed/

[Christopher]

I’ve already answered you in the other thread.

Thanks.

[Author]

Posts