Change li class for Widgets

  • Hello,

    I converting an HTML/CSS layout into a WP theme and have ran into a little problem. The layout has a JQuery effect for list items in the sidebar that is triggered by an li class: <li class="feat" style="margin-left: 0px;">

    You can view the original layout here | Theme I’m coding here

    If you visit the above links, you will see my sidebar do not have the functionality as the above, the only part I’m missing is changing the li output from: <li class="cat-item cat-item-7"> to <li class="feat" style="margin-left: 0px;">

    Here is my functions.php code:

    if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Left Sidebar',
'before_widget' => '<ul id="featuresmenu">',
'after_widget' => '</ul>',
'before_title' => '<li><h3>',
'after_title' => '</h3></li>',
));

    Thanks in advance for your help

Viewing 3 replies - 1 through 3 (of 3 total)

  • Try this:

    if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Left Sidebar',
'before_widget' => '<ul id="featuresmenu">',
'after_widget' => '',
'before_title' => '<li class="feat"><h3>',
'after_title' => '</h3>',
));
    Thread Starter Josh M.

    (@ebiz_helper)

    Thanks for the reply,

    however that will only affect the widget title – I want to edit the actual list items generated inside the body of the Widget.

    Here is the layout html for the sidebar:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    If you notice the layout title is inside a list item, which I have set and it displays properly – my problem is that the generated output of the widget creates:

    [Code moderated as per the Forum Rules. Please use the pastebin]

    So – my problem is with the body <li class> not the title

    Please advise…

    if you want to do that for the category widget only, you could use a filter function.
    https://codex.www.ads-software.com/Plugin_API

    the category widget uses wp_list_categories() which uses the filter hook 'wp_list_categories':

    you would need to add some code like this to functions.php of your theme:

    add_filter('wp_list_categories', 'add_new_class_list_categories');
function add_new_class_list_categories($list) {

$list = str_replace('cat-item ', 'cat-item feat ', $list); 

return $list;
}

    this will add the new css class to each occurrence of ‘wp_list_categories()’, including the (horizontal) headermenu, if applicable.

    if you need this for all widgets, you need to find the filter hook for each widget (if available)

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Change li class for Widgets’ is closed to new replies.