Wordpress highlight recent posts in front page

Question

I'm trying to highlight the three most recent posts in the home page with bigger cover images and an excerpt so that if they're highlighted they don't appear on the smaller post list. Something like this, but with the most recent posts on top:

I've tried using multiple WP_Query with an offset but it doesn't seem to quite work (it's possible I'm not doing it right).

Any ideas? Thanks!

EDIT: Here's what I tried. The problem with this is that I get "undefined offset" errors.

<?php
            /* Featured posts */
            ?>

            <div class="featured-posts columns">
                <?php
                $featured_query = new WP_Query( array( 'posts_per_page' => 3) );
                while ( $featured_query->have_posts() ) : the_post(); ?>
                    <div class="featured-post col-4">
                        <?php dge_post_thumbnail(); ?>
                        <div class="entry-meta">
                            <?php
                            dge_posted_on();
                            ?>
                        </div><!-- .entry-meta -->
                        <h2>
                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
                        </h2>
                        <p><?php the_excerpt(); ?></p>
                        <p><a href="<?php the_permalink(); ?>">continue reading</a></p>
                    </div>
                <?php endwhile; ?>
            </div>
<?php
            /* Start the Loop */
            $query = new WP_Query( array( 'posts_per_page' => 5, 'offset' => 3 ) );
            while ( $query->have_posts() ) :
                the_post();

                /*
                 * Include the Post-Type-specific template for the content.
                 * If you want to override this in a child theme, then include a file
                 * called content-___.php (where ___ is the Post Type name) and that will be used instead.
                 */
                /*get_template_part( 'template-parts/content', get_post_type() );*/
                get_template_part( 'template-parts/preview-content');

            endwhile;
?>

I think you should put wp_reset_postdata() just after while loop end for both — Gufran Hasan
@GufranHasan done, but I still get the undefined offset error. — José María

Gufran Hasan Gufran Hasan · Accepted Answer · 2018-07-28T09:52:46

Try this script:

    <?php
       $featured_query = new WP_Query( array( 'posts_per_page' => 3,"orderby"=>"date","order"=>"DESC") );
        while ( $featured_query->have_posts() ) : $featured_query->the_post();
            echo '<p>'.the_title().'</p>';
        endwhile;               
  ?>
   <?php
        echo '<hr/><h1>After offset set</h1> <br/>';
        $featured_query = new WP_Query( array( 'posts_per_page' => 5,"orderby"=>"date","order"=>"DESC","offset"=>3) );
        while ( $featured_query->have_posts() ) : $featured_query->the_post();
            echo '<p>'.the_title().'</p>';
        endwhile;               
 ?>

Response:

Wordpress highlight recent posts in front page

1 Answers