Wordpress How to add class to <ul> of sidebar widget

Question

This is how I register the sidebar:

register_sidebar(array(
    'name' => 'First_sidebar',
    'id' => 'sidebar-1',
    'before_widget' => '<div class="well">',
    'after_widget' => '</div>',
    'before_title' => '<h4>',
    'after_title' => '</h4>'
));

and this is the HTML WordPress output:

<div class="well">
<h4>title</h4>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>

I want to add a class attribute to the <ul> tag.
Like this:

<div class="well">
    <h4>title</h4>
    <ul class="nav nav-list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    </ul>
</div>

How do I add the class attribute to <ul>?

Answer 1

The simple, but not so nice and more of a hack, is using Javascript/jQuery.

jQuery( document ).ready(function() {
    jQuery('.widget > ul').addClass('nav nav-list');
});

I really dislike using javascript, but it does the job in this case.

Answer 2

I managed to do it this way:

Sidebar.php:

<!-- sidebar -->
<aside class="sidebar" role="complementary">

<div class="sidebar-widget">
  <?php if(function_exists('dynamic_sidebar')) {

    ob_start();
    dynamic_sidebar('widget-area-1');
    $sidebar = ob_get_contents();
    ob_end_clean();

    $sidebar_corrected_ul = str_replace("<ul>", '<ul class="menu vertical">', $sidebar);

    echo $sidebar_corrected_ul;
    } 

  ?>
</div>

</aside>
<!-- /sidebar -->

I used output buffering to save the sidebar widgets into a variable and then used string replace to find all <ul> tags and replace them with the <ul> tag with the class.