Turning Category Lists into separate divs (5 posts)

  1. tobybowes
    Posted 4 years ago #

    Hello, I'm new here so hopefully I do nothing wrong when posting this (I've read the rules and searched already). I'm currently designing a wordpress template for my new site but i'm running it on localhost at the moment so I can't link to it.

    What I would like is on a certain template is to list the categories as a series of buttons using separate divs but after spending a long time searching I can't seem to get my head around it (if its possibly to do at all).

    Currently all I have is the basic code which just displays it as a list and separates them using the standard li tags.
    <?php wp_list_categories('show_count=1&child_of=10&show_count=0&depth=1&title_li='); ?>
    I'm not crazy so I do understand I've probably started the whole thing with the wrong tag (wp_list_categories), but I'm not sure of the correct alternative.

    I'm wanting the end result to be like this

    <div class="cat-button">CATEGORY 1</div>
    <div class="cat-button">CATEGORY 2</div>
    <div class="cat-button">CATEGORY 3</div>

    Also where it says child_of=10 I would prefer to call by the category slug.

    Any help or advice would be much appreciated.
    Thanks in advance

  2. Michael
    Forum Moderator
    Posted 4 years ago #


    <div class="cat-button">
    <?php $category_slug = 'whatever-category-slug';
    $parent = get_term_by('slug',$category_slug,'category')->term_id;
    echo str_replace("<br />","</div>\n<div class=\"cat-button\">",wp_list_categories('show_count=1&child_of='.$parent.'&show_count=0&depth=1&title_li=&style=none&echo=0')); ?>

    using the 'style' and 'echo' parameters: http://codex.wordpress.org/Template_Tags/wp_list_categories

    using get_term_by() to convert the slug into the category id;

  3. tobybowes
    Posted 4 years ago #

    That's great thanks, the only thing is it seems to create an one final empty div after its finished?

    To get a little more advanced is it possible to alternate the class? Ive done it previously with my posts using the something similar to the following code, but ive just tried implementing it on to this code and it doesn't work.

    <?php /* variable for alternating post styles */
    $altpostclass = 'left';
    <div class="cat-button <?php echo $altpostclass; ?>">POST FROM THE LOOP</div>
    <?php /* Changes every other post to a different class */
    if ('left' == $altpostclass) $altpostclass = 'right';
    else $altpostclass = 'left';

    It does do something though because in the source code it displays
    <div class="cat-button <?php echo left; ?>"></div>

    Thanks for your help, I cant believe how quickly I got a response!!

  4. Michael
    Forum Moderator
    Posted 4 years ago #

    you might be better off to work with get_categories() to make your own list;


    $category_slug = 'whatever-category-slug';
    $parent = get_term_by('slug',$category_slug,'category')->term_id;
      'child_of' => $parent,
      'depth' => 1
    $categories = get_categories($args);
    if( $categories ) foreach($categories as $category) {
    	$altpostclass = ($altpostclass=='left')?'right':'left';
        echo '<div class="cat-button '. $altpostclass . '"><a href="' . get_category_link( $category->term_id ) . '" ' . '>' . $category->name.'</a> </div> ';
  5. tobybowes
    Posted 4 years ago #

    Thanks that works perfect!

Topic Closed

This topic has been closed to new replies.

About this Topic