Display list of wordpress pages in two columns

November 28, 2009 · Print This Article

Usually in WordPress, the following code is used to call the pages list (you can find it in one of the sidebar files):

<?php wp_list_pages(); ?>

Normally when the list of pages is displayed in the sidebar or on any part of the theme, it displays in a single column. Through the following hack, you can split your pages list evenly into two or more columns which can save space and not make your pages longer.

Now, we will try and split the pages into two columns. Simply paste the following code where you’d like your pages to be displayed:

<?php
$page_s = explode("</li>",wp_list_pages('title_li=&echo=0&depth=1&style=none'));
$page_n = count($page_s) - 1;
$page_col = round($page_n / 2);
for ($i=0;$i<$page_n;$i++){
 if ($i<$page_col){
  $page_left = $page_left.''.$page_s[$i].'</li>';
 }
 elseif ($i>=$page_col){
  $page_right = $page_right.''.$page_s[$i].'</li>';
 }
}
?>
<ul class="left">
<?php echo $page_left; ?>
</ul>
<ul class="right">
<?php echo $page_right; ?>
</ul>

Basically the above code will split your pages and put them into two lists (left and right). Now all you have to do is style them so that they float left of each other. Add this code to your style.css file:

.right {float:left; width:200px;}
.left {float:left; width:200px;}

You might have to make some cosmetic adjustments in the above code so do it at your own pace.


Your choice for site templates and wordpress themes

Comments

5 Responses to “Display list of wordpress pages in two columns”

  1. Flash to Silverlight Guide – Graphics, Images and Display List … | Silverlight WebDev Insider on February 3rd, 2010 11:34 am

    […] Display list of wordpress pages in two columns : Live Experience […]

  2. beccawitz on February 21st, 2010 9:57 pm

    Hi,
    I would like to show the list of pages and a custom field under each page so it would look like:

    Apples
    are so delicious

    Blueberries
    are blue and berry

    Carrots
    good for eyesight

    How can I list subpages of a page with custom fields in 2 columns?

    Any help would be greatly appreciated. Thanks so much for your time!

  3. How to list Pages with custom fields in 2 columns in WordPress | WP Garage on March 22nd, 2010 7:51 pm

    […] found a solution for simply listing the pages in 2 columns, but it did not suggest how to modify the code to include […]

  4. arunnercoding on June 19th, 2010 9:00 am

    This is fantastic! :] just what I was looking for.

    NOTE to owner of code and future users:

    replace the apostrophes and quotes with regular ones. will throw error

  5. How to list Pages with custom fields in 2 columns in WordPress | WebDino.net on May 3rd, 2011 11:17 am

    […] found a solution for simply listing the pages in 2 columns, but it did not suggest how to modify the code to include […]

Got something to say?

You must be logged in to post a comment.