WordPress Tutorial - Listing Blog Posts in Different Style with blog count

Previous Video: https://youtu.be/x3HVk2PuUSA
Previous Text: http://1wmedia.blogspot.in/2016/06/listing-blog-posts-in-different-style.html

In this tutorial, We will correct the previous bugs in the code and displaying limited post lists, I mean 5 or 7 latest posts. Please view the previous tutorial before reading this tutorial.

1. Open your front-page.php file and remove the unwanted <hr> tags. 
2. Add if statement for count which is the post count less than or equal to 5.
   
   <?php if ($count <= 5) : ?>
   
3. close the if statement before the endwhile.
4. Save the file. Now view the site. You will see only 5 posts in the post area.
5. For Post Thumbnail, Go to Post Edit and add thumbnail. For thumbnail size, Please view the previous tutorial.

Here is the modified code:

   <!-- START THE FEATURETTES -->


 <?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count <= 7) : ?>
<?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>
     
      
      <hr class="featurette-divider">
      <?php endif; ?>
      <?php endif; ?>
<?php endwhile; ?>
<?php endif; ?>
 

      <!-- /END THE FEATURETTES -->


Video Tutorial:

 

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.