Display WordPress Pages or Categories in 2-3 Columns

If you have a lot of pages or categories on your site and you would like to break them out into columns when displaying them via WordPress’ wp_list_pages or wp_list_categories function this article will show you to do just that. Simply put what we are going to do is use some PHP to place all the unordered list elements into an array and then some simple division to break the array into separate variables that we can in turn echo out into our columns. We will then use CSS to make our columns once the pages are in place.

WP_List_Page: Display Output in Multiple Columns

Let’s use a bit of math and some PHP to get our pages, place the list into an array and then divide it up to suit our multi-column needs. The code below should be used within the WordPress loop

Two Columns

The WordPress function WP_List_Pages is great for outputting an dynamic list of your pages that can be easily styled. Let’s expand upon this function with some PHP to display some columns.

Three Columns

The difference with the code below from the bit above is that we are going to be breaking up our array into three separate unordered lists so that they can be styled with CSS. Like before, ensure you change the arguments for the wp_List_pages function to suit your needs.

WP_List_Categories: Display Output in Columns

Most likely, you have a lot of categories and want to display them in a bit nicer fashion than a long list that pushes the page length down off the screen. This is an excellent idea and your users will thank you. Most likely, you are using the

Two Columns

Three Columns

Extra Info that May Help You

The great thing about WordPress is that there’s a ton of plugins that can make your life much easier. If you are looking to display your tags in multiple columns you may want to have a look at: Multi-column Tag Map. This plugin is pretty cool in that it display your tags in columns and also have a nice optional show/hide jQuery toggle effect. I also got this plugin to work with Categories and it works really well for those as well.

Wrapping Up: What We Learned

We see that our WordPress functions wp_list_pages and wp_list_categories can be used with some PHP to create any number of columns. If you need more than three columns, simple tweak the math and you’ll have the number of columns you want in no time. Still having trouble? Please use the comments below and we’ll set you straight!

Devin Walker is a San Diego-based WordPress Developer and enthusiast. He is the author of several popular and highly-rated WordPress themes and plugins. In his free time he enjoys playing Golf and traveling.

Follow
Devin

Is your WordPress Running Slow?

Milliseconds are money. Website speed is extremely important. We highly recommend WP Engine. Why? Because they make a sluggish WP site fast, support is great and they have excellent uptime.

WP Engine Logo
  • Asma_wakeel

    I have used categories plugin that is available in wordpress. How can I use your code now? As that plugin works without any code I guess. Or may be I am not finding the code. Please help me asap.

  • Asma_wakeel

    I have used categories plugin that is available in wordpress. How can I use your code now? As that plugin works without any code I guess. Or may be I am not finding the code. Please help me asap.

  • http://pulse.yahoo.com/_ZGKBZOO6PZEMRIQKLLEGWU72TU damir g

    Hi,

    I’m using this code to display a list of pages in two column, with specific meta key.
    Works fine but when I repeat the code to display second set of pages with different meta key (custom field) it includes pages from first loop as well.
    I need to run several sets of page lists with different meta keys.
    How can I fix this?

    • Vali

      use the “exclude” function.

  • http://pulse.yahoo.com/_ZGKBZOO6PZEMRIQKLLEGWU72TU damir g

    Hi,

    I’m using this code to display a list of pages in two column, with specific meta key.
    Works fine but when I repeat the code to display second set of pages with different meta key (custom field) it includes pages from first loop as well.
    I need to run several sets of page lists with different meta keys.
    How can I fix this?

    • Vali

      use the “exclude” function.

  • aiekon

    This works great! Quick question though.. how would I just show a 2-column list of subpages even if on a subpage?

  • aiekon

    This works great! Quick question though.. how would I just show a 2-column list of subpages even if on a subpage?

  • bimasakti.info

    thanks very helpful for me :D

  • http://omBimo.com omBimo

    thanks very helpful for me :D

  • http://twitter.com/gabssnake Gabriel Vivas

    Great article and snippets, really useful. Thank you very much!

  • http://twitter.com/gabssnake Gabriel Vivas

    Great article and snippets, really useful. Thank you very much!

  • http://webveins.in/ webveins.in

    This is really a great article and solved my problem to some extent.
    Actually I want to have child pages as well. This does not solve the purpose for three column pages list with child pages. Attached is the Image.

    Please help me sort it out.
    Thanks

    • http://www.wordimpressed.com Devin Walker

      Hmm, I can understand the need to have child pages… I’ll have to revisit this, very good inquiry though. Thanks for the screenshot too, very helpful. I’ll post back after I’ve taken a look; if you find a solution please repost!

  • http://webveins.in/ webveins.in

    This is really a great article and solved my problem to some extent.
    Actually I want to have child pages as well. This does not solve the purpose for three column pages list with child pages. Attached is the Image.

    Please help me sort it out.
    Thanks

    • http://www.dlocc.com DLOCC

      Hmm, I can understand the need to have child pages… I’ll have to revisit this, very good inquiry though. Thanks for the screenshot too, very helpful. I’ll post back after I’ve taken a look; if you find a solution please repost!

  • SimChris

    HI, got a little lost on doing a 4 col version as far as the greater than less than stuff in the array to add the additional element (e.g., MiddleL and MiddleR to make 4 col). Doh. My ignorance of PHP is showing. 3 columns worked great first time, awesome and thank you. Could you add a 4 col example (beyond the /4 and echo parts; got lost on the array section. THANK YOU!

    • Gui Lebas

      Four months ago.. but for people searching for listing wordpress pages in more than three columns :

      <?php $pageArray = explode("”,wp_list_pages(‘title_li=&echo=0&depth=1′));$pageCount = count($pageArray) – 1;$pageColumns = round($pageCount / 4);$twoColumns = round($pageColumns * 2);$threeColumns = round($pageColumns * 3);for($i = 0; $i < $pageCount; $i++){    if($i < $pageColumns){$columnOne = $columnOne.''.$pageArray[$i].'’;}    elseif($i < $twoColumns){$columnTwo = $columnTwo.''.$pageArray[$i].'’;}     elseif($i < $threeColumns){$columnThree = $columnThree.''.$pageArray[$i].'’;}    elseif($i >= $threeColumns){$columnFour = $columnFour.”.$pageArray[$i].”;}};?>

      I think it’s pretty easy to understand how to get more than 4 column with this piece of code.

  • SimChris

    HI, got a little lost on doing a 4 col version as far as the greater than less than stuff in the array to add the additional element (e.g., MiddleL and MiddleR to make 4 col). Doh. My ignorance of PHP is showing. 3 columns worked great first time, awesome and thank you. Could you add a 4 col example (beyond the /4 and echo parts; got lost on the array section. THANK YOU!

    • Gui Lebas

      Four months ago.. but for people searching for listing wordpress pages in more than three columns :

      <?php $pageArray = explode("”,wp_list_pages(‘title_li=&echo=0&depth=1′));$pageCount = count($pageArray) – 1;$pageColumns = round($pageCount / 4);$twoColumns = round($pageColumns * 2);$threeColumns = round($pageColumns * 3);for($i = 0; $i < $pageCount; $i++){     if($i < $pageColumns){$columnOne = $columnOne.''.$pageArray[$i].'’;}     elseif($i < $twoColumns){$columnTwo = $columnTwo.''.$pageArray[$i].'’;}       elseif($i < $threeColumns){$columnThree = $columnThree.''.$pageArray[$i].'’;}     elseif($i >= $threeColumns){$columnFour = $columnFour.”.$pageArray[$i].”;}};?>

      I think it’s pretty easy to understand how to get more than 4 column with this piece of code.

  • SimChris

    HI, got a little lost on doing a 4 col version as far as the greater than less than stuff in the array to add the additional element (e.g., MiddleL and MiddleR to make 4 col). Doh. My ignorance of PHP is showing. 3 columns worked great first time, awesome and thank you. Could you add a 4 col example (beyond the /4 and echo parts; got lost on the array section. THANK YOU!

  • mikew

    Thank you for that, I’ve been looking on how to do categories in columns.  Is there a way to modify the code so that it can also show the child categories in a chosen category, also in columns?

  • mikew

    Thank you for that, I’ve been looking on how to do categories in columns.  Is there a way to modify the code so that it can also show the child categories in a chosen category, also in columns?

  • Christopher

    I’ll send you a $20 donation via PayPal if you can spit out a 5 column version of the WP list categories, based on your 3 column example :-)

  • Christopher

    I’ll send you a $20 donation via PayPal if you can spit out a 5 column version of the WP list categories, based on your 3 column example :-)

  • Ysidnem

    Hi, I am not good with css, how do I style this to get it in three columns. Thanks

  • Ysidnem

    Hi, I am not good with css, how do I style this to get it in three columns. Thanks

  • http://www.techtipsworld.com/ Akash Arora

    Nice Article but loop.php file is not exist in my theme. Plz tell now where did i need to add this code ?

  • http://www.techtipsworld.com/ Akash Arora

    Nice Article but loop.php file is not exist in my theme. Plz tell now where did i need to add this code ?

  • http://ep90xworkoutsheets.com/ P90X Workout Sheets

    Awesome job on the three columns. Just what I was looking for. Thanks!

  • http://ep90xworkoutsheets.com/ P90X Workout Sheets

    Awesome job on the three columns. Just what I was looking for. Thanks!

  • CG

    Hi,

    Great work! But how do you style the rows? For me they only end up underneath each other (with display: inline; and not).

  • CG

    Hi,

    Great work! But how do you style the rows? For me they only end up underneath each other (with display: inline; and not).

  • http://twitter.com/KRIS_3D KRIS3D

    What about this simple WordPress plugin : http://wordpress.org/extend/plugins/multi-column-tag-map/
    I think it makes it !

  • http://twitter.com/KRIS_3D KRIS3D

    What about this simple WordPress plugin : http://wordpress.org/extend/plugins/multi-column-tag-map/
    I think it makes it !