Two columns with unordered lists
Posted on | October 17, 2008 | 5 Comments
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <?php /* BUILD THE CATEGORY LIST */ $categories = get_categories(array('type' => '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); ?> <div class="list_wrap"> <ul class="category_list"> <?php foreach($category_list as $category){ ?> <li><?php echo '<a href="/sugar/',$item['url'],'">',$item['name'],'</a>'; ?></li> <?php } ?> </ul> </div> |
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:
1 2 3 | .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.
Comments
5 Responses to “Two columns with unordered lists”
Leave a Reply
January 18th, 2009 @ 7:30 pm
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
January 18th, 2009 @ 7:53 pm
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
January 19th, 2009 @ 2:15 am
@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.
July 9th, 2010 @ 1:41 pm
Will the same work for a two column list applied to wp_tag_cloud()?
Thanks, helpful post!
August 12th, 2010 @ 11:08 pm
@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.