Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
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
add comment

2 Answers

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.

share|improve this answer
    
I would rather not use javascript for this as my browser requirements for the project have poor js rendering times. –  Bruno Jan 22 '12 at 0:57
add comment

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.

share|improve this answer
    
I would rather not use javascript for this as my browser requirements for the project have poor js rendering times. –  Bruno 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 at 9:35
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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