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:

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

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

  • how you are generating the category drop down list? using wp_dropdown_categories or something else? or it is the default category widget? – HungryCoder Aug 11 '12 at 3:34

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();

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('.widget > ul').addClass('test');

However with PHP, that's a different story.

  • I would rather not use javascript for this as my browser requirements for the project have poor js rendering times. – ajames Jan 22 '12 at 0:57

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');

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.

  • I would rather not use javascript for this as my browser requirements for the project have poor js rendering times. – ajames Jan 22 '12 at 0:57
  • @Hameedullah, using .widget_categories > ul is just fine, except when you already got the class from another library, like bootstrap. – toto_tico Mar 11 '14 at 9:35
  • 1
    This seems a dirty solution and PHP functions would be better. -1 – TheBlackBenzKid Feb 10 '16 at 7:08

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.