How can I split a Wordpress archive page into 2 columns?

efeezy

efeezy

New member
Oct 5, 2007
5,250
136
0
50
Ideally I'd like to show the archived posts listed in two columns with 10 in each column and if there's more than 20, utilize the "next page" link at the bottom. What would be the most painless way to accomplish this if it's even possible?

This is the theme I'm using. U-Design

And if you need to see my archive.php page, I can PM it to you or email. I appreciate the help.
 


Hmm.. I am pretty sure that the default wordpress function s_archive() won't work here, since it does not accept any parameters. It will only spit out all your posts in a single page depending on your WP-admin settings.

To achieve something like this, a custom archive page will have to be built utilizing a variety of wordpress functions, which would neither be quick, nor painless.

Is doing what you asked for like "really" important? If so, I'd look into it.
 
Many ways to do it, but the obvious one is to have a counter in the loop.

You can then either

1) wrap each post in a div, and based on a test for odd/even of the counter, use a css class for the div that floats it left or right:

Code: 
<!-- within the loop -->
if ($c++ %2 == 0) {
     $class="even"
} else {
     $class="odd";
}
<div class="<? echo $class?>">
<!-- existing div for the post teaser here -->
</div>

2) Create 2 column divs, and use a post counter to close the left column div and open the right column div when the count is 10.

Code: 
<div id="left">
<!--within the post loop -->
<?php
$c++;
if ($c == 10) {
    echo "</div><!--close left column -->";
    echo "<div id="right">";
}
<!--outside the loop -->
</div> <!-- closes the right column -->

There's existing resources out there on how to create columns with divs and css, so I'll skip that.

Another option would be to make an unordered list of the posts (<ul><li></li>...</ul), and use css to put them in columns. See alistapart for some ideas.
 
blogspotter said:
I agree.

Scroll Below:

WordPress › LJ Multi Column Archive « WordPress Plugins
Click to expand...
That is just for the sidebar. The OP wants a dedicated archive page split into two columns with a "Next" & "Previous" Option.

rish3 said:
Many ways to do it, but the obvious one is to have a counter in the loop.

You can then either

1) wrap each post in a div, and based on a test for odd/even of the counter, use a css class for the div that floats it left or right:

Code: 
<!-- within the loop -->
if ($c++ %2 == 0) {
     $class="even"
} else {
     $class="odd";
}
<div class="<? echo $class?>">
<!-- existing div for the post teaser here -->
</div>

2) Create 2 column divs, and use a post counter to close the left column div and open the right column div when the count is 10.

Code: 
<div id="left">
<!--within the post loop -->
<?php
$c++;
if ($c == 10) {
    echo "</div><!--close left column -->";
    echo "<div id="right">";
}
<!--outside the loop -->
</div> <!-- closes the right column -->

There's existing resources out there on how to create columns with divs and css, so I'll skip that.

Another option would be to make an unordered list of the posts (<ul><li></li>...</ul), and use css to put them in columns. See alistapart for some ideas.
Click to expand...

The CSS part isn't going to be tough at all, neither will the two column rendering in HTML. What's tough is to create a wordpress loop that does that what the OP asked. Output 10 recent archives in to seperate columns and then when the number exceeds 20 - it should build a "Next" Link
 
BlogHue said:
The CSS part isn't going to be tough at all, neither will the two column rendering in HTML. What's tough is to create a wordpress loop that does that what the OP asked.
Click to expand...
Depends on the theme, I suppose. He has a premium theme I'm not familiar with, but this would be fairly simple with twentyten, for example. Basically copying loop-page.php to loop-archive.php and making a few tweaks. The pagination is already there.
 
I was able to create the left and right <div> without much problem. I put them in a container and I just duplicated the loop in both div's, so I have the same info showing on both sides currently. I'm halfway there, now I just need to get the right column to start with post #10-#20. I found this resource, but I'm no PHP guru whatsoever, so I'm having a difficult time figuring out how to implement it.

php - How to split a loop into multiple columns - WordPress - Stack Exchange

Rish - If you could expand more on your example #2 and how I get it working within each left & right DIV, that might solve my issue. Thanks.

This is the archive.php page code. I've tweaked a few things in there to pull some custom fields etc, but maybe this will help. Thanks.

Code: 
<?php


get_header();?>






<div id="content-container" class="container_24">

    <div id="main-content">

    <div class="main-content-padding">
<div class="container" style="overflow: hidden; width: 100%">

<div class="left">
        <?php if (have_posts()) : ?>



          <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>



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

                <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

                <div class="entry">

                                    <div class="post-top">
                                      <div align="left" class="alignleft" id="">
                                       <div class="drop-shadow">
 <?php
$customField = get_post_custom_values("img");
if (isset($customField[0])) {
    echo '<img src="';
    echo "".$customField[0];
    echo '" height="90px" width="90px" />'; }
  else{
echo '<img src="';
echo (catch_that_image());
echo '" />'; }
 ?></div>
                                      </div>

                                      <h4><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'udesign' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h4>
                                      
                                        <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
                                        <span class="alignleft"><b>
                                        <?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'phone', true);
?>
                                        </b></span>
                                      <span class="alignleft"><b>                                      - <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">View Details</a></b></span> 
                  </div>
                                    <br><div class="alignleft"></div>
                  <div class="clear"></div>



                </div>

                </div>

                    <?php echo do_shortcode('[divider_top]'); ?>

            <?php endwhile; ?>



            <div class="clear"></div>



<?php        // Pagination

        if(function_exists('wp_pagenavi')) :

            wp_pagenavi();

        else : ?>

            <div class="navigation">

                <div class="alignleft"><?php previous_posts_link() ?></div>

                <div class="alignright"><?php next_posts_link() ?></div>

            </div>

<?php        endif; ?>



        <?php else :

        if ( is_category() ) { // If this is a category archive

            printf(__("<h2 class='center'>%s</h2>", 'udesign'), single_cat_title('',true));

        } else if ( is_date() ) { // If this is a date archive

            _e("<h2>Sorry, but there aren't any posts with this date.</h2>", 'udesign');

        } else if ( is_author() ) { // If this is a category archive

            $userdata = get_userdatabylogin(get_query_var('author_name'));

            printf(__("<h2 class='center'>Sorry, but there aren't any posts by %s yet.</h2>", 'udesign'), $userdata->display_name);

        } else {

            _e("<h2 class='center'>No posts found.</h2>", 'udesign');

        }

        get_search_form();

        endif;

        //Reset Query

        wp_reset_query(); ?>

            

            <?php edit_post_link(__('Edit this page', 'udesign'), '<div style="float:right;margin:0 10px;">', '</div>'); ?></div>
            
            <div class="right">
            
            <?php if (have_posts()) : ?>



          <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>



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

                <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

                <div class="entry">

                                    <div class="post-top">
                                      <div align="left" class="alignleft" id="">
                                       <div class="drop-shadow">
 <?php
$customField = get_post_custom_values("img");
if (isset($customField[0])) {
    echo '<img src="';
    echo "".$customField[0];
    echo '" height="90px" width="90px" />'; }
  else{
echo '<img src="';
echo (catch_that_image());
echo '" />'; }
 ?></div>
                                      </div>

                                      <h4><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'udesign' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h4>
                                      
                                        <?php if(function_exists('the_ratings')) { the_ratings(); } ?>
                                        <span class="alignleft"><b>
                                        <?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'phone', true);
?>
                                        </b></span>
                                      <span class="alignleft"><b>                                      - <a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">View Details</a></b></span> 
                  </div>
                                    <br><div class="alignleft"></div>
                  <div class="clear"></div>



                </div>

                </div>

                    <?php echo do_shortcode('[divider_top]'); ?>

            <?php endwhile; ?>



            <div class="clear"></div>



<?php        // Pagination

        if(function_exists('wp_pagenavi')) :

            wp_pagenavi();

        else : ?>

            <div class="navigation">

                <div class="alignleft"><?php previous_posts_link() ?></div>

                <div class="alignright"><?php next_posts_link() ?></div>

            </div>

<?php        endif; ?>



        <?php else :

        if ( is_category() ) { // If this is a category archive

            printf(__("<h2 class='center'>%s</h2>", 'udesign'), single_cat_title('',true));

        } else if ( is_date() ) { // If this is a date archive

            _e("<h2>Sorry, but there aren't any posts with this date.</h2>", 'udesign');

        } else if ( is_author() ) { // If this is a category archive

            $userdata = get_userdatabylogin(get_query_var('author_name'));

            printf(__("<h2 class='center'>Sorry, but there aren't any posts by %s yet.</h2>", 'udesign'), $userdata->display_name);

        } else {

            _e("<h2 class='center'>No posts found.</h2>", 'udesign');

        }

        get_search_form();

        endif;

        //Reset Query

        wp_reset_query(); ?>
            
            </div>


    </div></div><!-- end main-content-padding -->

    </div><!-- end main-content -->







<!-- end content-container -->

            

<div class="clear"></div>

<?php



get_footer();
 
efeezy said:
I was able to create the left and right <div> without much problem. I put them in a container and I just duplicated the loop in both div's, so I have the same info showing on both sides currently. I'm halfway there, now I just need to get the right column to start with post #10-#20. I found this resource, but I'm no PHP guru whatsoever, so I'm having a difficult time figuring out how to implement it.

php - How to split a loop into multiple columns - WordPress - Stack Exchange

Rish - If you could expand more on your example #2 and how I get it working within each left & right DIV, that might solve my issue. Thanks.
Click to expand...

Sure. You need a counter variable inside the loop...like $counter++;

Then a conditional that closes the first div, and opens the second when counter equals 11.

The opening for the left div would be outside of, and above the loop. The closing for the right div would be outside of, and below the loop.

Code: 
<?php
$counter++;
if ($counter == 11) {
   echo "</div> <!--closing the left div-->";
   echo "<div id='right-div'><!--opening the right div->";
}
?>
<!-- The html for an individual post here -->
If you can post what you have to a pastebin, or PM it to me I can be more specific.
 
You guys are definitely over-complicating it.

Fuck making two actual columns and having to fuck with the loop so it outputs 10 posts on 2 separate occasions. Just add a class of "archiveContainer" to the container div in archive.php, and then make all of the div.post(s) within div.archiveContainer width: 48%, float: left.

You'll want to remove this line too: <?php echo do_shortcode('[divider_top]'); ?>

Shoot me a PM, I'll do it for free if you'd like.
 
seosly said:
You guys are definitely over-complicating it.

Fuck making two actual columns and having to fuck with the loop so it outputs 10 posts on 2 separate occasions. Just add a class of "archiveContainer" to the container div in archive.php, and then make all of the div.post(s) within div.archiveContainer width: 48%, float: left.

You'll want to remove this line too: <?php echo do_shortcode('[divider_top]'); ?>

Shoot me a PM, I'll do it for free if you'd like.
Click to expand...

That alternates the posts left right, versus filling the left column first in descending date order. Maybe that works for him, but I got the feeling he wanted the latter.
 
rish3 said:
That alternates the posts left right, versus filling the left column first in descending date order. Maybe that works for him, but I got the feeling he wanted the latter.
Click to expand...

You shouldn't make assumptions. He described what he needed, and you over complicated it. :rasta:
 
It looks good now and does what I need. Thanks for your help. I appreciate it.
 
thanks a lot
 
Since we're all chatting like a bunch of old friends, here's a wordpress PHP question.

If I'm using this expression to pull a url from custom field 'website'..

Code: 
<a href="<?php echo get_post_meta( $post->ID, 'website', true ); ?>" target="_new"><img src="/images/visitthewebsite.png" alt="visit the website" /></a>
The url is linked to an image visitthewebsite.png.

Now, if there is no value present in the custom field, what's the easiest way to have it not show the image/empty link?
 
You must log in or register to reply here.
Top Bottom