WordPress Posts odd/even Li layout

I am working on a custom theme and on one of the pages i need to style the posts pages as follows: http://gyazo.com/e1f7cfc03c7ba3981188077afcdf0314

The grey box is an image and the red box is content. I need to use perhaps an odd/even Li/Ul pseudo class/selector but i have no idea how to do it.

Read More

Could anyone offer me a way to start it up? I was thinking of using the Odd/Even pseudo class on UL to change the divs names however i can’t think how to do it or where to start.

Thanks!

Edit: I am thinking perhaps odd/even selector combined with jquery prepend/append?

Edit2: this is what i have however it is displaying all the Odds first then all of the Evens instead of alternatively.

PHP:

       <?php $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?>


<div class="section group">

<div class="col span_1_of_2 blue doubleheight">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>

</div>

     <div class="col span_1_of_3_30 blue doubleheight">
     <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <div class="post-text"><?php the_excerpt(); ?></div>
     </div>


</div>
<?php echo $i; ?>
 <?php endif; endwhile; ?>



<?php while(have_posts()) : ?>

<?php $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?>

<div class="section group">
<div class="col span_1_of_3_30 blue doubleheight">
     <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="post-text"><?php the_excerpt(); ?></div></div>



<div class="col span_1_of_2 blue doubleheight">
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
</div>

</div>
<?php echo $i; ?>
<?php endif; endwhile; ?>

Related posts

Leave a Reply

1 comment

  1. Since you are in the loop, you can use the build in loop counter ($wp_query->current-post) to add a different class to all odds or all evens or both

    There is no need to run two loops. Here is an example of how I use this in my website to create two post columns

    <?php if ( have_posts() ) : ?>
    
    <?php while ( have_posts() ) : the_post();  ?>
            <?php /* Start the Loop */ ?>
    
            <div class="entry-content-<?php if( $wp_query->current_post%2 == 1 ){ echo ' left-post';}else{ echo ' right-post';} ?>">
            <?php get_template_part( 'content', get_post_format() ); ?>
            </div>
    
    <?php endwhile; ?>
    

    EDIT

    I misunderstood you in my original answer, but you can still use the same idea as I used there. Here is something you can try. Just replace all your code with this

    <?php if ( have_posts() ) : ?>
    
        <?php while ( have_posts() ) : the_post();  ?>
        <?php /* Start the Loop */ 
    
            if($wp_query->current_post%2 == 1 ) { ?>
    
                <div class="section group">
    
                    <div class="col span_1_of_2 blue doubleheight">
    
                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
    
                    </div>
    
                    <div class="col span_1_of_3_30 blue doubleheight">
                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <div class="post-text">
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
    
    
                </div>
    
            <?php }else{ ?>
    
                <div class="section group">
                    <div class="col span_1_of_3_30 blue doubleheight">
                        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                        <div class="post-text">
                            <?php the_excerpt(); ?>
                        </div>
                    </div>
    
    
    
                    <div class="col span_1_of_2 blue doubleheight">
                        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('large'); ?></a>
                    </div>
    
                </div>
    
            <?php }
    
        <?php endwhile; ?>
    
     <?php endif; ?>