Performancing Metrics

How To: Display Your WordPress Category List in Multiple Columns

Do you sometimes get that feeling to go all overboard and do things differently with your design? OK, I might not be the most creative person with visual designs, actually I like simplicity, but the fact was that I recently switched to a single-column design for my own WordPress blog.

With simplicity, and single-column design, came the following problem: ‘How to implement a smart navigation?’ Important is to understand my blog: iFranky is a mix of several topics and is both my brand and a personal space to write about life as well as a tumblelog and collection of interesting entries I wrote on other blogs. The readership is a mix of friends, bloggers, clients and students I lecture about blogging and social media. This leads to a mix of different topics, but not all are worth to be displayed on the home page.
The main navigation factor is based on the categories, categories I used in previous designs iterations to display multiple loops on the home page or to implement different backgrounds.

Simplicity meant that my complete navigation would be send to the footer, an often overlooked design element (There is no fold), even the header navigation.
Because my main page only shows the main entries, I somehow had to integrate a category list in the footer but who wants to add one column of more than 15 categories or a drop-down? Trust me when I say that I have analysed click behaviour and barely one bothers with these often sky-high columns or drop-downs. The solution: display your category list in columns.

Code to Display Your WordPress Category List in Columns

For this tutorial we are going to display the categories in 5 columns. First we need to define all values for the array.

<?php
// Grab the categories - top level only (depth=1)
 $get_cats = wp_list_categories( 'echo=0&title_li=&depth=1' );
// Split into array items
 $cat_array = explode('</li>',$get_cats);
// Amount of categories (count of items in array)
 $results_total = count($cat_array);
// How many categories to show per list (round up total divided by 5)
 $cats_per_list = ceil($results_total / 5);
// Counter number for tagging onto each list
 $list_number = 1;
// Set the category result counter to zero
 $result_number = 0;
?>

We use wp_list_categories to grab the category list, displaying only the top categories (depth=1).

In line 9 we put how many columns we want to generate, five in this example. To limit everything to full numbers ceil is used to round up.

Now we are going to output this list and also add auto-generated classes for CSS styling to the code.


<ul class="category_footer_post" id="cat-col-<?php echo $list_number; ?>">

	<?php
		foreach($cat_array as $category) {
		$result_number++;

		if($result_number % $cats_per_list == 0) {
		$list_number++;
		echo $category.'</li>
		</ul>

		<ul class="category_footer_post" id="cat-col-'.$list_number.'">';

	}

	else {
	
		echo $category.'</li>';
			
		}

	} ?>
			
</ul>

We can now easily style following with CSS: #cat-col-'.$list_number.' with '.$list_number.' being the… you guessed it, the number of your column.
Because every column will have its own number, do not forget that you will have to style all columns (#cat-col-1, #cat-col-2, #cat-col-3, #cat-col-4, #cat-col-5).

The Result

This awesome bit of code thanks to t31os_.

Categories: WordPress Tutorials
Tags: , , ,

This post was written by . You can visit the for a short bio, more posts, and other information about the author.

Comment with Your Facebook Account

Comments

  1. Jed says: 1/15/2010

    Where can I find a link to create the posts in columns on category or archive.php instead only category list to display?

    Reply

    • Franky Branckaute ) says: 1/15/2010

      Somehow I want to delete this comment for being totally unrelated and ‘too lazy to Google’, but to answer your question: wrap the output for entries (excerpts) in a list (<ul>) and define a height for each <li>. You can see all this in the source and CSS at my my blog as well.

      Reply

  2. Mac_Boy ) says: 1/15/2010

    Good one!

    Reply

  3. Chris Robinson ) says: 1/16/2010

    Definitely useful if a theme design uses a “Mega Dropdown” style nav, nice work.

    Reply

  4. Matt says: 2/6/2010

    This is great. Have been having a look to see if I can do this with pages as well. I can get as far as having a list of 1’s but no pages…

    Can you help?

    <?php
    // Grab the categories – top level only (depth=1)
    $get_pages = wp_list_pages( 'echo=0&title_li=&depth=1' );
    // Split into array items
    $page_array = explode('’,$get_pages);
    // Amount of categories (count of items in array)
    $results_total = count($page_array);
    // How many categories to show per list (round up total divided by 5)
    $pages_per_list = ceil($results_total / 3);
    // Counter number for tagging onto each list
    $list_number = 1;
    // Set the category result counter to zero
    $result_number = 0;
    ?>

    <ul class="page_footer_post" id="page-col-“>

    <?php
    foreach($page_array as $pages) {
    $result_number++;

    if($result_number % $pages_per_list == 0) {
    $list_number++;
    echo $page.'

    ‘;

    }

    else {

    echo $page.”;

    }

    } ?>

    Reply

    • DeNieD says: 12/11/2010

      Are you resolved?
      I’ve tried to use get_posts instead of wp_list_pages but it show only the text “array”.
      If I use get_latest_posts it shows them but outside the “ul” loop. Help, please :)

      Reply

  5. Lara says: 3/7/2010

    I’ve searched and searched and tried and tried to find something that will work. I’ve found bunches of solutions for categories… I modify them to try it with archives and it just ends up dumping the two columns after the list of archives it output.

    Arghh!

    This is the basic modification I’ve been trying to use:

    <?php
    // Grab the categories – top level only (depth=1)
    $get_cats = wp_get_archives( 'type=daily' );
    // Split into array items
    $cat_array = explode('’,$get_cats);
    // Amount of categories (count of items in array)
    $results_total = count($cat_array);
    // How many categories to show per list (round up total divided by 5)
    $cats_per_list = ceil($results_total / 5);
    // Counter number for tagging onto each list
    $list_number = 1;
    // Set the category result counter to zero
    $result_number = 0;
    ?>

    <ul class="category_footer_post" id="cat-col-“>

    <?php
    foreach($cat_array as $category) {
    $result_number++;

    if($result_number % $cats_per_list == 0) {
    $list_number++;
    echo $category.'

    ‘;

    }

    else {

    echo $category.”;

    }

    } ?>

    Any ideas?

    Reply

  6. Floyd says: 5/21/2010

    Any chance to exclude some categories? Get all and exclude e.g. category “name1″ “name2″ would be very cool, because I have a “featured”-category, that I don´t want to display.

    Great work and thanks for your answer
    Floyd

    Reply

    • Franky Branckaute ) says: 5/21/2010

      Any chance to exclude some categories?

      In line 3 for $get_cats you should be able to use all parameters available for wp_list_categories, also exclude.

      Reply

    • Desain Rumah Kayu says: 2/8/2014

      With simplicity, and single-column design, came the following problem: ‘How to implement a smart navigation?’ Important is to understand my blog: iFranky is a mix of several topics and is both my brand and a personal space to write about life as well as a tumblelog and collection of interesting entries I wrote on other blogs. The readership is a mix of friends, bloggers, clients and students I lecture about blogging and social media. This leads to a mix of different topics, but not all are worth to be displayed on the home page.

      Reply

  7. WP Hue ) says: 6/23/2010

    It’s implemented in the WP Classipress theme navigation menu. It’s ultimately slick!

    Reply

  8. wpwired says: 7/13/2010

    is there any way to modify the code for tag cloud lists so that they can be displayed too in mulit columns

    Reply

  9. nik@technojourney says: 12/11/2010

    i use the category splitter in my website, works fine. thanks buddy.

    Reply

  10. Alexander ) says: 1/18/2011

    I think i found another script wich is much better. I think :p

    <?php
    $cats = explode("”,wp_list_categories(‘title_li=&echo=0&depth=1&style=none’));
    $cat_n = count($cats) – 1;
    for ($i=0;$i<$cat_n;$i++):
    if ($i<$cat_n/2):
    $cat_left = $cat_left.'’.$cats[$i].”;
    elseif ($i>=$cat_n/2):
    $cat_right = $cat_right.”.$cats[$i].”;
    endif;
    endfor;
    ?>

    Much easier to see what’s happening in this script.
    What you’re thinking?

    Reply

  11. Alexander ) says: 1/18/2011

    I come back to point something.
    My script is better for 2-3 columns, yours for >3 (for those who like 2 lines of code instead 20)

    Reply

  12. Josh N says: 1/30/2011

    I used this to split up the display of child pages on their respective parent pages – worked like a charm – thank you!

    See my modified code below:

    ID.’&echo=0′);
    // Split into array items
    $cat_array = explode(”,$get_cats);
    // Amount of categories (count of items in array)
    $results_total = count($cat_array);
    // How many categories to show per list (round up total divided by 3)
    $cats_per_list = ceil($results_total / 3);
    // Counter number for tagging onto each list
    $list_number = 1;
    // Set the category result counter to zero
    $result_number = 0;
    ?>

    <ul class="subcats" id="cat-col-“>

    <?php
    foreach($cat_array as $category) {
    $result_number++;

    if($result_number % $cats_per_list == 0) {
    $list_number++;
    echo $category.'

    ‘;

    }

    else {

    echo $category.”;

    }

    } ?>

    Reply

  13. Josh N says: 1/30/2011

    Cut off the top of my code:

    ID.’&echo=0′);
    // Split into array items

    Reply

  14. Josh N says: 1/30/2011

    Cut off the top of my code again – here it is minus the PHP call:

    // Grab the categories – top level only (depth=1)
    $get_cats = wp_list_pages(‘title_li=&child_of=’.$post->ID.’&echo=0′);
    // Split into array items

    Reply

  15. shane says: 2/1/2011

    is there a way to implement this with authors instead of categories?

    Sorry, i’m very new to this. Any help would be greatly appreciated!

    Reply

  16. jack says: 6/18/2011

    Great code and very usefull for a project I’m working on. Using get_categories instead of wp_list_categories, I was even able to make links inactive that don’t have posts yet.

    The only extra thing that would be a very nice addition is the adding of the first letter of the categories as a way of making the lists more readable. So, the adding of A, B, D etc above the categories with those starting letters. Could this be added to your code?

    Reply

  17. jack says: 6/18/2011

    Never mind. I found the solution already ;)

    Reply

  18. webveins.in ) says: 7/6/2011

    I found your article very helpful. Thanks for sharing it.

    Reply

  19. Cadar Marius says: 8/2/2011

    Thank you, i needed this for my footer because i have more then 30 categories !

    Reply

  20. Anonymous says: 8/17/2011

    Really handy thanks, tried to do something similar but was getting frustrated until saw this… echo=0 in one of the arguments within wp_list_categories.

    That was the real turning point for me as hadn’t noticed it on the api.

    Reply

  21. Chicago painter says: 11/9/2011

    Any help for people who don’t know how and where to change the code. I just wanted to sort my post in two categories and to have them in my main menu.

    Reply

  22. AkashArora ) says: 12/22/2011

    thanks for this post but can you tell me where did i need to add this code in order to show categories in columns

    Reply

  23. Wordpress Web Designer says: 1/13/2012

    Great post. Is there a way to just show the children of those categories (within columns)? Thanks in advance!

    Reply

  24. Silvina says: 2/21/2012

    How to show the number of posts in brackets beside the category?

    Reply

  25. Adriana says: 2/25/2012

    thanks for share!

    Reply

  26. sem calcinha says: 2/28/2012

    Adoro me mostrar peladinha na web cam

    Reply

  27. Mas Adi ) says: 4/1/2012

    Hi, thanks for the tutorial.
    I ask you, if I want to display a description of each category, what should I do?
    thank you

    Reply

    • cj says: 7/26/2012

      I worked it out but I would like to create a desciption as well. How can I do this?

      Reply

  28. Christian says: 5/9/2012

    I know this is an old tutorial, but I’m trying to do something similar except with my archives page, having them display in two columns of 10 each. Since the archives page shows posts, not category names, is there a similar way to do this? Thanks.

    Reply

  29. akasharora ) says: 5/18/2012

    Thank You for sharing this tutorial but would you tell me how I can show 2 column categories in my wordpress widgets sidebar.

    Reply

  30. cj says: 7/26/2012

    hi – I am a newbie to WP and was wondering where the code goes. Does it go in a php page or a widget and what is it called or do I made a new page template and added it in

    Reply

  31. priyanka says: 8/13/2012

    Wow..This is really awesome post.
    Thanks dude.. thank you so much..:)

    Reply

  32. deratizare dezinsectie says: 10/31/2012

    Oh my goodness! a wonderful post dude. Thanks Nevertheless My business is experiencing problem with ur rss . Don’t know why Not able to sign up for it. Possibly there is any person obtaining identical rss difficulty? Anyone who knows kindly respond. Thnkx

    Reply

  33. Denis says: 2/3/2013

    How do we show the number of posts in brackets next to each category?

    Reply

  34. IRFAN says: 2/22/2013

    Wondering to put this category to my sidebar. Would you help me how to make the wordpress original category widget into multiple column???

    Reply

  35. funbrain10 says: 4/13/2013

    hope you provide code for tags instead of categories. it will be greatly appreciated. in 5 column as well if you know. Thanks in advance.

    Reply

  36. Tuan Vo says: 6/12/2013

    It’s still too hard for newbie like me… Do you guys know any plugin can do it function?

    Reply

  37. aljuk says: 9/23/2013

    it’s very close to a perfect solution, but there’s a problem with the markup – it always outputs a redundant “ before the final “

    Reply

    • aljuk says: 9/23/2013

      … it always outputs a redundant close li tag before the final close ul tag.

      Reply

Current ye@r *