Create static front-page with 3-5 recent posts

Question

I am struggling with front/landing page customization for my custom designed theme. I have designed custom theme and pretty much coded it using the Underscore boilerplate.

As I understands, the codex suggests that I create a front-page.php and customize it there. In setting>reading I selected A static/Front page (my desired page where I change the static welcoming message). Underneath I want to have 3-5 recent posts with thumbnails (enabled in my functions) and excerpts.

My front-page.php:

<main id="main" class="site-main" role="main">

        <?php while ( have_posts() ) : the_post(); ?>

            <?php get_template_part( 'content', 'page' ); ?>

        <?php endwhile; // end of the loop. ?>

        <h2>Recent Posts</h2>
        <ul>
        <?php
            $args = array( 'numberposts' => '5' );
            $recent_posts = wp_get_recent_posts( $args );
            foreach( $recent_posts as $recent ){
                echo '<li><a href="' . get_permalink($recent["ID"]) . '" title="Look '.esc_attr($recent["post_title"]).'" >' .   $recent["post_title"].'</a> </li> ';
            }
        ?>
        </ul>

</main><!-- #main -->

This works, however I have no clue how to load thumbnails + excerpts. Most importantly is this correct?

Answer 1

I would tend not to go with wp_get_recent_posts or even get_posts for custom queries like this. By default, template tags like the_excerpt() is not available to these functions, and you have to make use of setup_postdata($post) to have access to these template tags.

I would personally use WP_Query in a case like this which is more flexible, specially when have a custom query that needs to be paginated.

Here is an example of a custom query to get the newest 5 posts. Note: I have not included any html mark-up. For a list of all available arguments, check out the link I've provided in WP_Query

$args = array(
    'posts_per_page' => 5,
    'order' => 'DESC'
);

$rp = new WP_Query( $args );

if($rp->have_posts()) :
    while($rp->have_posts()) : $rp->the_post();

       the_title(); // posttitle
       if ( has_post_thumbnail() ) {  // check if the post has a Post Thumbnail assigned to it.
          the_post_thumbnail(); //display the thumbnail
       } 

       the_excerpt(); // displays the excerpt

    endwhile;
    wp_reset_postdata(); // always always remember to reset postdata when using a custom query, very important
endif;

For further reading:

• the_post_thumbnail()

• The Loop (Just a note here, certain examples uses query_posts, which should never be used. Rather use WP_Query to construct custom queries)

• Creating a static front page

Answer 2

You can get the image using this code:
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'medium', false, '' ); $thumbnailSrc = $src[0];

where 'medium' is the thumbnail size, this can be changed to thumbnail, large or any special size created with thumbnail support on functions.php ej.
add_image_size( 'postslider', 680,310, true );

I'm printing the image with img src="php echo $src; ? don't forget to include the php tags inside the code

For the excerpt the simple way is the_excerpt(); instead of the_content();

Answer 3

You can use:

get_the_post_thumbnail($recent['ID'], 'post-thumbnail');

in order to get the thumbnail. Unfortunately, there is no way to get the excerpt, you can however trim the content using PHP.

Alternatively, there's a hook I haven't used before, you can try it and see i its works for the excerpt:

get_post_field();

Answer 4

It looks like the two previous answers will get you close, but as I understand it, you might need to change the foreach loop into a second wordpress loop call, after the custom query (see an example here in the "examples" section):

The reason I suggest using the wordpress loop is that the function the_excerpt() only works inside the standard loop framework. If you're inside "the Loop," you'd use

the_post_thumbnail( 'your-custom-post-size-here' );

rather than

get_the_post_thumbnail

as Yusri Mathews suggests. His answer will work outside of "the Loop," in cases like your foreach loop.

But as mentioned above, if you're in "the Loop," you have access to the_excerpt() which should get you where you're going.