I’m Trying to Separate the First Post From the Rest of the Loop

Question

The layout I’m marking up and styling calls for the first post to be full width while the rest of the posts are not. Here’s my block of code:

<main>
<?php
// Define how the loop will fetch posts
$args = array(
  'post_type' => 'post', // Set the post type to 'post'
  'posts_per_page' => 7, // Display 7 posts
  'orderby' => 'date', // Order posts by date
  'order'   => 'DESC', // Display posts in descending order (newest to oldest)
);

$loop = new WP_Query( $args );
?>
  <section>
<?php if ( $loop->have_posts() ) : $loop->the_post(); ?>
    <article>
      <header>
        <div>
          <h2><?php the_title(); ?></h2>
          <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">Read now</a>›</p>
        </div>
      </header>
    </article>
    <div class="wrapper">
<?php while ( $loop -> have_posts() ) : $loop->the_post(); ?> 
      <article>
        <header>
          <div>
            <h2><?php the_title(); ?></h2>
            <p><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">Read now</a>›</p>
          </div>
        </header>
      </article>
<?php endwhile; ?>
    </div>
<? else : ?>
    <article>
      <p>Sorry, no posts were found!</p>
    </article>
<?php endif; ?>
  </section>
<?php wp_reset_postdata(); ?>
</main>

Unfortunately, the message “Sorry, no posts were found!” is being displayed along with the posts. What am I doing wrong? Please help! Moving back the else : to the same line as endwhile; makes it work but I need the it to be after the div.

Answer 1

After I tried switching from : and endif; or endwhile; to brackets it worked.