Tag Archives: Wp_nav_menu

If you’ve ever coded the CSS and/or JavaScript needed to make a WordPress nav menu work smoothly across all browsers, you know how daunting that can be. Superfish is a jQuery plugin that is really ideal for WordPress’s multilevel navigation menus. Many themes make use of it, but (I’m assuming due to the lack of quality tutorials) few of them do it correctly. I will outline the correct procedure for adding Superfish, oh any other jQuery plugin to your theme.

Enqueue Scripts and Styles

Create a function that enqueues the necessary files. It’s generally a bad idea to replace WordPress’s native jQuery file, so don’t do it unless you absolutely must to make it work. I’ve included the (disabled) code to do it just in case you’re forced to.Read More …

The WP-Admin bar was added in version 3.1 of WordPress and it’s made the lives of many WordPress publishers a lot easier. The bar appears to logged in users with sufficient privileges on the front-end and dashboard of a WordPress blog. It offers easy navigation to different administrative tasks based on the type of page being viewed.

You can use this wonderful time saving tool to your advantage by adding custom links to the bar. This could be utilized by a theme or plugin to provide better access to a specialized functionality. The code below simply adds a constant link to the bar, but you could customize it further by adding different links when different conditionals to the add_action call.Read More …

I’ve also written a Custom Comment Walker function, after 3 hours of searching, I’m convinced it may be the only one out there lol…

If you’re trying to make a fancy navigation menu with CSS, you might have found the default IDs and classes applied by WordPress to the nav menu elements to be quite lacking. However, you can fix that by adding a custom walker function to add your own conditional classes. The custom nav walker function I made below will add the following CSS classes:

CSS Classes

  • .main-menu to top menu
  • .sub-menu to menus inside the main-menu
  • .menu-item to all <li>’s
  • .main-menu-item to all <li>’s in the main menu
  • .sub-menu-item to all <li>’s in a sub-menu
  • .sub-sub-menu to all menus inside a sub-menu
  • .menu-even/.menu-odd for <ul>’s (alternating)
  • .menu-depth-# to tell you how deep each menu is
  • .menu-item-even or .menu-item-odd (alternating)
  • .menu-item-depth-# to tell you which level menu the <li> is in
  • .menu-link to links

Optional Features

These requested features were can also be added to the code below. Click on each to be taken to the comment on this page describing how to integrate it.

This should make styling your Navigation Menus MUCH simpler.Read More …