Add a class to every 2nd post

  • ProbablyBest

    (@probablybest)


    13 years, 9 months ago

    Hey everyone,

    Im trying to add a class to every 2nd post I have. I have gone through the forums and none of them seem to work for my theme.

    Below is the code im using to display a post on my index.php

    I have no loop pages to add anything too.

    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

					<article id="post-<?php the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">

						<header>

							<a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail( 'wpbs-featured' ); ?></a>

							<div class="page-header"><h1 class="h2"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1></div>

							<p class="meta"><?php _e("Posted", "bonestheme"); ?> <time datetime="<?php echo the_time('Y-m-j'); ?>" pubdate><?php the_date(); ?></time> <?php _e("by", "bonestheme"); ?> <?php the_author_posts_link(); ?> <span class="amp">&</span> <?php _e("filed under", "bonestheme"); ?> <?php the_category(', '); ?>.</p>

						</header> <!-- end article header -->

						<section class="post_content clearfix">
							<?php the_content( __("Read more &raquo;","bonestheme") ); ?>
						</section> <!-- end article section -->

						<footer>

							<p class="tags"><?php the_tags('<span class="tags-title">' . __("Tags","bonestheme") . ':</span> ', ' ', ''); ?></p>

						</footer> <!-- end article footer -->

					</article> <!-- end article -->

    Hope someone can help!

    Thanks!

Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael

    (@alchymyth)

    13 years, 9 months ago

    without touching the code of the template, you would achieve this by adding this filter function to functions.php of your theme:

    function alternating_post_class($classes) {
	global $wp_query;
	$classes[] = ( $wp_query->current_post%2 === 0 ? 'odd' : 'even' );
	return $classes;
}
add_filter('post_class', 'alternating_post_class');

    .even would be the css class for every second post.

    if you only want that for the posts page (index page) and don’t want any extra css class for every odd post, then use:

    function alternating_post_class($classes) {
     if( is_home() ) {
	global $wp_query;
	$classes[] = ( $wp_query->current_post%2 === 0 ? '' : 'even' );
      }
	return $classes;
}
add_filter('post_class', 'alternating_post_class');
    Thread Starter ProbablyBest

    (@probablybest)

    13 years, 9 months ago

    Thanks for getting back so fast.

    I added that to functions.php but its made no difference. I added it along with the over function statement.

    Michael

    (@alchymyth)

    13 years, 9 months ago

    please post a link to your site to illustrate the problem.

    Thread Starter ProbablyBest

    (@probablybest)

    13 years, 9 months ago

    Im using a test site at the moment. http://www.mhutchinson.me.uk

    Michael

    (@alchymyth)

    13 years, 9 months ago

    seemed to have worked(?)

    for instance, the post ‘dasdfasdf’ has the css class .even;

    what code exactly did you use for the filter function?

    what effect do you expect to see?

    Thread Starter ProbablyBest

    (@probablybest)

    13 years, 9 months ago

    sorry I was looking at the wrong article for the code. thats exactly what I wanted!

    Thanks for your help!

    karyyyn

    (@karyyyn)

    13 years, 9 months ago

    What about the reverse? To assign a class to every Odd post?

    Would it look like this?

    function alternating_post_class($classes) {
    if( is_home() ) {
    global $wp_query;
    $classes[] = ( $wp_query->current_post%2 === 0 ? ‘ ‘ : ‘odd’ );
    }
    return $classes;
    }
    add_filter(‘post_class’, ‘alternating_post_class’);

    Michael

    (@alchymyth)

    13 years, 9 months ago

    the ‘odd’ would be the empty ” space;

    example with odd and even:

    $classes[] = ( $wp_query->current_post%2 === 0 ? 'odd' : 'even' );

    example with just odd:

    $classes[] = ( $wp_query->current_post%2 === 0 ? 'odd' : '' );
Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Add a class to every 2nd post’ is closed to new replies.