David Walsh recently posted \”Get WordPress Post Categories\”, where he talked about using the wordpress get_categories() function to create a two column list of his categories in his theme.
I offer a slightly different approach using an unordered list. Here\’s the code:
\'post\',\'child_of\' => 0,\'orderby\' => \'name\',\'order\' => \'ASC\',\'hide_empty\' => true));
$category_count = 0; $category_col = 1;
foreach($categories as $catty)
{
$category_count++;
${\'category_list_\'.$category_col}[] = array(\'name\'=>$catty->cat_name,\'url\'=>$catty->category_nicename);
if(floor($category_count) == (count($categories) / 2)) { $category_col = 2; }
}
//merge the two lists -Garrick
$category_list = array_merge($category_list_1, $category_list_2);
?>
- \',$item[\'name\'],\'\'; ?>
Notice that the difference is the array_merge() and unordered list.
Now, it wouldn\’t be complete with CSS, which would be something like the following:
.list_wrap {overflow:hidden; margin-left:-10px;}
.category_list {float:left; list-style:none; margin:0; padding:0; width:100%;}
.category_list li {border-bottom:1px solid #000; display:inline; float:left; margin:5px 0 5px 10px; padding:3px 0; width:195px;}
The .list_wrap style is a container so we can do a negative margin to shift things over. The ul and li both float left so that it won\’t have extra spacing that IE6 automatically adds. The li has a display:inline because it fixes the 3-pixel-bug in IE6 when an element is floated and has margin-left/right. Lastly, we have to adjust the li\’s width accordingly.
When doing the math, you\’ll notice that the li\’s width and margin-left x 2 columns = 410px. Now remember that .list_wrap has a margin-left:-10px so it fixes the additional 10px from the li\’s.
Check out the example page to get a better idea. The category list is contained in a box with borders to help you see it better.
I think using an unordered list makes semantic sense because, after all, you\’re listing links.
Garrick,
Could you share a quick edit to enable this same function but with specific categories hidden? I’m not sure if an “if” test just after the increment++ would do it, or if that would be terribly inefficient (checking for only a couple of categories to hide among a large list)
Thanks!
Eric
Also, do you know how you would modify this for tags?
I attempted to simply switch out “category” for “tag” and “categories” for “tags” and “catty” for “taggy” 🙂
It didn’t really work 🙁
@Eric, one of the parameters for the get_categories function is the exclude parameter, which takes the a comma-delimited string of category ID’s you can exclude. This way you won’t need to manually do it in php.
Check out more info and other parameters for get_categories here: http://codex.wordpress.org/Function_Reference/get_categories
As for doing something similar but with tags, you could use the wp_tag_cloud function. Check it out here: http://codex.wordpress.org/Template_Tags/wp_tag_cloud
I know at first glance it’ll look like it only prints out a tag cloud for you, but about have way through the documentation, there’s a format parameter that you can set to array to return an array, which is probably what you want in order to mimic what we’re doing here.
I hope this all helps.
Will the same work for a two column list applied to wp_tag_cloud()?
Thanks, helpful post!
@Cat: I’m not familiar with wp_tag_cloud(), but if wp_tag_cloud() returns an array, you could loop through the array and build a two column list.