Hi,
Refer this article:
http://codex.wordpress.org/Template_Tags/wp_list_categories
Also check with this code:
<?php
$cats = explode("",wp_list_categories('title_li=&echo=0&depth=0&style=none&hierarchical=1'));
$cat_n = count($cats) - 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>
<ul class="left">
<?php echo $cat_left;?>
</ul>
<ul class="right">
<?php echo $cat_right;?>
</ul>
Thanks,
Shane G.
when i plug that in I get this as the output:
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a></li>
<li><a href="#">Category 4</a></li>
<ul class="left"> </ul>
<ul class="right"> </ul>
It doesn’t wrap it correctly. What am I doing wrong?
I’m using this code:
<?php
$cats = explode("",wp_list_categories('title_li=&echo=1&depth=0&style=list&hierarchical=1&show_count=1'));
$cat_n = count($cats) - 1;
for ($i=0;$i<$cat_n;$i++):
if ($i<$cat_n/2):
$cat_left = $cat_left.'<li>'.$cats[$i].'</li>';
elseif ($i>=$cat_n/2):
$cat_right = $cat_right.'<li>'.$cats[$i].'</li>';
endif;
endfor;
?>
<ul class="left">
<?php echo $cat_left;?>
</ul>
<ul class="right">
<?php echo $cat_right;?>
</ul>
Try just using:
<ul class="cat-list">
<?php wp_list_categories('title_li=&hierarchical =0');?>
</ul>
Then, in your stylesheet, use something like
.catlist li {
width:50%;
float:left;}
You may need to reduce the % width for your theme but the overall approach should work.
instead of all the cat_left and cat_right code?
here is my whole sidebar code, is it correct?
<div id="right-content">
<div class="widgets">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php include( TEMPLATEPATH . '/ad_space.php' ); ?>
<h4>Categories</h4>
<ul class="cat-list">
<?php wp_list_categories('title_li=&hierarchical =0');?>
</ul>
<?php endif; ?>
</div>
</div>
It still doesn’t display in two columns.
You need to add the all important CSS above to your stylesheet.
… typo there, no wonder it’s not working
.catlist li { ...
should be
.cat-list li { ...
Thanks, I think i’ve got this running the way I want.
Another question about the ul element with the following simple code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>test</title>
<style>
ul {
background-color:red;
}
ul li {
float:left;
width:50%;
}
</style>
</head>
<body>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
</ul>
</body>
</html>
why isn’t the background of ‘ul’ red? What does one do to keep it red?
its because the ‘li’ is float
try to wrap the list inside a ‘div’ and set the ‘clear’ property of the div to ‘both’
This is a good solution, but still a compromise.
I firstly used the explode method at the top of the page. This was really good, and very neat, BUT it put parent and child categories on the same level (visually).
I then used the
.catlist li {
width:50%;
float:left;}
method. This also works well, but this time, although I have hierarchical links which appear to be in 2 columns – because technically they are not in 2 actual columns as per the first method, they also do not display exactly right either.
If, for example, I have :
Parent 1 will appear in the left faux column, 2 in the right, and 3 in the left again. However, Parent 3 will display after the bottom of 2, so on the left there will appear to be a big vertical gap between 1 and 3.
So, this method only really works if you have a fairly even amount of child cats to each parent.
The best solution would be the first explode method, with hierarchical display of the links. Is this possible though? Or do you have to decide which compromise to take…..ie:
2 columns, but all links displaying as if parents
or
hierarchical links that are really in faux columns and may have big gaps between the vertical heights (visually).
Not sure if that makes sense – difficult to explain. I really hope there is an answer to get the best of both methods though?
