Add classes to ul and li elements in sidebar

  • Hello,

    Is there a way (not using javascript) to add classes to the ul and li elements within my sidebar.

    I am using a theme and I would like to add some classes to all ul and li elements in the sidebar.

    Is javascript the appropriate way to add classes to these elements?

    Thanks.

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

  • Why you need a specific class for the ul and li you can style them by using #unique-sidebar-id ul and #unique-sidebar-id ul > li and similarly. You can add the class in ul and li similarly by using unique sidebar id.

    It depends how the ul and li elements are added though.

    Thread Starter theyuv

    (@theyuv)

    Hey, thanks for replying.

    I’m not sure I follow. Are you suggesting styling them with css?
    This will not work for my specific case. I wish to add classes (already written, they’re actually from bootstrap.css) to elements. So, for example, I would like to have the list-group class on all ul elements.

    It can be done with Less but now I need to add another set of classes on top of that and adding again with Less seems like a bad idea.

    For my navbar I was able to do some manipulation with wp_nav_menu($args) and a custom Walker, I would like to do something similar with the sidebar.

    Any idea?

    Thanks.

    May be you could add it from sidebar.php file ?

    Thread Starter theyuv

    (@theyuv)

    Hey, sorry for the late response. Thanks for your input.

    If I take a look at the theme’s sidebar-right.php, it does not directly code most of the html, it has:

    <div class="col-md-3" id="sidebar-right">
	<?php do_action('before_sidebar'); ?> 
	<?php dynamic_sidebar('sidebar-right'); ?> 
</div>

    I tried to look for the code of do_action('before_sidebar') and dynamic_sidebar('sidebar-right') so that I could maybe manipulate the html there, but I couldn’t find where these functions are defined. Do you know where I can find them? If finding them will help me manipulate the ul and li elements?

    Thanks.

    • This reply was modified 8 years, 5 months ago by theyuv. Reason: formatting

    Then the javascript method can be implemented. Simple jQuery code can be

    jQuery(document).ready(function(){
 jQuery('#sidebar-right ul').each(function(){
  jQuery(this).addClass('list-group');
  jQuery(this).find('li').each(function(){
    jQuery(this).addClass('list-group-item'); 
  });
 });
});
    Thread Starter theyuv

    (@theyuv)

    Is it good practice to use jQuery for things like this in WordPress?
    I’m new to WordPress, I notice people try to not use jQuery as a fix for these types of problems.

    But thanks, I’ll consider it.

    It’s very bad practice but if you need the output anyway it can be used. If you want your in standard way you can find how the <ul> is generated and some hooks used to modify the generated code ?? . Or you can use plugins that will help you get more customized menu.

    Thread Starter theyuv

    (@theyuv)

    Yes, that was the original question.
    I was not able to find “hooks”. The code snippet in my reply above had:

    <?php do_action('before_sidebar'); ?> 
<?php dynamic_sidebar('sidebar-right'); ?>

    But I’m not sure where the code for these is written (I did a search in the theme’s folder and only found the files where these functions are called, not where they are defined).

    Thanks.

    I think you need to check the admin widgets section from where the ul list are coming from.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Add classes to ul and li elements in sidebar’ is closed to new replies.