Conditional Classes for WordPress loop posts

5 Views

The css is already declared all I have to do is add some div classes. My theme uses an almost empty index.php with no html but uses the get_template_part functions and calls various template parts for post types, so it has several loop{template-name}.php files. I have copied the one for the blog index and made a new loop with modifications. The index for my blog, calls the appropriate template with the modifications – hooray. However I have to be able to conditionally add div classes to make the conversion work completely.

As the index.php for the blog runs through the loop I would like to be able to conditionally add one div class to the 1st returned post, and another div class to the 2nd and if the last post is odd then add a 3rd div class.

Read More

Here is my loop-template4.php file. 

<?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div class="one"> /*I added this line here and it works for not found.
    <div id="post-0" class="post error404 not-found">
        <h1 class="entry-title"><?php _e( 'Not Found', 'smpl' ); ?></h1>
        <div class="entry-content">
            <p><?php _e( 'Apologies, but no results were found 
    for the requested archive. Perhaps searching will help find
     a related post.', 'smpl' ); ?></p>
            <?php get_search_form(); ?>
        </div><!-- .entry-content -->
</div>        
    </div><!-- #post-0 -->
<?php endif; ?>

<?php

<?php while ( have_posts() ) : the_post(); ?>
    /**
      * I need to conditionally add one of 3 div classes here:  
      * odd `<div class="one_half">`,   
      * even `<div class="one_half last">`or   
      * odd and last, `<div class="one">`  
      */

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" title="
 <?php printf( esc_attr__( 
     'Permalink to %s', 'smpl' ), the_title_attribute( 'echo=0' ) );
  ?>" rel="bookmark"><?php the_title(); ?></a>
</h2>


<?php do_action('skeleton_post_meta'); ?>

<?php if ( is_archive() || is_search() ) : // Only display excerpts for 
 archives and  search. ?>
    <div class="entry-summary clearfix">
    <?php if (ot_get_option('show_post_thumbnails') && has_post_thumbn
    nil()){
        echo '<div class="alignleft">';
        skeleton_thumbnailer('fourthree');
        echo '</div>';
    }?>
        <?php the_excerpt(); ?>
    </div><!-- .entry-summary -->

<?php else : ?>

<div class="entry-content">
<?php
if (ot_get_option('show_post_thumbnails') && has_post_thumbnail()) {
    echo '<div class="alignleft">';
    skeleton_thumbnailer('thumbnail');
    echo '</div>';
}?>
    <?php //the_content( __( 
    'Continue reading <span class="meta-nav">&rarr;</span>', 'smpl' ) );
    do_action('skeleton_content');
    ?>
    <div class="clear"></div>
    <?php wp_link_pages( array( 'before' => '<div class="page-link">' .
     __( 'Pages:', 'smpl' ), 'after' => '</div>' ) ); ?>
    </div><!-- .entry-content -->
<?php endif; ?>
</div> <!-- conditional div class -->
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>

<?php endwhile; // End the loop. Whew. ?>

<?php /* Display navigation to next/previous pages when applicable */ ?>
<?php if (  $wp_query->max_num_pages > 1 ) {
    do_action('skeleton_page_navi');
}?>

So the Question:

Is it possible, as the loop hasn’t looped yet, and I need to conditionally add the div class based on the number of results from the loop?

Post Views: 5

Related posts

Leave a Reply

1 comment

  1. As far as I know, there’s no way to know when the last post in the loop is being displayed, so first we need to add some code right before your line `while (have_posts()) : the post(). For context, I’ve copied your entire block of code here, and have added comments to show where the new code is:

    <?php /* If there are no posts to display, such as an empty archive page */ ?>
<?php if ( ! have_posts() ) : ?>
<div class="one"> /*I added this line here and it works for not found.
    <div id="post-0" class="post error404 not-found">
        <h1 class="entry-title"><?php _e( 'Not Found', 'smpl' ); ?></h1>
        <div class="entry-content">
            <p><?php _e( 'Apologies, but no results were found 
    for the requested archive. Perhaps searching will help find
     a related post.', 'smpl' ); ?></p>
            <?php get_search_form(); ?>
        </div><!-- .entry-content -->
    </div>        
</div><!-- #post-0 -->
<?php endif; ?>
<?php
  /**
    * BEGIN: Additional code to add conditional classes
    */
  // How many posts are going to be displayed? Let's count here:
  $total = 0;
  while ( have_posts() ) : the_post();
      $total++;
  endwhile;
  // Reset the loop to actually start displaying them
  rewind_posts();

  // Add this line before your loop to prevent notices being thrown
  $count = 1;
while ( have_posts() ) : the_post(); ?>
<?php
// Add some conditions to determine the class
if ($count % 2) {
    // If the post displayed is an odd number
    $class = 'one_half last';
} else {
    // If the post displayed is an even number
    $class = 'one_half';
}

if ($count == $total && ($count % 2)) {
    // If the post is the last post, and it is odd
    $class = 'one';
}
// Finally, increment the count
$count++;
?>
<?php // If you need an extra div, just put it in like so... ?>
<div class="<?php echo $class; ?>">
    <?php
         // If you need the existing div to simply have the class added,
         // Then we pass it into the post_class() function
    ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class($class); ?>>
        <h2 class="entry-title">