WordPress.org

Ready to get started?Download WordPress

Forums

Format category list (4 posts)

  1. chugs
    Member
    Posted 6 years ago #

    I am using wp_list_categories to show the categories but I want them formatted in a certain way as shown below.
    The odd/even class and the spans are important as I want an alternating background color.

    <ul>
    <li class="odd"><span><a href="" title="">Parent category</a>
    <ul class="clearfix">
    
    <li><a href="" title="">Child category</a></li>
    <li><a href="" title="">Child category</a></li>
    </ul>
    </span>
    
    <li><span><a href="" title="">Parent category</a>
    <ul class="clearfix">
    </li>
    <li><a href="" title="">Child category</a></li>
    <li><a href="" title="">Child category</a></li>
    </span>

    Any way I can go about this? (As a last resort, is this possible by hacking the "category-template" file?)

  2. Kafkaesqui

    Posted 6 years ago #

    Your inserted tags *may* be important, but the way you've added the span tags in the list above would make the list invalid.

    Here's a bit of code that works off wp_list_categories(). It will modify the default 'cat-item' class, alternating between 'cat-item' and 'cat-item-odd' -- and should retain the appropriate class for (hierarchical) child categories:

    http://wordpress.pastebin.ca/913631

    I can only do limited testing but it seems to work. Feel free to play with it, insert your own tags/mods, etc...

  3. chugs
    Member
    Posted 6 years ago #

    Thanks. This works. But I do need the span tags, even if they add no semantic value. Any way you could accommodate them?

    And what do you mean when you say that the span tags make the list "invalid"?

  4. Kafkaesqui

    Posted 6 years ago #

    "And what do you mean when you say that the span tags make the list "invalid"?"

    Looking at what you have above, the span tags *span* several li and a closing ul, when they should only be opened and closed in the tag they're currently nested in. It's for the same reason you can't do:

    <p><span>Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit.</p>
    <p>Donec fringilla congue augue.</p>
    </span>

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.