0

I'm using the following to add specific classes to my odd/even posts but I also need to add a class to all posts except the first one. Is there a quick, semantic way to do this minus the first post?

<?php $homenews_query = new WP_Query( 'posts_per_page=4' ); ?>

            <?php while ($homenews_query -> have_posts()) : $homenews_query -> the_post(); ?>
            <?php if ($homenews_query->current_post % 2 == 0): ?>
<!-- stuff here -->
<?php else: ?>
<!-- stuff here -->    
<?php endif ?>

    <?php 
        endwhile;
        wp_reset_postdata();
    ?>

I've tried various ways to do this--mostly with jQuery (addClass and removeClass) and it's not been working for me.

TIA!

2
  • Have you tried adding an extra conditional if ($homenews_query->current_post != 0) Jul 24, 2017 at 19:37
  • You don't even need to add a class if you just want to style them. You can use pseudo-elements, such as .class:first-child for styling the first element, and .class:nth-child(2n) - .class:nth-child(2n+1) for styling odd-even elements.
    – Johansson
    Jul 25, 2017 at 6:56

2 Answers 2

1

You can do this in multiple ways, but you will need something commom to all posts, exemple:

<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>
<div class="post"></div>

then in your css:

.post:not(:first-child) {
  // add the rules of the class you wanted to add
}

Just select all elements except the first-child of posts with the class post and add the rules of the class you wanted to add.

You also can do with js/jquery:

$('.post:not(:first-child)').addClass('myclass');

It's the same logic as with css, but if you wnat to add a separate class you can do it.

or you can do with php:

<?php $count = 0 ?>
<?php while ($homenews_query -> have_posts()) : $homenews_query -> the_post(); ?>

<?php if ($count != 0): ?>
  <!-- stuff here -->
<?php endif ?>

<?php if ($homenews_query->current_post % 2 == 0): ?>
  <!-- stuff here -->
<?php else: ?>
  <!-- stuff here -->    
<?php endif ?>

<?php 
  $count++;
  endwhile;
  wp_reset_postdata();
?>

I know that the first post, is the one in the index 0 so a just check if the count is != 0.

or simpler, you have an attribute called current_post just check if you're not in the first post, like this:

<?php while ($homenews_query -> have_posts()) : $homenews_query -> the_post(); ?>

<?php if ($homenews_query->current_post != 0): ?>
  <!-- stuff here -->
<?php endif ?>

<?php if ($homenews_query->current_post % 2 == 0): ?>
  <!-- stuff here -->
<?php else: ?>
  <!-- stuff here -->    
<?php endif ?>
<?php 
  endwhile;
  wp_reset_postdata();
?>

Edit: I posted with the inverse logic, fixed now.

2
  • I ended up using the jQuery to removeClass instead of add. Jul 24, 2017 at 21:10
  • @JusticeIsCheap - Seems a bit strange to use jQuery for something you can easily accomplish via PHP for anyone else looking at the code it won't be obvious how the classes are being added/removed. Of course is this is a project just for you that's fine, but if anyone else is going to see/edit/access the project best to keep your code in one place.
    – WPExplorer
    Jul 24, 2017 at 21:36
2

The easiest thing is to add a counter variable to your loop. But also be sure to add a posts exists check to prevent issues if no posts are found and I highly recommend using good commenting and syntax - it's a good habit ;)

Here is an example of the modified code:

<?php
// Query posts
$homenews_query = new WP_Query( 'posts_per_page=4' );

// If posts are found do stuff
if ( $the_query->have_posts() ) :

    // Define counter
    $count = 0;

    // Loop through posts
    while ( $homenews_query->have_posts() ) : $homenews_query->the_post();

        // Add to counter for each entry
        $count ++;

        // Define default classname for entry
        $class = 'entry';

        // Add class name to all excerpt the first
        if ( 1 !== $count ) {
            $class .= ' first-post';
        }

        // Add odd/even classes
        $class .= $count % 2 == 0 ? ' even' : ' odd';


    // No posts found
    else: ?>

        <!-- stuff here -->

    <?php endif ?>

    <?php
    // End loop
    endwhile;

    // Reset post data to prevent query conflicts
    wp_reset_postdata(); 

// End posts check
endif; ?>
4
  • This is the inverse of what I'm looking for. I was looking to add the class to all posts but the first. Jul 24, 2017 at 21:10
  • Oh sorry I misread the question. I updated the code accordingly ;)
    – WPExplorer
    Jul 24, 2017 at 21:33
  • Thank you! I'll check this out because the jQuery is working in unexpected ways. Jul 27, 2017 at 19:12
  • Hi, I wouldn't recommend jQuery. Also because it loads after the HTML has loaded so if you are adding CSS for these classes it will create a "flash".
    – WPExplorer
    Jul 27, 2017 at 23:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.