WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] putting categories in two columns (12 posts)

  1. magicfun1
    Member
    Posted 4 years ago #

    Hi, just wondering what it would take to put my categories in two column lists like the following:

    Category A Category B
    Category C Category D

  2. Shane G
    Member
    Posted 4 years ago #

    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.

  3. magicfun1
    Member
    Posted 4 years ago #

    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>
  4. esmi
    Forum Moderator
    Posted 4 years ago #

    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.

  5. magicfun1
    Member
    Posted 4 years ago #

    instead of all the cat_left and cat_right code?

  6. magicfun1
    Member
    Posted 4 years ago #

    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.

  7. esmi
    Forum Moderator
    Posted 4 years ago #

    You need to add the all important CSS above to your stylesheet.

  8. Arie Putranto
    Member
    Posted 4 years ago #

    ... typo there, no wonder it's not working

    .catlist li { ...

    should be

    .cat-list li { ...

  9. magicfun1
    Member
    Posted 4 years ago #

    Thanks, I think i've got this running the way I want.

  10. magicfun1
    Member
    Posted 4 years ago #

    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?

  11. Arie Putranto
    Member
    Posted 4 years ago #

    its because the 'li' is float
    try to wrap the list inside a 'div' and set the 'clear' property of the div to 'both'

  12. Sophiehound
    Member
    Posted 4 years ago #

    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
    • Parent 2
      • Child
      • Child
      • Child
    • Parent 3

    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?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags