WordPress Tutorial - Listing Blog Posts in Different Style

In this tutorial, We will see how to add blog posts in different design, Here, We will do this from front-page.php. Now this is our Home page.

1.                Change the Settings to “Your latest posts” from Dashboard -> Settings -> Readings -> Front Page Displays

2.                Now add the following codes to your functions.php file to add the Featured thumbnail option and thumbnail size setting.

add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 500, 500, true ); 

3.                Now open your front-page.php file. Now we will convert the “FEATURETTES” section into blog posts. Here notice that posts are listed in alternate style.

4.                So we need to give two styles. First post one style, second post another style, then it continues..

5.               ADD or replace the Following code into front-page.php “FEATURETTES” Section   

<!-- START THE FEATURETTES -->
 <hr class="featurette-divider">

 <?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count % 2 == 0) : ?>

      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading"><?php the_title(); ?></span></h2>
          <p class="lead"><?php the_content(); ?></p>
        </div>
        <div class="col-md-5">
         
         
          <?php the_post_thumbnail('', array('class' => 'featurette-image img-responsive center-block')); ?>
        </div>
      </div>
     
      <?php else : ?>     
 

      <hr class="featurette-divider">

      <div class="row featurette">
        <div class="col-md-7 col-md-push-5">
          <h2 class="featurette-heading"><?php the_title(); ?></span></h2>
          <p class="lead"><?php the_content(); ?></p>
        </div>
        <div class="col-md-5 col-md-pull-7">
           <?php the_post_thumbnail('', array('class' => 'featurette-image img-responsive center-block')); ?>
        </div>
      </div>
      <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>

      <hr class="featurette-divider">

        

      <!-- /END THE FEATURETTES -->

6.      Click save and view the site.
 

7.  It will show different styles of the blog post listing

           

The code has some error, In the next lesson, I will give corrected code.