Hi there,
I’m building a site at:
http://www.padthai.decorolux.com/
I would like to format recent posts to look like this:
I’m halfway done, but I need some help regarding the PHP.
Thanks,
Balazs
Hi There,
Thanks for writing in! Custom development is outside the scope of the support we provide. However I can point you to the function which will output recent posts, so that you can customize according to your requirement.
First make sure to setup a child theme (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57) and then you can add the following function into your child theme’s functions.php file.
function x_shortcode_recent_posts_v2code( $atts ) {
extract( shortcode_atts( array(
'id' => '',
'class' => '',
'style' => '',
'type' => 'post',
'count' => '',
'category' => '',
'offset' => '',
'orientation' => '',
// 'show_excerpt' => 'true',
'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>' . preg_replace('/<a.*?more-link.*?<\/a>/', '', cs_get_raw_excerpt() ) . '</p></div>' : '';
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), 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 .= '</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 you can customize the code accordingly. For example if you want to remove the date, you can remove the following line
<span class="x-recent-posts-date">' . get_the_date() . '</span>
Hope that helps.
Hi there,
Thanks, that was exactly what I needed.
I managed to add a button, and remove the date, however, something in the css is messing up the formatting, I can’t figure out what. Could you have a look?
http://www.padthai.decorolux.com/
Also, is there some kind of documentation where you guys keep these shortcodes bundled up? I just don’t want to bug you if there is an easier way.
Thanks!
Hi there,
There seems to be something edited in the code that is messing up the layout, most probably some HTML tags which not properly paired. Kindly double check the code that you currently have in the child theme and make sure that the opening HTML tags are properly closed.
In case you are not able to find it, kindly post your code here so that we can check.
As for the shortcodes, we do not have a documentation for it but you can find those in wp-content\plugins\cornerstone\includes\shortcodes. The files in there contain the shortcodes used by the elements.
You can override them by copying the code in your functions.php file and making the changes from there but please make sure to remove the shortcode and readd it again just like this:
function change_recent_posts_to_v2() {
remove_shortcode( 'x_recent_posts' );
add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_v2code' );
}
Hope this helps.
Hi Jade,
I can’t figure out what is causing the messed up layout, would you be so kind as to take a look. Thanks!
$output .= '<a class="x-recent-post' . $count . ' ' . $image_output_class . '" href="' . get_permalink( get_the_ID() ) . '" title="' . esc_attr( sprintf( csi18n('shortcodes.recent-posts-permalink'), 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>'
. '<a class="continue' . '" href="' . get_permalink( get_the_ID() ) . '<p>Tovább</p>' . '">'
// . $excerpt
. '</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' );
}Hi There,
There is an <a> tag inside the recent post <a> tag.
You should change this code from this:
. '<a class="continue' . '" href="' . get_permalink( get_the_ID() ) . '<p>Tovább</p>' . '">'
To this:
. '<span class="continue"><p>Tovább</p></span>'
Let us know how it goes!
Thanks a bunch!
You’re welcome. Glad we could help.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.