How to display wordpress first post different from the others? - php

Question

First part of index.php, which currently have big post display contains these entries:
<?php get_header(); ?>
<!-- Begin Content -->
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="post">
<div class="p-heading"><h1><?php the_title(); ?></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
</div>
<?php endwhile; ?>
and the first part of archive.php contains these entries:
<?php get_header(); ?>
<!-- Begin Content -->
<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><?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 endwhile; ?>
I use diffrent style div id="content" for big post, div id="content-a" for smaller post display, 3 in a row.
Now, I would like that only the latest post would be display in big format, as defined by #content in css, and the rest just as they are on archive.php with #content-a. How can I do that?
My site main index page is http://www.virmodrosti.com/ and archive is here http://www.virmodrosti.com/zdravje/
Kindly let me know, thank you.

Answer 1

The absolute easiest way to do this would be to use a ::first-child pseudo-selector in CSS.
If that is not an option, you can add a counter to your while loop and use that to add a class to your items.
<?php get_header(); ?>
<!-- Begin Content -->
<div id="content">
<?php
$counter = 0;
if (have_posts()) :
?>
<?php while (have_posts()) : the_post(); ?>
<div class="post count-<?php echo $counter; ?>">
<div class="p-heading"><h1><?php the_title(); ?></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
</div>
<?php
$counter++;
endwhile; ?>

Answer 2

There are two problems with your css selectors.
1 - You can't use div id='content-a' to style multiple posts because id is unique. You must use class=content-a.
2 - There's no id='content' inside your posts loop if (have_posts()) :
while (have_posts()) : the_post();. The only id=content is outside the loop. It will be applied to all posts no matter what.
The fix is to use a class that is inside the loop. In your code the best one would be post that is the higher div's class.
Then you need to use the while (have_posts()) loop to flag the first post...
index.php
<?php get_header(); ?>
<!-- Begin Content -->
<div id="content">
<?php if (have_posts()) : ?>
<?php
$first_post = true;
while (have_posts()) : the_post(); ?>
<div class="<?php
if ($first_post){
$first_post = false;
echo 'post-first';
}else{
echo 'post';
}
?>">
<div class="p-heading"><h1><?php the_title(); ?></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
</div>
<?php endwhile; ?>
In archive.php I don't see why you are creating a new WP_Query object after if (have_posts()). But since it's not part of the question nor the problem I'll leave it that way...
archive.php
<?php get_header(); ?>
<!-- Begin Content -->
<div id="content">
<?php if (have_posts()) : ?>
<?php
$query = new WP_Query(array('posts_per_page'=> 2,));
$first_post = true;
while ($query->have_posts()) : $query->the_post(); ?>
<div class="<?php
if ($first_post){
$first_post = false;
echo 'post-first';
}else{
echo 'post';
}
?>"> <div class="p-heading"><h1><?php the_title(); ?></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry »'); ?>
</div>
<div class="p-info"><?php the_time('j.m.Y') ?> | <?php the_category(', '); ?> | <?php comments_popup_link('Ni komentarjev', 'En komentar', '% komentarjev'); ?></div>
</div>
<?php endwhile; ?>