Adding class in li under WordPress Navigation Menus

In WordPress, you can generate menus by using wp_nav_menu function. It will show the menus you set in admin. Here is the example of menus in html version.

<ul id="menu-header-menu" class="menu">
  <li class="wordpress generated classes">
     <a href="#">Menu Name</a>
  </li>
  <li class="wordpress generated classes">
    <a href="#">Menu has sub menu</a>
   <ul class='sub-menu'>
     <li class="wordpress generated classes">
         <a href="#">sub menu item</a>
     </li>
     <li class="wordpress generated classes">
         <a href="#">another submenu item</a>
     </li>
   </ul>
  </li>
</ul>

For some reason, you want to let your visitors know that the menu has sub menus by showing arrow or drop down icon next to the menu. In this case, you’ll need to add CSS in li element that it has child menu. There is an answer to this on stackoverflow by adding some php codes in functions.php. I found that there is an alternative way to solve this problem by using jQuery. If you’re familiar with jQuery, the following line that I used for my WordPress theme will help you with this problem.

<script type="text/javascript">
        $(document).ready(function(){
            $('.sub-menu').closest('li').addClass('has-submenu');
        });
</script>

You can add the above code before head or at the end of your theme. It will add ‘has-submenu’ in li elements of wordpress menu that has sub menus. I hope this help.

Noise Texture Generator

Tired of creating noise texture in Photoshop? You might want to take a look at this site. Noise Texture Generator lets you to select noise opacity, noise density and color to create noise texture background which you can use in your web site projects or design. It is simply slide and select the color. Once you’re satisfied, click Download to download the texture.

noise-texture-generator

It’s been a while that I haven’t update my blog. I just updated my new theme and will update posts in coming days.