0

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)

5
  • 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? Jul 12, 2019 at 7:59
  • @JacobPeattie, ah. I am using Wordpress's built in "Recent Posts" widget 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. 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; 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. Jul 12, 2019 at 8:33

1 Answer 1

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 :)

6
  • Thanks, that almost works. But it is added the <ul> above the <h3> and making things look weird Jul 12, 2019 at 8:12
  • The <ul class="submenu"> is now wrapping the sidebar, this is what you asked for. Isn't it ? Remaining modifications are just CSS...
    – LebCit
    Jul 12, 2019 at 8:17
  • Want it to look like this: <h6>Latest news</h6><ul class="submenu"> <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> Jul 12, 2019 at 8:20
  • So you only want to target the ul of recent posts ?
    – LebCit
    Jul 12, 2019 at 8:21
  • 1
    Take a look at the EDIT part :) Don't forget to accept the answer when it works for you :)
    – LebCit
    Jul 12, 2019 at 8:32

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.