How to show first post differently from other posts? - php

Question

I created the design that will be used to show first post differently from the others. It's not that easy because the first post needs to be in his own div id, which is completely different from the other posts.
Here is the code I currently use in wordpress php:
<?php get_header(); ?>
<!-- Begin Content -->
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image() ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading">
<h1>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
<div class="p-content">
Excerpt text of the first post goes here but php the_excerpt doesnt work for this wide paragraph
</div>
</div>
</div>
</div>
</div>
<div id="content-a">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="imgdiv"><img src="<?php echo catch_that_image() ?>" width="250"></div>
<div class="p-heading">
<h1>
<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>">
<?php the_title(); ?>
</a>
</h1>
</div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info">
<?php the_time('j.m.Y') ?> |
<?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
<?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
</div>
</div>
<?php endwhile; ?>
and here is my site url http://www.virmodrosti.com/zdravje/
All I want is that first post isn't displayed twice, but is only moved to the wide post design. The big post is in content-wide. Let me know how to do that. Thank you.

Answer 1

try to add a counter that starts in zero and increment it inside your while loop, then use if else statement to check the value of counter if zero display the first post else the other posts.
EDITED
<?php $counter = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php if($counter == 0) { ?>
<div id="content-wide">
<div class="post">
<div class="imgwide" style="background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.8)), url(<?php echo catch_that_image(); ?>); background-repeat: no-repeat; background-size: 100%; background-position: center;">
<div class="p-heading">
<h1><?php the_title(); ?></h1>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<?php if($counter > 0) { ?>
<div class="post">
<div class="imgdiv"><img src="<?php echo catch_that_image() ?>" width="250"></div>
<div class="p-heading">
<h1><?php the_title(); ?></h1></div>
<div class="p-content">
<?php the_excerpt(); ?>
</div>
<div class="p-info">
<?php the_time('j.m.Y') ?> |
<?php the_category(', '); ?> | <img src="http://www.virmodrosti.com/wp-content/uploads/comments.png" alt="Komentarji" width="26" height="12">
<?php $totalcomments = get_comments_number(); echo $totalcomments; ?>
</div>
</div>
<?php } ?>
<?php $counter ++; ?>
<?php endwhile; ?>