Make First post different from rest?

1 Views

Hi i’m using the code below to call post from a certain Category under certain post types, But how do i style it so that i can make the first post different from the rest of the post. 

<?php
$queryObject = new  Wp_Query( array(
        'showposts' => 4,
        'post_type' => array('pretty-little-liars', 'revenge', 'once-upon-a-time'),
        'category_name' => celebrity,
            'orderby' => 1,
        ));
// The Loop!
if ($queryObject->have_posts()) {
?>

<?php
while ($queryObject->have_posts()){
    $queryObject->the_post();
    ?>

<a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
                    <?php the_post_thumbnail('video-post'); ?>
                    </a>

<?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?>

               <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>


<?php
}
?>
<?php wp_reset_postdata();
}
?>
Post Views: 1

Related posts

Leave a Reply

3 comments

  1. You could check current_post in the loop:

    if($queryObject->have_posts()) {
    while($queryObject->have_posts()) {
        $queryObject->the_post();
        if( 0 == $queryObject->current_post ) {
            // this is the first post
        } else {
            // not the first post
        }
    }
}

  2. If you don’t mind a little extra markup, you could wrap the first post in a div + use its class to style this post differently.

    <?php
   $queryObject = new  Wp_Query( array(
        'showposts' => 4,
        'post_type' => array('pretty-little-liars', 'revenge', 'once-upon-a-time'),
        'category_name' => celebrity,
            'orderby' => 1,
        ));

  // The Loop
  if ( $queryObject->have_posts() ) :
      $i = 0;
      while ( $queryObject->have_posts() ) :
          $queryObject->the_post();
          ?>
          <?php if ( $i == 0 ) : ?>
              <div class="first-post">
          <?php endif; ?>
          <a href="<?php the_permalink(); ?>" title="<?php printf(__( 'Read %s', 'wpbx' ), wp_specialchars(get_the_title(), 1)) ?>">
              <?php the_post_thumbnail('video-post'); ?>
          </a>

          <?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?>

          <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          <?php if ( $i == 0 ) : ?>
              </div>
          <?php endif; ?>    
          <?php $i++; ?>
      <?php endwhile; ?>
  <?php endif; ?>

  3. You can do something like this:

            <?php
            $queryObject = new  Wp_Query( array(
                    'showposts' => 4,
                    'post_type' => array('pretty-little-liars', 'revenge', 'once-upon-a-time'),
                    'category_name' => celebrity,
                        'orderby' => 1,
                    ));

        // Initiate some counter to point the first post

        $post_counter = 0;

            // The Loop!
            if ($queryObject->have_posts()) {

            while ($queryObject->have_posts()){
                $queryObject->the_post();

        if(!$post_counter)
        {
                ?>

    /* Custom styling for the first post */       

            <?php
        }
    else
    {    
         /* common styling for the rest of the posts */    
    }

$post_counter+=1;

            }

         wp_reset_postdata();

            }

        ?>