Docs

[SeLoRe]

Hi,

I want show recent posts at my homepage but same style with theme default. Because I didn’t like cornerstone Recent Posts shortcode and also visual composer’s style. Is this possible insert to page with same style. http://www.soruncozumu.com

Thank you.

[Rupok]

Hi there,

Thanks for writing in! Changing the style of recent post element would need bunch of CSS. You can use the default blog if you don’t like this. If you need some cosmetic change then we can help with some CSS but changing the look entirely would be out of our support scope.

Cheers!

[SeLoRe]

So let’s try to solve my questions. First thing is I don’t like Recent Posts on cornerstone, I want add excerpt and I want it display as text not link. And I want show my blog title and subtitle. You can use this page as example http://www.soruncozumu.com/anasayfa/

[Paul R]

Hi,

To achieve that, you can this in your child theme’s functions.php.

function x_shortcode_recent_posts_v2code( $atts ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'type'         => 'post',
    'count'        => '',
    'category'     => '',
    'offset'       => '',
    'orientation'  => '',
    'show_excerpt' => 'false',
    'no_sticky'    => '',
    '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';
  $show_excerpt  = ( $show_excerpt == 'true' );
  $no_sticky     = ( $no_sticky    == 'true' );
  $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' => $no_sticky
    ) );

    $cat = "";
    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';
      }

       $excerpt = ( $show_excerpt ) ? '<div class="x-recent-posts-excerpt"><p>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';

      $output .= '<div class="my-recent-post x-recent-post' . $count . ' ' . $image_output_class . '">'
                 . '<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"><a href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', 'cornerstone' ), the_title_attribute( 'echo=0' ) ) ) . '">' . get_the_title() . '</a></h3>'
                       . '<span class="x-recent-posts-date">'.$cat.'</span>'
                        . $excerpt                     
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</div>';

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

Then add this in Custom > Edit Global CSS in the customizer

.x-recent-posts div.x-recent-post1 {
    width: 100%;
}

.x-recent-posts div.x-recent-post2 {
    width: 48%;
}

.x-recent-posts div.x-recent-post3 {
    width: 30.6666%;
}

.x-recent-posts div.x-recent-post4 {
    width: 22%;
}

.x-recent-posts .my-recent-post {
    overflow: hidden;
    float: left;
    display: block;
    margin: 0 4% 0 0;
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 5px 5px 0;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 0.125em 0.275em 0 rgba(0,0,0,0.075);
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.x-recent-posts .my-recent-post:last-child {
    margin-right: 0;
} 

.x-recent-posts a {
    border:0;
outline:0;
}

Please note that you need to use text element and recent post shortcode to display the excerpt.

eg.

[x_recent_posts show_excerpt="true" count="4"]

Hope that helps

[Author]

Posts