Three loop horizontal post sequence

  • KostRev

    (@kostrev)


    15 years, 7 months 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.

Viewing 3 replies - 1 through 3 (of 3 total)
  • cynstahl

    (@cynstahl)

    15 years, 4 months 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.

    charmedworks

    (@charmedworks)

    14 years, 9 months 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!

    charmedworks

    (@charmedworks)

    14 years, 9 months 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!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Three loop horizontal post sequence’ is closed to new replies.