Adding a class to every 3rd li WordPress
- SOLVED
Hi! I'm definitely a newbie when it comes to code so am hoping someone can help me here... I'm trying to edit the code below to add the class 'rmargin' to every 3rd list item (which sets the right margin to 0 so 3 portfolio items fit nicely in a row). I've spent a day googling but haven't managed to make anything I've found work with my existing code. any help will be much appreciated!
<!--Portfolio-->
<div id="portfolio" class="clearfix">
<!--Content-->
<div class="content clearfix">
<!--Title-->
<?php $title = get_post_meta($post->ID, 'post_header', true); if (!$title) $title = $post->post_title; ?>
<h2 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo $title; ?></a></h2>
<!--Navigation-->
<ul class="navigation clearfix">
<!--All Filter-->
<li><a href="#all" class="active all">All</a></li>
<?php $menus = wp_list_categories(array('title_li' => '','depth' => 1 , 'taxonomy' => 'skills','walker' => new Portfolio_Categories_Walker())); ?>
<!--End .navigation-->
</ul>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile ?>
<!--Items-->
<ul class="items clearfix <?php if(of_get_option('portfolio_fadein')) echo "fadein"; ?>">
<?php
//Gets amount of posts to display per page
//$per_page = get_post_meta($post->ID, 'portfolio_post_count', true);
$per_page = of_get_option('portfolio_post');
$per_page = $per_page ? $per_page : -1;
$args = array(
'post_type' => 'portfolio',
'post_status' => 'publish',
'posts_per_page' => $per_page,
'order' => 'ASC'
);
$wp_query = new WP_Query($args);
//Counts portfolio posts for the ajax loading feature
$post_count = wp_count_posts('portfolio' );
$post_count = $post_count->publish;
$count = 0;
while ( $wp_query->have_posts() ) : $wp_query->the_post();
//Gets post's categories
$terms = get_the_terms( get_the_ID(), 'skills' );
// Gets the first project image url and sets it as image preview
// if no image is set it will link to the project page
$img_1 = get_post_meta($post->ID, 'img_file_1', true);
?>
<!--Item-->
<li id="item-<?php the_ID(); ?>" class=" <?php foreach($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)).' '; } ?>" data-id="item<?php echo $count;?>">
<!--Image-->
<a rel="prettyPhoto[port]" class="image" href="<?php echo $img_1 ? $img_1 : the_permalink();?>">
<?php if ( get_post_meta($post->ID, 'image_thumb', true) ) : ?>
<img class="thumb" src="<?php echo get_post_meta($post->ID, 'image_thumb', true) ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>
</a>
<!--Title-->
<?php $title = get_post_meta($post->ID, 'post_header', true); if (!$title) $title = $post->post_title; ?>
<span class="title"><a href="<?php the_permalink(); ?>"><?php echo $title; ?></a></span>
<?php if(of_get_option('portfolio_excerpt') == 1) : ?>
<!--Description-->
<span class="description"><?php the_excerpt(); ?></span>
<?php endif; ?>
<!--End .item-->
</li>
<?php $count++; endwhile; ?>
<!--End .items-->
</ul>
<!--More-->
<a href="#" data-page="<?php echo $per_page;?>" data-count="<?php echo $post_count;?>" data-source="<?php echo home_url('/'); ?>" id="more_projects" class="more">View More Projects</a>
<!--End .content-->
</div>
<!--End #portfolio-->
</div>
Answers (3)
Egill Erlendsson answers:
Use modulus to find out if you're on the 3rd item. Since the $count start on 0, we need to check against ($count+1).
<li id="item-<?php the_ID(); ?>" class="<?php if ( 0 == ($count+1) % 3 ) { echo "rmargin"; } ?> <?php foreach($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)).' '; } ?>" data-id="item<?php echo $count;?>">
Of course there are other ways, this one just seemed the easiest.
lakeeffectkid comments:
Thank you!! this worked perfectly. Drove me crazy all day yesterday, should have just asked here first! haha.
Romel Apuya answers:
try this.
<!--Portfolio-->
<div id="portfolio" class="clearfix">
<!--Content-->
<div class="content clearfix">
<!--Title-->
<?php $title = get_post_meta($post->ID, 'post_header', true); if (!$title) $title = $post->post_title; ?>
<h2 class="title"><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo $title; ?></a></h2>
<!--Navigation-->
<ul class="navigation clearfix">
<!--All Filter-->
<li><a href="#all" class="active all">All</a></li>
<?php $menus = wp_list_categories(array('title_li' => '','depth' => 1 , 'taxonomy' => 'skills','walker' => new Portfolio_Categories_Walker())); ?>
<!--End .navigation-->
</ul>
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile ?>
<!--Items-->
<ul class="items clearfix <?php if(of_get_option('portfolio_fadein')) echo "fadein"; ?>">
<?php
//Gets amount of posts to display per page
//$per_page = get_post_meta($post->ID, 'portfolio_post_count', true);
$per_page = of_get_option('portfolio_post');
$per_page = $per_page ? $per_page : -1;
$args = array(
'post_type' => 'portfolio',
'post_status' => 'publish',
'posts_per_page' => $per_page,
'order' => 'ASC'
);
$wp_query = new WP_Query($args);
//Counts portfolio posts for the ajax loading feature
$post_count = wp_count_posts('portfolio' );
$post_count = $post_count->publish;
$count = 0;
while ( $wp_query->have_posts() ) : $wp_query->the_post();
//Gets post's categories
$terms = get_the_terms( get_the_ID(), 'skills' );
// Gets the first project image url and sets it as image preview
// if no image is set it will link to the project page
$img_1 = get_post_meta($post->ID, 'img_file_1', true);
?>
<!--Item-->
<li id="item-<?php the_ID(); ?>" class=" <?php foreach($terms as $term) { echo strtolower(preg_replace('/\s+/', '-', $term->name)).' '; } if($count % 3 ==0){ echo 'rmargin' ;} ?>" data-id="item<?php echo $count;?>">
<!--Image-->
<a rel="prettyPhoto[port]" class="image" href="<?php echo $img_1 ? $img_1 : the_permalink();?>">
<?php if ( get_post_meta($post->ID, 'image_thumb', true) ) : ?>
<img class="thumb" src="<?php echo get_post_meta($post->ID, 'image_thumb', true) ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>
</a>
<!--Title-->
<?php $title = get_post_meta($post->ID, 'post_header', true); if (!$title) $title = $post->post_title; ?>
<span class="title"><a href="<?php the_permalink(); ?>"><?php echo $title; ?></a></span>
<?php if(of_get_option('portfolio_excerpt') == 1) : ?>
<!--Description-->
<span class="description"><?php the_excerpt(); ?></span>
<?php endif; ?>
<!--End .item-->
</li>
<?php $count++; endwhile; ?>
<!--End .items-->
</ul>
<!--More-->
<a href="#" data-page="<?php echo $per_page;?>" data-count="<?php echo $post_count;?>" data-source="<?php echo home_url('/'); ?>" id="more_projects" class="more">View More Projects</a>
<!--End .content-->
</div>
<!--End #portfolio-->
</div>