Add class to Categories Widget

Question

I have a few default widgets which I am using in a custom sidebar and I'd like to edit its output in my functions.php file.

Currently the categories widget and blogrolls are generating an unordered list of links as such:

<ul>
<li class="cat-item cat-item-1">
<a href="http://localhost:8888/?cat=1">Uncategorized</a>
</li>
</ul>

I would like to somehow pass a class name into the unordered list itself to something along the lines of:

<ul class="test">...</ul>

I am just learning about using filters within the functions.php file and figured this was how I need to go about it but don't really know how.. Is this possible? How could I find out how to do something like this?

-- Bruno

Answer 1

Here is a little jQuery snippet I made that should do what you want it to do (this just works for the category widget):

// JavaScript Document
$j = jQuery.noConflict();
$j(document).ready(function(){
    $j('li.cat-item-1').parent().addClass('test');
});

If you wanted to do this to all widgets, well it depends on the parent element of the widgets. Let's say there's a <div class="widget"></div> wrapping each widget. You could do this to add the class to immediate child <ul>'s of all widgets:

// JavaScript Document
$j = jQuery.noConflict();
$j(document).ready(function(){
    $j('.widget > ul').addClass('test');
});

However with PHP, that's a different story.

Answer 2

The default categories widget does not have any filter to add classes to <ul>, so you can use js to achieve this result, put the following code in your functions.php

add_action('wp_footer', 'wpse39693_add_custom_js', 99);
function wpse39693_add_custom_js() {
?>
jQuery(document).ready(function($) {
    jQuery('.widget_categories > ul').addClass('test');
});
<?php
}

As you said you don't want to use js for this purpose, then I am assuming you want to add the class so you can add some styles to the ul element from your css, in that case you can target ul element from your css like following:

.widget_categories > ul {
    list-style: none;
}

The other option for you is that you can create a custom categories widget, you can extend from default category widget and modify the output.

Answer 3

Could not find a php solution the js solution flickered on load just add the css yourself for the widget grab it from bootstrap and add to your css file.

/* widgets */
.widget ul {
  padding-left: 0;
  margin-bottom: 20px;
}
.widget ul li {
  position: relative;
  display: block;
  padding: 10px 15px;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.widget ul li:first-child {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.widget ul li:last-child {
  margin-bottom: 0;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}