Ethos 1 How to get recent posts to look like the blog page

Hi there,

How do I get the ‘recent post’ element to look like the blog page. I’m using Ethos 1 and would like to to style the homepage as a static page but also able to pull in the recent posts with the look as in the blog pages (ie. with image to the left and excerpt side by side). From your support pages, I’ve gone through a bunch of the codes to input in the child theme’s functions.php as well as in the css customizer but all I’ve been able to do was to place the excerpt underneath the image. Please advise.

Thank you.

Hi There,

Try adding the following custom CSS:

    float: left;
    width: 34%;
    margin: 0;
}
.x-recent-posts .x-recent-posts-content {
    float: right;
    width: 66%;
    padding-left: 35px;
}```

If this doesn't do the trick, please share us your site URL.

Hi there,

Thank you for your reply. I’ve inserted your code and I think we are almost there. I’ve and also added the line
.x-recent-posts .x-recent-posts-img {
background-size: contain;
}
so that the image is not cropped. However, while the image is on the side, it is below the text and beside it.
I’m using the Essential Addons for Cornerstone plugin and using there recent posts element (as that allows me to display an excerpt from the post). Can you tell me how to move the image higher to align with the text.

As well, this also creates the problem on mobile that the image and text are side by side which doesn’t leave much room. Can you tell me how to have the image ontop of the text in mobile view. Thanks.

Btw, my url is http://naokokamura.ca/demos/savvy/

Thanks again.

Hello There,

Thanks for updating in! Please have the code updated and make use of this code instead:

@media(min-width: 980px){
  .x-recent-posts .x-recent-posts-img {
    float: left;
    width: 34%;
    margin: 0;
  }

  .x-recent-posts .x-recent-posts-content {
    margin-top: 0;
    float: right;
    width: 66%;
    padding-left: 35px;
  }
}

Please let us know if this works out for you.

Hi there…I think we are almost there. I just need to know how to change the color of ‘(Read More)’ in the code that I found on the forum that I pasted in my child theme functions php:

// Add Excerpts to the recent post element
// =============================================================================
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
) );

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 style="color:initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . ' (Read More)</p></div>' : '';

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

endwhile; endif; wp_reset_postdata();

$output .= ‘’;

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’ );
}
// =============================================================================

Hi again,

Try adding the following CSS code in the Theme Options > Global CSS or in the Customizer via Appearance > Customize > Custom > Edit GLOBAL CSS

.x-recent-posts-excerpt a {
    color: #00b2ff !important;
}

Hope this helps!

Hi there,

No, that didn’t work. Just to clarify, I just want to change the color of ‘Read More’ and not the entire excerpt. As well, I’m talking about the excerpt I’ve created using the above code to add excerpt to the Recent Post element and not the excerpt on the Blog pages. Thank you.

Hi There,

Wrap your (read more) with a <span> tag, so it can targeted with CSS easily.

e.g.
<span class="read-more">(Read More)</span>

span.read-more {
color: blue;
}

Right now its being concatenate with the except, so we cant style it separately.

Thanks,

Hi there,

I’ve fiddled around with the code and have finally managed to add a ‘Read More’ button at the bottom of my manually created excerpt for the Recent Post element. The last thing I need to do is to insert the social sharing buttons underneath this. Please help…this is very important to me. Thank you. My url is http://naokokamura.ca/demos/.

This is the code I inserted on the child theme’s functions php:

// Add Excerpts to the recent post element
// =============================================================================
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
) );

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 style="color: initial;">' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . ' <br><br><span class="x-btn">Read More</span></p></div>' : '';

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

endwhile; endif; wp_reset_postdata();

$output .= ‘’;

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’ );
}
// =============================================================================

Hello There,

To add the entry share shortcode into your existing code, you can make use of this code block:

$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( __( 'Permalink to: "%s"', 'cornerstone' ), 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>'
                       . $excerpt
                 . '</div>'
               . '</div>'
               . do_shortcode('[share title="Share this Post" facebook="true" twitter="true" google_plus="true" linkedin="true" pinterest="true" reddit="true" email="true"]')
             . '</article>'
           . '</a>';

We would loved to know if this has work for you. Thank you.

Hi there,

Thank you for the code. I think we are almost there. Can we center the social media sharing underneath the excerpt? Right now its too low and too far to the left. Thank you!

Once again my url is http://naokokamura.ca/demos/

Hi there,

Please try this code:

.x-share-options {
    float: left;
    width: 100%;
    text-align: center;
}

.x-entry-share .x-share {
    float: none;
}

Hi there,

When I input the code, I am able to move the social sharing element on my homepage, but it also affects the social sharing element on my blog pages (which puts them out of alignment). Am I able to specify a class just for the homepage social sharing element in my functions .php? Also, I am only able to move the icons and not the ‘Share this Post’ title. How can I move that as well? We will probably have to put a class on that too so it doesn’t affect the other pages. Thanks.

Hello There,

Thanks for updating in! To target the changes for the entry share which was just added in the recent post element, you can make use of this code instead:

.x-recent-posts .x-share-options {
    float: left;
    width: 100%;
    text-align: center;
}

.x-recent-posts .x-entry-share .x-share {
    float: none;
}

Hope this helps. Please let us know how it goes.

Hi there,

Thank you for that code. I was able to adjust the position of the icons but the ‘Share your Post’ title wasn’t affected and is now out of alignment. Please help.

Thanks again!

Hi again,

Can you please try removing previous CSS customization and use this one instead:

@media screen and (min-width: 980px) {
    .x-entry-share {
        float: right;
        margin: -100px 110px 0px 0;
    }
}

Let us know how this goes!

Hi there,

You guys are the best! That worked brilliantly. One last thing…the icons don’t seem to be centred to the grey circular background. They seem a little low. How can I fix this?

Thanks!

Hi There,

Please add this on your Theme Options > CSS


/*fix the unbalance padding on the recent post's share icons*/
.x-recent-posts a.x-share {
	padding-top: 0;
}

Hope it helps,
Cheers!

Hi there,

One last thing, is there a way I can add an ‘Older posts’ or pagination link at the bottom of my manually created excerpt. Thank you.