6

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

3
  • Can't you just modify the sidebar.php?
    – Paulo Bu
    Jun 2, 2013 at 16:54
  • 1
    I use dynamic_sidebar function
    – Qing
    Jun 2, 2013 at 17:25
  • Same issue here since I wanted to add BS nav class to the ul. I edited /wp-includes/nav-menu-template.php Modify the $defaults array inside of function wp_nav_menu()... add the markup you require to 'items_wrap'. Hacky but a start. WP 4.7.2 Feb 2, 2017 at 7:19

11 Answers 11

5

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.

1
3

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.

1

Use Less:

.widget ul {
    .nav;
    .nav-pills;
    .nav-stacked;
}

it worked for me ;)

0
1

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' );
1
  • 1
    you should also add few lines of description to explain your logic/code Jun 14, 2015 at 4:54
0

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.

10
  • hey, can you post your code here so i could take a look? Mar 11, 2014 at 9:22
  • I have exactly this problem
    – toto_tico
    Mar 11, 2014 at 9:25
  • the (doc)[codex.wordpress.org/Function_Reference/register_sidebar] says: class - CSS class name to assign to the widget HTML (default: empty).
    – toto_tico
    Mar 11, 2014 at 9:27
  • the 'class' property adds the class to the entire sidebar, not to the widget's ul. you should use 'before_widget' to place the div with a class name and then with the css go to it as: .className ul{ /* properties */ } Mar 11, 2014 at 9:36
  • 1
    well it used to work... any way you can still use the before_widget to write the div wrapper with the class you want and then go .class_name ul{ /* css code */} Feb 8, 2015 at 3:25
0

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.

0

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

0

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>'  
)) ;
0
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');
    });
-1

I was struggling against this problem and I discovered that you can use this plugin: http://wordpress.org/plugins/wp-bootstrap-navmenu

-2

you can use a plugin that called widget-css-class WordPress directory

after that you will be able to add custom css class to any widgets that you need.

1
  • Installing an entire plugin for such a small feature will quickly bloat your environment. Also this plugin seems it allows you the option within the WP-Admin, it seems the OP is looking to handle this within .php template files. Nov 1, 2017 at 2:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.