Match Post Page Articles with Recent Post

Support
#1

How can I match the style (CSS) of posts on my blog page to look like my recent post on the homepage? It appears the markup and classes are completely different for the two. The pages in question are:

http://reportsnow.today/about-us/news-events/ & http://reportsnow.today/ (Recent Post section near page bottom)

I have the following in functions.php of my child theme:

// =============================================================================
// Custom Excerpt Length - Call: echo excerpt($length);
// =============================================================================

function excerpt( $limit ) {
    $excerpt = explode( ' ', get_the_excerpt(), $limit );
    if ( count( $excerpt ) >= $limit ) {
        array_pop( $excerpt );
        $excerpt = implode( " ", $excerpt ) . '.';
    } else {
        $excerpt = implode( " ", $excerpt );
    }

    // $excerpt = preg_replace('<code>\[[^\]]*\]</code>','',$excerpt);

    return $excerpt;
}

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>' . __( 'Read More', '__x__' ) . '</div>'
    . '</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( 'x_recent_posts' );
    add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
#2

Hi there,

You will need to achieve the same look by Custom CSS. Those 2 views you are talking about are completely different things for different puposes.

The first one is the default posts page template of the theme and the second one is a feature to show the latest 4 posts and not related to the first view.

Customizing with that level of details is outside of our support scope, but we can give you a starter code which you can see the selectors and continue your cusomtization from there. Please kindly add the code below to X > Launch > Options > CSS:

.has-post-thumbnail .entry-featured {
	box-shadow: none;
    border: 1px solid rgba(0,0,0,0.15);
    border-bottom: none;
    padding:  15px;
}

.x-iso-container-posts.cols-2 .entry-wrap {
	box-shadow: none;
    border: 1px solid rgba(0,0,0,0.15);
    border-top: none;
}

Thank you.

#3

Thank you Christopher! That was just what I needed to get me started in the right direction.

More help please:

I noticed on my Post page (http://reportsnow.today/about-us/news-events/) I have an additional “Read More” in the excerpt after the ellipsis. How do I remove this?

Thank you.

#4

Hi there,

I would recommend that you open up separate thread for additional questions so that the current thread will be kept clean for our other customers to check if they have the same question, and it will be easier for us as we will not have to skim the whole thread to find out that the original question was already answered and new question is asked.

Really appreciate your contribution to our community as it will help our other customer which might have the same questions like you.

Now regarding the second question. It seems that the Read More is added to the text itself. If you want to have an excerpt in X theme kindly do not use the read more option in the classic editor of the WordPress and instead go to the post and at the top right section of the screen click on the Screen Options and enable the excerpt option there.

Now you can add whatever you want to see in the listing there.

That should fix the issue. But if you still have problems kindly open up a new thread and give us URL/User/Pass of your WordPress installation using the Secure Note functionality of the post to follow up.

Thank you.