The main product post page

In this section, we'll work on this main content area, the area where the posts show up. Right now it's just a bunch of static HTML, so we'll go ahead and fix that.

So let's go into the index.php file in the MyShop folder in themes. Let's go to div class="products" where we have 4-column divs to represent each product. We'll add a class of row on this products div and then get rid of all but one of these 4-column divs. We'll preserve the div tag with the black shirt details. We'll get rid of all the div tags and then inside the 4-column div we'll go right above it and create our while loop.

Before we do the while loop, though, let's make sure that there are some posts. So we'll say if(have_posts) and then we'll end it. Also, if there are some posts then we want our while loop:

<div class="grid-x grid-padding-x products">
   <?php if(have_posts()) : ?>
      <?php while(have_posts()) : the_post(); ?>
         <div class="large-4 medium-4 cell product...