WordPress.org

1. roowilliams
   Member
   Posted 9 months ago #

   Hi there,

   I am making a layout that lists posts in horizontal rows of three. I have padding on my main container div and padding-left on each post to make it sit 15px away from the previous one. The problem is on the left side the padding adds to the container div's padding and throws it all off.

   What I would like to do is add a class of 'first' to each post that comes into contact with the left side (1st, 4th, 7th, 10th, 13th etc.), so that I can remove the padding-left on it and make it sit flush.

   I know I need to make a count, but I am not the cleverest, mathematically and I am confused about how to use operators to end up with the post numbers I want.

   So far, through copying and pasting and general butchery I have this code, which is kind of doing something, but not to the right posts:

   <?php 
   
               	// create the navigation above the content
               	thematic_navigation_above();
   
   				// Custom loop for displaying all posts from the project custom post type.
   
   				$loop = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 9 ) ); ?>
   
   				<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
   
   				<?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>
   
   					<div class="entry-content">
   						<?php the_post_thumbnail(); ?>
   						<?php the_excerpt(); ?>
   					</div>
   
   				<?php endwhile; ?>

   Would really appreciate any input.

   Cheers

   - Roo

2. roowilliams
   Member
   Posted 9 months ago #

   OOPS. Please ignore above code, this is the code I wanted to share:

   <?php 
   
               	// create the navigation above the content
               	thematic_navigation_above();
   
   				// Custom loop for displaying all projects from a category.
   
   				$loop = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 9 ) );
   				$postcount = 1;
   
   				while ( $loop->have_posts() ) :  $loop->the_post();
   				echo '<div class="project';
   				if (
   				!(($postcount) % 3)
   				) echo ' first';
   				echo '">';
   				$postcount++;
   				?>
   
   				<?php the_post_thumbnail(); ?>
   				<?php the_title( '<h2 class="entry-title"><a href="' . get_permalink() . '" title="' . the_title_attribute( 'echo=0' ) . '" rel="bookmark">', '</a></h2>' ); ?>
   
   					<div class="entry-content">	
   
   						<?php the_excerpt(); ?>
   					</div>
   					</div>
   				<?php endwhile;

3. roowilliams
   Member
   Posted 9 months ago #

   Ok I'm trying it differently, but I am also trying to add row numbers too so that I might have more control over certain rows, but I am getting a syntax error with this.

   Please bear with me, I am new to PHP and so am just chopping up bits of code and experimenting :)

   // Custom loop for displaying all posts from the project custom post type.
   
   				$loop = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 9 ) );
   				$postcount = 1;
   				$row = 1;
   
   				while ( $loop->have_posts() ) :  $loop->the_post();
   				echo '<div class="project row-' . $row;
   				if ( $postcount == 1 ) { echo ' first'; }
   				echo '">'
   				if ( $postcount == 3 ) { $row++; $postcount = 1; }
   				$postcount++;
   				?>

4. roowilliams
   Member
   Posted 9 months ago #

   I realised I was missing a semicolon from echo '">'.

   Have now tried it and I THINK IT MIGHT WORK (need to add more than 3 dummy posts to check)

5. roowilliams
   Member
   Posted 9 months ago #

   Had to change something but `all works now. This code outputs rows of 3 posts and assigns a class of 'first to every first post in the row, and also gives each row its own class.

   Not the most elegant code, but it works.

   // Custom loop for displaying all posts from the project custom post type.
   
   				$loop = new WP_Query( array( 'post_type' => 'project', 'posts_per_page' => 9 ) );
   				$postcount = 1;
   				$row = 1;
   
   				while ( $loop->have_posts() ) :  $loop->the_post();
   				echo '<div class="project row-' . $row;
   				if ( $postcount == 1 ) { echo ' first'; }
   				echo '">';
   				if ( $postcount == 3 ) { $row++; $postcount = 0; }
   				$postcount++;
   				?>

Reply

You must log in to post.