How To: Display Your WordPress Category List in Multiple Columns
Franky Branckaute wrote this post on January 15th, 2010 in
11 Comments
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_.
Where can I find a link to create the posts in columns on category or archive.php instead only category list to display?
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.
Good one!
Definitely useful if a theme design uses a “Mega Dropdown” style nav, nice work.
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.”;
}
} ?>
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?
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
In line 3 for
$get_catsyou should be able to use all parameters available for wp_list_categories, also exclude.It’s implemented in the WP Classipress theme navigation menu. It’s ultimately slick!
is there any way to modify the code for tag cloud lists so that they can be displayed too in mulit columns