Format category list

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

Viewing 3 replies - 1 through 3 (of 3 total)

  • 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:

    https://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…

    Thread Starter chugs

    (@chugs)

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

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Format category list’ is closed to new replies.