• Hi,

    Does anyone know how to split the index page into two columns which display first half of the post on the left and second half on the right? For instant, we set 10 posts to be displayed so 5 posts to be on the left and 5 other posts on the right. The reason I want to make like this is shorten the page length and show more posts on the page.

    Thanks

Viewing 7 replies - 1 through 7 (of 7 total)
  • if ($post >= $posts[4]) {
    echo “</div> <!– this was for the first 5 posts –>
    echo ‘<div id=”box-right”>’
    }

    You could use appropriate CSS, one div on the left and one on the right side.

    The aforementioned code shows (use it in the loop) how to find out the current post number.

    Thread Starter tri-fusion

    (@tri-fusion)

    Thanks a lot Michael,

    I found these links in the index.php page but do not know which page I have to replace with your given code ??

    <?php get_header(); ?>

    <?php if (have_posts()) : while(have_posts()) : the_post(); ?>

    <div class=”post”>

    <h3 class=”posth3″>“><?php the_title(); ?></h3>
    <?php the_excerpt(”); ?>

    Thread Starter tri-fusion

    (@tri-fusion)

    *BUMP*

    Can someone helps please?

    Add the following code below “<?php if (have_posts()) : while(have_posts()) : the_post(); ?>”
    if (! (is_search() or is_page() or is_single() or is_archive() or is_404()) ) {
    switch ($post) {
    case $posts[0]:
    echo "<div style='background-color: green;'>";
    break;
    case $posts[5]:
    echo "</div>";
    echo "<div style='background-color: yellow;'>";
    break;
    } // switch
    }

    Insert

    if (! (is_search() or is_page() or is_single() or is_archive() or is_404()) ) {
    echo "</div>";
    }
    right below the endwhile.
    This will assign a green background to the first 5 posts and posts 6-10 will have a yellow background. Just use CSS for positioning…

    Thread Starter tri-fusion

    (@tri-fusion)

    Thansk Michael – this helps ??

    thelittlestgiant

    (@thelittlestgiant)

    Bumping this up with a question…

    I have this working pretty well. Michael, thanks for this very cool code.

    I’m a newbie to this… The only issue is that when I click on a post to bring it to a single page, I’d like it to apply a different css division id, so that the post isn’t spread out as wide on the page…

    What code modification, and where do I place it, for the single page, search, etc. to use a div id ie: “singlecolumn”

    I have my code existing as follows:

    <?php if (! (is_search() or is_page() or is_single() or is_archive() or is_404()) ) {
    switch ($post) {
    case $posts[0]:
    echo “<div id=’column1′>”;
    break;
    case $posts[2]:
    echo “</div>”;
    echo “<div id=’column2′>”;
    break;
    } // switch
    } ?>

    Can someone give me a hand with this. I have been trying all kinds of variations, and cannot get the multiple columns.
    Currently what I am using is not right but looks like

    <?php get_header(); ?>
    
    	<div id="content-wrap">
    
    <?php include (TEMPLATEPATH.'/right.php') ?>
    
    		<div id="content">
    
    		<?php if (have_posts()) : ?>
    
    		<?php while (have_posts()) : the_post(); ?>
    		<?php if (! (is_search() or is_page() or is_single() or is_archive() or is_404()) ) {
    switch ($post) {
    case $posts[0]:
    echo "<div style='background-color: green;'>";
    break;
    case $posts[5]:
    echo "</div>";
    echo "<div style='background-color: yellow;'>";
    break;
    } // switch
    }
    ?>
    		<div class="post" id="post-<?php the_ID(); ?>">
    			<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>
    			<p class="wed"><?php the_time('F jS, Y') ?> by  <?php the_author() ?> </p>
    
    			<div class="entry">
    				<?php the_content('Read the rest of this entry &raquo;'); ?>
    			</div>
    
    			<p class="info">Posted in <?php the_category(', ') ?> <strong>|</strong> <?php edit_post_link('Edit','','<strong> | </strong>'); ?> <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?></p>
    		</div>
    
    	<?php comments_template(); ?>
    	<?php endwhile; ?>
    <?php if (! (is_search() or is_page() or is_single() or is_archive() or is_404()) ) {
    echo "</div>";
    }
    ?>
    
    		<p align="center"><?php next_posts_link('&laquo; Previous Entries') ?>   <?php previous_posts_link('Next Entries &raquo;') ?></p>
    
    	<?php else : ?>
    		<h2 align="center">Not Found</h2>
    		<p align="center">Sorry, but you are looking for something that isn't here.</p>
    	<?php endif; ?>
    
    			<?php get_footer(); ?>
    
    		</div>
    
    	</div>
    </div>
    
    </body>
    </html>

    I am very tired, and incredibly thick headed, I need very simple answers.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘2 Columns posts’ is closed to new replies.