• Resolved thinkofmedia

    (@thinkofmedia)


    Hi all. Can anyone suggest a way to get different height posts to be in 2 columns. But have a staggered effect. So for instance my site would be like handbag.com My site is beautyidentified.com

    The code is below.
    *trimmed by mod for readability*

    The reason is each post is going to have different size images etc.

Viewing 8 replies - 1 through 8 (of 8 total)
  • I have tested the code below (but only a little!) in the default theme and it seems to work. Handling sticky posts is tricky, and I don’t know if I got it completely right. It looks like WP 2.9.1 allows for one sticky in the posts per page, but more than that are ignored in the count.

    Anyway, try similar code in your theme.

    <?php if (have_posts()) : ?>
       <?php
       $posts_per_page = get_query_var('posts_per_page');
       if ($posts_per_page < 1) $posts_per_page = 10; //MUST have a posts per page
       $posts_per_col = ceil($posts_per_page/2);
       $counter = 0; ?>
       <div class='leftcol' >
    
       <?php while (have_posts()) : the_post(); ?>
          <?php ++$counter;
          if (is_sticky() && is_frontpage() && $counter > 1) {
             // Recalc posts_per_col because stickies after the first are not included
             $posts_per_col = ceil(++$posts_per_page/2);
          }
          if ($counter == ($posts_per_col + 1)) {
             echo '</div><!-- End leftcol --><div class="rightcol">';
          } ?>
          // Do the stuff for one post
       <?php endwhile; ?>
       </div><!-- End left/rightcol -->
       <div style='clear: both'></div>

    Then, put in the css for leftcol and rightcol to set their width and float them left and right.

    Thread Starter thinkofmedia

    (@thinkofmedia)

    What would I need to get rid of to add this. As all I get is a white screen.

    Thread Starter thinkofmedia

    (@thinkofmedia)

    <div id="main-content" class="home">
       	 <div class="content">
    				<div class="col-left">
    						<div id="main">
    
                    <!-- Post Starts -->
    
    				<?php if (have_posts()) : ?>
       <?php
                        // Split the main content pages from the options, and put in an array
                        $featpages = get_option('woo_main_pages');
                        $featarr=split(",",$featpages);
                        $featarr = array_diff($featarr, array(""));
                   	 $posts_per_page = get_query_var('posts_per_page');
                     if ($posts_per_page < 1) $posts_per_page = 10; //MUST have a posts per page
                    $posts_per_col = ceil($posts_per_page/2);
                    $counter = 0;
    
    				 foreach ( $featarr as $featitem ) {
                    query_posts('page_id=' . $featitem);
    
    		if (have_posts()) : while (have_posts()) : the_post();
    	$i++;
    	$class = ($i&1) ? '-fl' : '-fr';
    	?>
    div class='leftcol' >
    
       <?php while (have_posts()) : the_post(); ?>
          <?php ++$counter;
          if (is_sticky() && is_frontpage() && $counter > 1) {
             // Recalc posts_per_col because stickies after the first are not included
             $posts_per_col = ceil(++$posts_per_page/2);
          }
          if ($counter == ($posts_per_col + 1)) {
             echo '</div><!-- End leftcol --><div class="rightcol">';
          } ?>
    
    	<div class="post<?php echo $class; ?>">
    
    <h2><a title="Permanent Link to <?php the_title(); ?>" href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>
    
    					<?php if ( get_post_meta($post->ID, 'image', true) ) { ?>
                        <img src="<?php echo get_post_meta($post->ID, "image", $single = true); ?>" alt="" class="home-icon" />
    					<?php } ?> 
    
                           <?php the_excerpt(); ?>
                           <a href="<?php the_permalink() ?>">Read more</a></p>        
    
                    </div>
                    <?php endwhile; endif; ?> <!-- Post Ends -->
                    <?php } ?>
    <?php endwhile; ?>
       </div><!-- End left/rightcol -->
       <div style='clear: both'></div>
    
                    <!-- box Ends -->
    
    			<?php //endwhile; endif; ?>  
    
               				 </div><!-- main ends -->
           			 </div><!-- .col-left ends -->

    Disregard previous post – this is a better way:

    <?php if (have_posts()) : ?>
       <?php
       $posts_this_page = sizeof($wp_query->posts);
       $posts_per_col = ceil($posts_this_page/2);
       $counter = 0; ?>
       <div class='leftcol' >
    
       <?php while (have_posts()) : the_post(); ?>
          <?php ++$counter;
          if ($counter == ($posts_per_col + 1)) {
             echo '</div><!-- End leftcol --><div class="rightcol">';
          } ?>
          // Do the stuff for one post
       <?php endwhile; ?>
       </div><!-- End left/rightcol -->
    Thread Starter thinkofmedia

    (@thinkofmedia)

    What would I replace from my code though. And would I need to delete the endwhile details from the post end. Really grateful for your help.

    The problem is, you have a purchased theme, and I cannot get a copy examine the code or test. If you will post a copy of the unchanged code at wordpress.pastebin.ca, and post the link to it here, I will take a look. Be aware that this may violate your purchase agreement.

    Edit: I just looked at your site and I see two columns. Did you get it resolved?

    Thread Starter thinkofmedia

    (@thinkofmedia)

    I haven’t sorted it yet. Basically the posts should lay alike handbag.com were there staggered wordpress theme is here. But if you email me on jim[AT]thinkofmedia[DOT]org I’ll dropbox my theme.

    [Moderated]Please do not post links to websites that offer premium themes for free. Email updated slightly to, it’ll reduce the amount of spam you’ll get for posting it openly here.

    Thread Starter thinkofmedia

    (@thinkofmedia)

    Apologizes on the theme link.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Splitting posts into 2 columns’ is closed to new replies.