WordPress post loop anybody?

Question

I was wondering if there was any way I could use the WordPress post counter to display at most 10 number of post each using the same css class,I have made one in the code below,However it shows only two, and when I made the post number 4,it didn't obey the css rules I created. Here is how far I have gone.

<div class="col-md-12 featt big-grid">
<div class="container-fluid no-padding">
  <?php
  $args = array(
    'post_type' => '',
    'category_name' => '',
    'posts_per_page' => '2'
  );
  $query = new WP_Query( $args );
  if ( $query->have_posts()) : 
    $i = 0; 

    while( $query->have_posts() ) : 
      $query->the_post();
    $i++;
        if($i <= 2) {
          if($i == 1) {
  ?>
            <div class="big-pane col-xs-6">
            <div class="the-big-pane image">
            <?php the_post_thumbnail();?>
            </div>
            <div class="big-pane overlay">

              <div class="the-big-pane-content">
               <div class="the-cont-cat">
  <span class="the-content-cat-bt">  <?php $category = get_the_category(); if ($category) 
                { echo wp_kses_post('<a href="' . get_category_link( $category[0]->term_id ) . '" class="tiptipBlog" title="' . sprintf( esc_html__( "View all posts in %s", "acardio" ), $category[0]->name ) . '" ' . '>' . $category[0]->name.'</a> ');}  ?></span>  <span class="the-content-cat-bt"> <?php taqyeem_get_score(); ?> </span>
 </div>
                <h1><a href="<?php the_permalink(); ?>"><?php the_title(); echo" ".$i?></a></h1>
                <span class="the-content-post-data"><span class="the-auth-post-image-content" style="padding-top: 0px !important;"> <?php echo get_avatar( get_the_author_meta( 'user_email' ), 100 ); ?> </span> By <a href="#"><?php the_author_posts_link(); ?></a> <span class="the-content-post-date"> <i class="fa fa-clock-o the-content "></i><?php the_time('jS M, Y') ?></span> </span>
              </div>
            </div>
            </div>

            <div class="big-pane col-xs-6">
            <?php 
            } 
          else { ?>
            <div class="the-big-pane image">
            <?php the_post_thumbnail();?>
            </div>
            <div class="big-pane overlay">

              <div class="the-big-pane-content">
               <div class="the-cont-cat">
   <span class="the-content-cat-bt">  <?php $category = get_the_category(); if ($category) 
                { echo wp_kses_post('<a href="' . get_category_link( $category[0]->term_id ) . '" class="tiptipBlog" title="' . sprintf( esc_html__( "View all posts in %s", "acardio" ), $category[0]->name ) . '" ' . '>' . $category[0]->name.'</a> ');}  ?></span>  <span class="the-content-cat-bt"> <?php taqyeem_get_score(); ?> </span>
   </div>
                <h1><a href="<?php the_permalink(); ?>"><?php the_title(); echo" ".$i?></a></h1>
                <span class="the-content-post-data"><span class="the-auth-post-image-content" style="padding-top: 0px !important;"> <?php echo get_avatar( get_the_author_meta( 'user_email' ), 100 ); ?> </span> By <a href="#"><?php the_author_posts_link(); ?></a> <span class="the-content-post-date"> <i class="fa fa-clock-o the-content "></i><?php the_time('jS M, Y') ?></span> </span>
              </div>
            </div>
            </div>

            <?php 
            if($i == 2){ ?> 
              </div>

              <?php 
            }
          }
        }


    endwhile; 
    else: 
      echo "<p>Sorry no post found :(!</p>"; 
  endif; 
  wp_reset_postdata(); ?>               
   </div>           

Answer 1

You need to change this

 $args = array(
    'post_type' => '',
    'category_name' => '',
    'posts_per_page' => '2'
  );

to reflect the number of posts in posts_per_page

 $args = array(
    'post_type' => '',
    'category_name' => '',
    'posts_per_page' => '10'
  );