WordPress.org

Ready to get started?Download WordPress

Forums

2 or 3 column categories in sidebar (39 posts)

  1. polle001
    Member
    Posted 5 years ago #

    Hi.

    Can anyone point me please to a plugin or hack that actually works in having 2 or 3 categories columns in the sidebar ?

    Thanks.

  2. iridiax
    Member
    Posted 5 years ago #

    You could use multiple, customized wp_list_categories.

  3. polle001
    Member
    Posted 5 years ago #

    Thanks iridiax, but I dont see any parameter for dividing them in columns.

    Category 1 Category 6
    Category 2 Category 7
    Category 3 Category 8
    Category 4 Category 9
    Category 5 Category 10

    Something like that.

    Can you share how can it be done please ?

    Thanks.

  4. polle001
    Member
    Posted 5 years ago #

    Bump !

  5. alainS
    Member
    Posted 5 years ago #

    As iridiax said. Try using two wp_list_categories with custom parameters. First with included categories 1,2,3,4,5 and second with 6,7,8,9,10. Ok...it's not an automatic solution but it does what you want. Hmm i think I saw on some blog a plugin to make it automatic but really don't remember where...hmm try this: http://www.dagondesign.com/articles/multi-column-category-list-plugin-for-wordpress/

  6. polle001
    Member
    Posted 5 years ago #

    Thanks alainS, actually I tried that, but did not work in WP 2.7, so I am looking for a good solution and automatic.

    Anyone ?

    Thanks.

  7. btdoyle
    Member
    Posted 5 years ago #

    this should work:

    <?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>

    It will automatically split your categories in half

  8. alainS
    Member
    Posted 5 years ago #

    Great! Thanks btdoyle.

  9. funkboybilly
    Member
    Posted 5 years ago #

    RE: btdoyle

    I've been using that code, but trying to break it up into 4 columns. Anything greater than 2 columns doesn't work properly.

    <?php
    				$cats = explode("<br />",wp_list_categories('title_li=&echo=0&depth=1&style=none'));
    				$cat_n = count($cats) - 1;
    				for ($i=0;$i<$cat_n;$i++):
    				if ($i<$cat_n/4):
    				$cat_one = $cat_one.'<li>'.$cats[$i].'</li>';
    				elseif ($i>=$cat_n/4 && $i<($cat_n/4)*2):
    				$cat_two = $cat_two.'<li>'.$cats[$i].'</li>';
    				elseif ($i>=($cat_n/4)*2 && $i<($cat_n/4)*3):
    				$cat_three = $cat_three.'<li>'.$cats[$i].'</li>';
    				elseif ($i>=($cat_n/4)*3):
    				$cat_four = $cat_four.'<li>'.$cats[$i].'</li>';
    				endif;
    				endfor;
    			?>
    			<ul class="clientsCol"><?php echo $cat_one;?></ul>
    			<ul class="clientsCol"><?php echo $cat_two;?></ul>
                <ul class="clientsCol"><?php echo $cat_three;?></ul>
                <ul class="clientsCol"><?php echo $cat_four;?></ul>
  10. jzone
    Member
    Posted 5 years ago #

    This sounds like exactly the code I need but - here is a stupid question - in what file does the code get edited? I know... I know... doh!

  11. Nicolas Messer
    Member
    Posted 5 years ago #

    @funkboybilly - what do you mean by not working properly? This heavily depends on the number of entries you have in your categories. For example if you have 10 categories on your blog, a split in 4 will output a first line with 3, a second line with 2, a third line with 3 and a forth line with 2 categories.

  12. levi88
    Member
    Posted 4 years ago #

    @funkboybilly: The problem is with your ul php code.
    <ul class="clientsCol"><?php echo $cat_one;?></ul>
    should be
    <ul class="clientsCol"><?php echo $cat_one; ?></ul>
    Note the space between "$cat_one;" and "?>". This applies to the other three columns. :)

  13. Mark / t31os
    Moderator
    Posted 4 years ago #

    If you stick to keeping the WP generated elements you be able to control the list a bit more.

    As long as you're only showing top-level categories, without children, the following should work fine.. ( i imagine it will mess up with a hierarchal type display of cats )

    <?php
    $get_cats = wp_list_categories( 'echo=0&title_li=&depth=1&hide_empty=0' );
    // Get cats 
    
    $cat_array = explode('</li>',$get_cats);
    // Split into array items
    
    $columns = 4;
    // How many columns (virtual)
    
    $cats_shown = 0;
    // Don't touch this, this is just a counter (used below)
    
    echo '<ul style="display:inline;">';
    
    foreach($cat_array as $category) {
    	$cats_shown++;
    
    	// The 2 lines below can be removed if you apply the style definitions to the classes (ie. cat-item, cat-item a etc..)
    	// This was just quicker and easier for me to use whilst testing the code.
    	$category = str_replace('<li','<li style="display:inline"',$category);
    	$category = str_replace('<a href','<a style="width:160px;display:block;float:left" href',$category);
    
    	if($cats_shown % $columns == 0) {
    		// If the counter is a multiple of the columns to show
    		print $category.'</li></ul><br /><ul style="display:inline;">';
    	}
    	else {
    		// Else just a regular item
    		print $category.'</li>';
    	}
    }
    echo '</ul>';
    ?>

    NOTE: I have used inline styling simply while i was testing. However since i've left WordPress to generate the list elements the classes to style the elements are available, so it can be totally done away with if you apply the style defs directly in your CSS instead.

    display:inline is supported across browsers, but i'm not sure about widths of anchor(link) elements, so it may require a little tweaking..

    Without CSS (inline or in the style.css) the code above will simply do..

    [post]
    [post]
    [post]
    [post]
    
    [post]
    [post]
    [post]
    [post]

    The key here was setting each list to display inline, then they end up like this..

    [post] [post] [post] [post] 
    
    [post] [post] [post] [post]

    In order to get a fixed width (which you need to make the list columns match each other) i applied the width to the link element.

    At least this way you retain all the WordPress style classes etc...

    Hope that helps...

  14. karl.wills
    Member
    Posted 4 years ago #

    thanks for that t31os_

    I used your code on my website and it worked great...

    one thing though, each list only displays 3 categories. I am looking for a 3 column list that each will hold 15 categories, could you please advise how this could be done? I am looking at displaying the categories as part of a directory website.

    Thanks for your help

  15. Mark / t31os
    Moderator
    Posted 4 years ago #

    Code above shows for 4 categories per row (so like 4 columns). There's a variable, right near the top..

    $columns = 4;
    // How many columns (virtual)

    Set to 3, and it'll work for 3 columns.

    [cat][cat][cat]
    [cat][cat][cat]
    [cat][cat][cat]
    [cat][cat][cat]
    [cat][cat][cat]

    and so on, until it runs out of cats to list...

    If you want 5 across, 3 down (opposite to above - 15 total), then set the variable to 5.

    As long as you adjust the width set on the link elements to accomodate the room on the page then you can use any value you like there.

  16. karl.wills
    Member
    Posted 4 years ago #

    Thanks for that,

    I changed it like you said and it still seems to do the same thing. I have uploaded a screenshot to show you how it looks with your code: screenshot and here is how i am trying to get my code to look: result

    Is there anything i could change to make it look like that?

    Thanks

  17. Mark / t31os
    Moderator
    Posted 4 years ago #

    It's all in the CSS, get rid of the display:inline, set a float on each UL element (apply width - should do for floated elements), set columns (which will now act as rows) to something like 10 or 15 (however many you want to list downwards before a new list), and that should do it..

    If you want to divide the total results evenly across 3 columns (automagically) i'll need to modify the above code to suit what you want better.

    Remember, lists go downward, so just get rid of all the CSS stuff, then start with floating each list (UL tag) next to each other... and work from there...

    I can help further if need be...

  18. karl.wills
    Member
    Posted 4 years ago #

    Thanks again for your help, its much appreciated...

    If you want to divide the total results evenly across 3 columns (automagically) i'll need to modify the above code to suit what you want better.

    That is exactly what i am looking for... is this easy to implement?

    The result that i shown in the screenshot has the

      floated and a set width added to it.
  19. Mark / t31os
    Moderator
    Posted 4 years ago #

    Try this...

    <?php
    // Grab the categories - top level only (depth=1)
    $get_cats = wp_list_categories( 'echo=0&title_li=&depth=1&hide_empty=0' );
    // Split into array items
    $cat_array = explode('</li>',$get_cats);
    // Amount of categories (count of items in array)
    $results_total = count($get_cats);
    // How many categories to show per list (round up total divided by 3)
    $cats_per_list = ceil($results_total / 3);
    // Counter number for tagging onto each list
    $list_number = 1;
    // Set the category result counter to zero
    $result_number = 0;
    ?>
    <ul class="cat_col" id="cat-col-<?php echo $list_number; ?>">
    <?php
    foreach($cat_array as $category) {
    	$result_number++;
    
    	if($result_number == $cats_per_list) {
    		$list_number++;
    		echo $category.'</li>
    		</ul>
    		<ul class="cat_col" id="cat-col-'.$list_number.'">';
    	}
    	else {
    		echo $category.'</li>';
    	}
    }
    ?>
    </ul>
    <!--
    /* All UL elements */
    .cat_col {
    	width:200px;
    	float:left;
    	display:block;
    	padding:0;
    	margin:0 5px 0 0;
    	overflow:hidden;
    }
    	/* All LI elements */
    	.cat_col li {
    		clear:left;
    		display:block;
    		padding:8px;
    		margin:1px 0 0 0;
    		width:200px;
    	}
    
    #cat-col-1 {
    	/* CSS for first list only */
    }
    #cat-col-2 {
    	/* CSS for second list only */
    }
    #cat-col-3 {
    	/* CSS for third list only */
    }
    -->

    The commented section at the bottom is some example CSS.

  20. karl.wills
    Member
    Posted 4 years ago #

    many thanks for that.

    The list now seems to have gone into 2 columns, with the first column only showing 1 category and the second holding the rest (around 20 or so categories.) there seems to be no third column....

    I had a look at the code in firebug and no 3rd column seems to be generated by the code.

    Sorry for the hassle!

  21. Mark / t31os
    Moderator
    Posted 4 years ago #

    Hold on i'll test it... :) Just need to make some more categoies..

  22. Mark / t31os
    Moderator
    Posted 4 years ago #

    Ok yes, spotted the mistake (plus another).

    <?php
    // Grab the categories - top level only (depth=1)
    $get_cats = wp_list_categories( 'echo=0&title_li=&depth=1&hide_empty=0' );
    // 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 3)
    $cats_per_list = ceil($results_total / 3);
    // Counter number for tagging onto each list
    $list_number = 1;
    // Set the category result counter to zero
    $result_number = 0;
    ?>
    <ul class="cat_col" 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="cat_col" id="cat-col-'.$list_number.'">';
    	}
    	else {
    		echo $category.'</li>';
    	}
    }
    ?>
    </ul>
    <!--
    /* All UL elements */
    .cat_col {
    	width:200px;
    	float:left;
    	display:block;
    	padding:0;
    	margin:0 5px 0 0;
    	overflow:hidden;
    }
    	/* All LI elements */
    	.cat_col li {
    		clear:left;
    		display:block;
    		padding:8px;
    		margin:1px 0 0 0;
    		width:200px;
    	}
    
    #cat-col-1 {
    	/* CSS for first list only */
    }
    #cat-col-2 {
    	/* CSS for second list only */
    }
    #cat-col-3 {
    	/* CSS for third list only */
    }
    -->

    Should work as expected now.. :)

  23. muzixuanboy
    Member
    Posted 4 years ago #

    @funkboybilly: The problem is with your ul php code.
    <ul class="clientsCol"><?php echo $cat_one;?>
    should be
    <ul class="clientsCol"><?php echo $cat_one; ?>
    Note the space between "$cat_one;" and "?>". This applies to the other three columns. :)

  24. Mark / t31os
    Moderator
    Posted 4 years ago #

    Actually it's generally fine to do that without a space.. I very much doubt that will resolve the issue..

    The ; is the terminator for that line of code, so whether there's a space before the closing PHP ?> , or not shouldn't matter in the slightest..

  25. karl.wills
    Member
    Posted 4 years ago #

    Ok yes, spotted the mistake (plus another).

    <?php
    // Grab the categories - top level only (depth=1)
    $get_cats = wp_list_categories( 'echo=0&title_li=&depth=1&hide_empty=0' );
    // Split into array items
    $cat_array = explode('',$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 3)
    $cats_per_list = ceil($results_total / 3);
    // Counter number for tagging onto each list
    $list_number = 1;
    // Set the category result counter to zero
    $result_number = 0;
    ?>
    <ul class="cat_col" 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.'

    <ul class="cat_col" id="cat-col-'.$list_number.'">';
    }
    else {
    echo $category.'';
    }
    }
    ?>

    <!--
    /* All UL elements */
    .cat_col {
    width:200px;
    float:left;
    display:block;
    padding:0;
    margin:0 5px 0 0;
    overflow:hidden;
    }
    /* All LI elements */
    .cat_col li {
    clear:left;
    display:block;
    padding:8px;
    margin:1px 0 0 0;
    width:200px;
    }

    #cat-col-1 {
    /* CSS for first list only */
    }
    #cat-col-2 {
    /* CSS for second list only */
    }
    #cat-col-3 {
    /* CSS for third list only */
    }
    -->

    Should work as expected now.. :)

    Brilliant, works perfectly!

    Thank you very much for your help, I wouldn't have been able to do what you have done and am very grateful to people like you who take the time to help others. Thanks again

  26. karl.wills
    Member
    Posted 4 years ago #

    sorry to bother you again,

    is there any way i could manipulate the above code to display latest posts added in 2 columns?

    Im trying to learn PHP at the moment but am having some difficulty understanding it all. I can grasp the basics but i think this is a little bit out of my depth!

    Thanks

  27. Mark / t31os
    Moderator
    Posted 4 years ago #

    Sure you can..

    Change.

    $cats_per_list = ceil($results_total / 3);

    for.

    $cats_per_list = ceil($results_total / 2);

    Ceil is just a rounding up function, the slash is to "divide by"..

  28. karl.wills
    Member
    Posted 4 years ago #

    thanks, is that to display the posts? or is there something else i would need to change also?

    Thanks again.

  29. Mark / t31os
    Moderator
    Posted 4 years ago #

    That's how many list elements are used...

    We work out how many lists to make by dividing the total amount of categories by 2, or 3, or whatever numeric value you place after the / in the line of code mentioned above...

    So if we wanted to use 4 lists, we update that line to..

    $cats_per_list = ceil($results_total / 4);

    $results_total is the amount of categories found
    / divides that total by 2, 3, 4 or whatever we place there (so 4 in this example)

    The number is rounded up so the first lists are given more posts then the last ones if the value divided by 2 (3 or 4 or whatever) doesn't equal a valid amount, like (for example) 6.333333, and so on... If the total is divisible equally then the lists will have equal amounts of categories listed in them, else the last list is given less items (looks better on the page).

  30. Mark / t31os
    Moderator
    Posted 4 years ago #

    Oh sorry i see you were asking about posts.

    You need different code for posts..

    If you do a search for "posts columns" (not too general or too specific) you should find any number of threads that have covered splitting posts across columns.. i know i've at least answered such questions a couple of times.

    Save me re-writing code i've already given answers to before... ;)

    If you have trouble finding a thread that covers what you want, post back and i'll have see if i dig one up for you... (you could also look through my profile page - you should eventually find a related thread).

Topic Closed

This topic has been closed to new replies.

About this Topic