WordPress.org

1. KostRev
   Member
   Posted 3 years ago #

   Hello,
   I have a three column layout with three loops. I'd like to display my posts in a horizontal sequence across the three columns and am having trouble creating the correct operations.

   This is my test site:
   http://teen.mam.org.php5-9.websitetestlink.com/

   My first loop starts with:

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

   My second loop starts with:

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

   Basically that sorts even and odd numbered posts. And the third loop I am at a loss. I need each loop to increment by 3. I'd like operations that would create something like this:

   Column One:
   post 1
   post 4
   post 7
   post 10

   Column Two:
   post 2
   post 5
   post 8
   post 11

   Column three:
   post 3
   post 6
   post 9
   post 12

   Any help would be greatly appreciated.

2. cynstahl
   Member
   Posted 3 years ago #

   instead of three loops, have you tried displaying your posts as an inline-table?

   all you need to do is create a new div class under your while (have_posts()) line. in your style sheet set the class to display as an inline table. to control the number of columns, set the class to a specific width so only three will fit across.

3. charmedworks
   Member
   Posted 2 years ago #

   hi cynstahl

   Are you willing to provide a little more specifics for your recommedation? I am trying to work this with little success.

   My code looks like this:

   Loop
   

   <?php query_posts('cat=7&showposts=7'); ?>	<?php while (have_posts()) : the_post(); ?>
   <div class="portfolio">
   
   <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_excerpt(); ?></a>
   
   </div>
   
   <?php endwhile; ?>

   Stylesheet

   .portfolio {
   	display:inline-table;
   	width:200px;
   }

   Here is the display of the page:

   http://inglisart.com/?page_id=65

   It's... sort of working in Firefox, but not in IE. Any advice is much appreciated!

4. charmedworks
   Member
   Posted 2 years ago #

   hi again,

   I have deactivated the pages above because I found another solution, presented here:
   http://perishablepress.com/press/2008/09/01/multiple-loops-and-multiple-columns-with-wordpress/

   Thanks!

Topic Closed

This topic has been closed to new replies.