How to show one post different from the rest?

Question

the code I am using below will show the last 5 post in whatever category I choose, but I was wondering, How can I get it so that the first post shows different from the other 4?

I want the first post to show the thumbnail and the title under it and the rest to show titles. I found a code on a recent post on here but it's closed, so I couldn't comment and ask questions.

Here is the code I'm using

<?php
$queryObject = new  Wp_Query( array(
    'showposts' => 5,
    'post_type' => array('post'),
    'category_name' => videos,
        '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('sidethumbs'); ?>
      </a>

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

It's working but the problem is, I don't know where to begin the second styling or how to begin it which the person failed to explain, can anyone help me.

Answer 1

The code you posted will only make difference in adding <div class="first-post"></div> for the first post, so it still displays same information for all posts.

Try this instead:

<?php
$queryObject = new  Wp_Query( array(
    'showposts' => 5,
    'post_type' => array('post'),
    'category_name' => videos,
    'orderby' => 1,
    ));

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

Answer 2

The code you show wraps your first post in a <div class='first-post'>...</div> element. You can add styles to it in your theme's CSS file(s) (either style.css or a custom one if you're loading custom styles):

div.first-post {
    /* First Post styles here */
    /* for example, if you want the text to be **bold** */
    font-weight: bold;
}