CODEWITHSUNDEEP
phpwordpress
Techuser
Techuser

Reputation: 125

How to display wordpress first post different from the others?

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><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</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"><a href="<?php the_permalink() ?>"><img src="<?php echo catch_that_image() ?>" width="250"></a></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; ?>

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.

Upvotes: 1

Views: 1611

Answers (2)

Ricardo Gon&#231;alves
Ricardo Gon&#231;alves

Reputation: 5074

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><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</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><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>
<div class="p-content">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</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; ?>

Upvotes: 1

Jordan Cauley
Jordan Cauley

Reputation: 353

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><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title();        ?></a></h1></div>
  <div class="p-content">
  <?php the_content('Read the rest of this entry &raquo;'); ?>
</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; ?>

Upvotes: 3

Related Questions