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]<?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;
?>
[/php]
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.
[php]
<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>[/php]
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_.