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

1 Views

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:

Read More
<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>?

Post Views: 1

Related posts

Leave a Reply

11 comments

  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.

  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.

  4. I played around with it and this works for me.

    function create_widget( $name, $id, $class, $description ) {
    register_sidebar(array(
        'name' => __( $name ),
        'id' => $id,
        'class' => $class,
        'description' => __( $description ),
        'before_widget' => '<div ' . 'class ='. $class . '>',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>'
    ));

create_widget( 'widget name', 'myID', 'myClass', 'my description' );

  5. The parameter you are looking for is 'class' => ''

    For you, you need:

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

    That should work.

  6. There is a native solution to add the individual widget names as className using sprintf to their container:

    %1$s represents the id and %2$s the widgets className

    There is no need to add the className directly to the <ul> because of this possible selector(jQuery/CSS):

    .widget_nav-list > ul (.widget_nav_menu > ul)

    also note that the answered jQuery code targets all widgets in all sidebars, even if they are no nav-list (what can be OK if your only used widget is a nav).

    before_widget – HTML to place before every widget(default: <li id="%1$s" class="widget %2$s">) Note: uses sprintf for variable substitution

    Reference on wordpress.org

    functions.php:

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

    Output for a default navigation widget:

    <div id="nav_menu-1" class="well widget_nav_menu">
  <h4>title</h4>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

    i am posting at this old thread because it was a top search result for the search term “register_sidebar widgetname” – so i thought having an complete answer is good here.

  7. Use custom WordPress widget: (No need for jQuery or any Plugin!!)

    My steps will go through with categories widget and you can do the same for any widget.

    1. Register Widget (in functions.php)
        add_action('widgets_init', 'register_widgets');
    function register_widgets($id) {
      register_sidebar(array(
        'name' => 'Sidebar',
        'id'  => 'sidebar'
      ));
    }
    1. Register Custom Widget (in functions.php)
        add_action('widgets_init', 'register_custom_widget');
    function register_custom_widget() {
      register_widget('WP_Widget_Categories_Custom');
    }

    1. Copy file class-wp-widget-categories.php from /wp-includes/widgets/ and put it beside your theme files /wp-content/themes/-your theme-/widgets/

    2. Include this file in functions.php

      require_once('widgets/class-wp-widget-categories.php');

    3. Rename class name from “WP_Widget_Categories” to “WP_Widget_Categories_Custom” in “widgets/class-wp-widget-categories.php” file.

      class WP_Widget_Categories_Custom extends WP_Widget {

    4. Search about ul tag in “widgets/class-wp-widget-categories.php” file and edit it like

      <ul class="nav nav-list">

    That is all 😉

  8. This would replace all opening ul tags and li tags: 

    <?php 

  if(function_exists('dynamic_sidebar')) {

    ob_start();
    dynamic_sidebar('news-sidebar');
    $news_sidebar = ob_get_contents();
    ob_end_clean();
    $news_sidebar_corrected_ul_and_li = str_replace('<ul>', '<ul class="list-group mb-20">', str_replace('<li>', '<li class="list-group-item rounded-0">', $news_sidebar));
    echo $news_sidebar_corrected_ul_and_li;
  } 

?>

    To Avoid conflicts with unwantend replacement i would recomment tu not use ul and li inside
    ‘before_widget’and ‘before_title’ like: 

    register_sidebar( array(
  'name'          => __( 'news-sidebar'),
  'id'            => 'news-sidebar',
  'description'   => '',
  'class'         => 'card-body border-bottom px-0 px-md-20',
  'before_widget' => '<div id="%1$s" class="w-100 widget-%2$s">',
  'after_widget'  => '</div>' ,
  'before_title'  => '<div class="card-header p-10 p-md-20 h5 bg-light">',
  'after_title'   => '</div>'  
)) ;

  9. in function.php

     register_sidebar( array(
                "id" => "contactform",
                "name" => "lorm text",
                "description" => "lorm text",
                "before_widget" => "",
                "after_widget" => "",
            ));

in .php file

     

      <div class="feature_h">
                <?php if(is_active_sidebar( 'contactform' )) 
                    dynamic_sidebar( 'contactform' );
                ?>   
            </div>

in .js file

    jQuery( document ).ready(function() {
        jQuery('.feature_h > h2').addClass('mb-3 text-white');
    });