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)

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

  • Thanks, that almost works. But it is added the <ul> above the <h3> and making things look weird – user8463989 Jul 12 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 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> – user8463989 Jul 12 at 8:20
  • So you only want to target the ul of recent posts ? – LebCit Jul 12 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 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.