PHP Grid with Modulus and WordPress

An article by Neil Davidson    7 Comments

Creating a layout in WordPress can be a simple, or complicated task. This quick tip will show you how to use modulus and PHP within WordPress to create a grid for your posts and images. We will use a single variable to set how many grid columns to use or, in even simper terms, how many items to display across horizontally before we move to the next line.

PHP Modulus is an arithmetic operator that gives the remainder of number A divided by number B. If a number can be equally divided into another number then the remainder will be zero. As examples:

3 / 3 == 1

5 / 3 == 2.5

3 goes into 3 once and leaves no remaining number during the operation. While 3 goes into 5 once, and leaves 2 remaining. We will be using this logic to create our PHP grid in WordPress to display our posts. We will use the following interpretation:

increment / columns

Thus, if we have 10 posts and want to display 4 across before moving to the next line we will print each post across until the number equals 0. So the calculations occurring will look like this:

1 / 4 = 0.25

2 / 4 = 0.5

3 / 4 = 0.75

4 / 4 = 1

When we reach 1 that means the number divides equally into the other and leaves 0 remaining. With 0 remaining we know we have reached 4 items across, or columns, and can move to the next. Remember – we are using the PHP modulus to determine what number remains and use that number in our conditional statement within WordPress.

<?php 
query_posts( 'posts_per_page=8' ); 
$columns = 4;
$increment = 0;
?>
	<table>
		<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
			<?php if($increment % $columns == 0){ // if increment is divisable by columns (ie 3/3 = 0))?>
			<tr>
				<td>
					<div class="post" id="<?php the_ID(); ?>">				
					<div class="entry">
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>					
					</div>
				
					</div> <!-- .post -->
				</td>
			
			<?php
			}else{
			?>
				<td>
					<div class="post" id="<?php the_ID(); ?>">				
					<div class="entry">
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>					
					</div>
				
					</div> <!-- .post -->				
				</td>				
			
		<?php }$increment++; endwhile; endif;?>
	</tr></table>

We define our number of columns before the loop and then set our increment counter to 0 because all arrays start at 0, including results from our WordPress query. We then add table tags before the loop, and close the table and row tag after the loop. You can use any method of display, including using a DIV and floats. For this tutorial we are keeping it simple and using a table.

Because we start our increment at 0 the first post will display because the PHP modulus returns 0. Zero divided by any number is zero! This lets us initiate our next tag element in our table grid. We open our first post with a TR and TD. We finish that post by closing our TD tag but not the TR. We don’t know, yet, if we have reached the amount of items to show in the first row so we don’t want to close off the row until we do.

We finish that action by adding 1 to our increment variable and then WordPress continues it’s while() loop. This time around it finds a remainder and so moves on to the else statement. It will continue to do this until we have a remainder of zero once again. Using the above number of posts we will have 2 rows of 4 posts, and the last row will have 2 posts. There. A nice and easy way to add a grid layout to your posts!

As a bonus, using the same logic, I have a quick snippet for you to use to display an image from a post instead of the title! Great for gallery pages or even displaying related posts.

	<div id="content" style="margin-left:-4px;width:1014px;padding:0px;">
       <table width"100%">
          
		<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
			          <?php
				          $args = array(
							'numberposts' => -1, //the amount of images to retrieve
				    		'post_type' => 'attachment', //defined post type
				    		'status' => 'publish', //the status of the post (draft, published, etc)
				    		'post_mime_type' => 'image', //e.g. image, video, video/mp4
				    		'post_parent' => $post->ID, //the ID of the post we want to use
							'order'=> 'ASC',
			                'orderby' => 'title'
							);
							$images = &get_children($args); //post is the parent, and attachments are children of parent.  Get the children
						 //loop through the post attachments				
					     
					?>

	       <?php 
		   if($increment % $columns == 0) // if increment is divisable by columns (ie 3/3 = 0))
		   {
					echo '<tr><td style="text-align:left;">';
                           			
							foreach ( (array) $images as $attachment_id => $attachment )
							{ 
							$img_desc = $attachment->post_content;
							$image_attributes_medium = wp_get_attachment_image_src( $attachment_id, 'thumbnail' );
							$image_attributes = wp_get_attachment_image_src( $attachment_id, 'full' );
							echo '<a class="grouped" rel="gallery'.$increment.'" href="'.$image_attributes[0] .'"title="'. $img_desc.'">';					
							echo '<img src="'.$image_attributes_medium[0].'" title="" /></a></td>';  				  
							 }
		   }
		   else
		   {
					echo '<td style="text-align:center">';
                           			
							foreach ( (array) $images as $attachment_id => $attachment )
							{ 
							$img_desc = $attachment->post_content;
							$image_attributes_medium = wp_get_attachment_image_src( $attachment_id, 'thumbnail' );
							$image_attributes = wp_get_attachment_image_src( $attachment_id, 'full' );
							echo '<a class="grouped" rel="gallery'.$increment.'" href="'.$image_attributes[0] .'"title="'. $img_desc.'">';					
							echo '<img src="'.$image_attributes_medium[0].'" title="" /></a></td>';  				  
							 }
		   }
		   
			 
				$increment++;
		   ?>
		
		<?php endwhile; endif; ?>	
</tr></table>  </div>

Have fun and happy coding! As usual, please don’t hesitate to provide feedback or let me know if my tips are helping you in your projects.

Related posts: