How to add recent blog post on home page

Hi there!

I want to make a few changes on my website. My home page is static at the moment. But I want it to display the 2-3 recent blog posts. How can I do this using Integrity?

http://mylampblog.com

Thanks so much for your help!

1 Like

Hi There,

Thanks for writing in! You can simply use our shortcode version of recent post as outlined here (http://demo.theme.co/integrity-1/shortcodes/recent-posts/).

If you’re using Cornerstone, you can use the Classic Recent Post element to populate your blog posts.

Hope that helps.

Hey thank you so much! So simple xD

Do you know how I can show the full post? So that people see the latest full post on the home page and the other posts on the normal post page. Because I want to delete all the content on my home page and only show the full recent blog post.

Hello @mylampblog,

Thanks for asking. :slight_smile:

Please toggle Full Post content on index from X > Launch > Options > Blog > Content to showcase full post on blog index page. Please note that this will work only on the blog index page. As you are looking to delete all the content from home page, you can set home page as the blog index page from Settings > Reading > Posts page.

Let us know how it goes.

Thanks.

Thank you so much for your help!

What I’m trying to accomplish is having a home page that displays my recent 2-3 blog post. According to that I want to have the blog post page with all of my posts (like an archive). So that people can go on mylampblog.com and see the latest blog post first and can go to the page “posts” to see all the others.

Is that possible with X Theme Integrity?

Hi There,

Yes, that is definitely possible.

As my colleagues mentioned you can use our Recent Posts Element.

You can create a normal page using Cornerstone and design it as you wish. Among the elements, you can add the recent posts element.

Create another page and call blog for example.

On Wp Admin > Settings > Reading > you can assign the first page as your home page and your blog as your posts page.

Hope it helps!

Hi thanks so much for your answer! I tried it again with the Recent Posts Element. When I edit and save it on my admin site it’s fine but it doesn’t appear on my normal website. What am I doing wrong?

And I’m searching for the setting where I can choose to show the whole post in the Recent Pots Element and not just picture and title. Where can I find it?

I’m sorry, I’m completely new to this as you probably see xD

Hi There,

To do that, try adding the following code into your child theme’s functions.php file.

function x_shortcode_recent_posts_full( $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>'
                       . '<div class="full-post-content">' . get_the_content() . '</div>'
                     . '</div>'
                   . '</div>'
                 . '</article>'
               . '</a>';

    endwhile; endif; wp_reset_postdata();

  $output .= '</div>';

  return $output;
}


add_filter('wp_head', 'custom_recent_posts');

function custom_recent_posts() {
  remove_shortcode( 'x_recent_posts' );

  add_shortcode( 'x_recent_posts', 'x_shortcode_recent_posts_full' );
}

Then you can use the shortcode as follows.

[x_recent_posts orientation="vertical" count="4"]

Hope that helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.