I have been looking on stack overflow and the web but can't find a simple solution for this.

I just want to add a class to the of the widget sidebar generated by Wordpress.

This is my register sidebar code:

    register_sidebar( array(
    'name' => __(' Main Sidebar ', 'mystic'),
    'id' => 'sidebar-2',
    'class' => 'submenu',
    'description' => __( 'Main Sidebar', 'mystic' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h6>',
    'after_title' => '</h6>'
));

The html output of the actual unordered list is:

<ul>
    <li>
        <a href="http://localhost:8888/a-third-post/">A Third Post</a>
    </li>
    <li>
        <a href="http://localhost:8888/another-post/">Another Post</a>
    </li>
    <li>
        <a href="http://localhost:8888/news-article-title/">News Article Title</a>
    </li>
</ul>

But I want the ul to have a class of 'submenu'

So,

<ul class="submenu">
 <li>
  .....

Surely there has to be an easy way to do this?(without jQuery)

I have been looking on stack overflow and the web but can't find a simple solution for this.

I just want to add a class to the of the widget sidebar generated by Wordpress.

This is my register sidebar code:

    register_sidebar( array(
    'name' => __(' Main Sidebar ', 'mystic'),
    'id' => 'sidebar-2',
    'class' => 'submenu',
    'description' => __( 'Main Sidebar', 'mystic' ),
    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '<h6>',
    'after_title' => '</h6>'
));

The html output of the actual unordered list is:

<ul>
    <li>
        <a href="http://localhost:8888/a-third-post/">A Third Post</a>
    </li>
    <li>
        <a href="http://localhost:8888/another-post/">Another Post</a>
    </li>
    <li>
        <a href="http://localhost:8888/news-article-title/">News Article Title</a>
    </li>
</ul>

But I want the ul to have a class of 'submenu'

So,

<ul class="submenu">
 <li>
  .....

Surely there has to be an easy way to do this?(without jQuery)

• widgets
• sidebar
• register-sidebar

• The markup of the contents of a widget are determined by the widget, not the sidebar. register_sidebar() just lets you add a wrapper around widgets. So whether or not you can do this depends on the specific widget that you're using. What widget are you using here? – Jacob Peattie Commented Jul 12, 2019 at 7:59
• @JacobPeattie, ah. I am using Wordpress's built in "Recent Posts" widget – user8463989 Commented Jul 12, 2019 at 8:03
• In that case, no, there isn't a way. There's no filter for changing the markup of that widget. – Jacob Peattie Commented Jul 12, 2019 at 8:08
• @JacobPeattie I just found this snippet which seems to work. Is it any good? ob_start(); dynamic_sidebar('sidebar-2'); $sidebar = ob_get_contents(); ob_end_clean(); $sidebar_corrected_ul = str_replace("<ul>", '<ul class="submenu l_tinynav1">', $sidebar); echo $sidebar_corrected_ul; – user8463989 Commented Jul 12, 2019 at 8:14
• Personally? I'd consider it a hack. That code will apply your class to any <ul> element in any widget. But if it works, it works. – Jacob Peattie Commented Jul 12, 2019 at 8:33

1 Answer 1

In functions.php file :

add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
    /* Register the 'primary' sidebar. */
    register_sidebar(
        array(
            'id'            => 'sidebar-2',
            'name'          => __( 'Main Sidebar', 'mystic' ),
            'description'   => __( 'A short description of the sidebar.', 'mystic' ),
            'before_widget' => '<div id="%1$s" class="widget %2$s">',
            'after_widget'  => '</div>',
            'before_title'  => '<h3 class="widget-title">',
            'after_title'   => '</h3>',
        )
    );
    /* Repeat register_sidebar() code for additional sidebars. */
}

In sidebar.php :

<?php
if ( is_active_sidebar( 'sidebar-2' ) ) { ?>
    <ul class="submenu">
        <?php dynamic_sidebar( 'sidebar-2' ); ?>
    </ul>
<?php }
?>

EDIT
If you are looking to modify the output of Recent Posts Widget,
you can use this Extend Recent Posts Class ;)
All you have to do is to modify it as you want :)

SYA :)