Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Superfish nav-bar style two tier menu WordPress


The Objective: Achieve a 2-tier horizontal nav bar that lists categories on the first level and children categories on the second level.

Here is my site:

Here is the superfish example I wish to implement:

Here is a WP site that exemplifies this desired nav:
(however, hover here does not expose children as does superfish example above - this would be desired)

Currently, I have a non-Jquery solution in place inspired from this tutorial:

This would be fine, but the nav order needs to follow the structure as built in Admin Menus.

The current code is ordering by name, which is not desired
<?php wp_list_categories('orderby=name&depth=1&title_li='); ?>

I look forward to reviewing some solutions as I have spend a great deal of time towards this.



Answers (3)


Christianto answers:

Hi Patrick,

Is this related to your site on,
Where you use wp_list_categories and try to change it to wp menu management?

Have you enable/show the category menu in admin panel and clear the WP total cache like my suggestion on email?

Sorry I try to find your admin panel option but I get confuse where is the option in the admin panel for category menu.

Or maybe I can modify the code and delete conditional statement
<?php if ( get_option( newstheme_menucat ) == "Hide") { ?>

if you agree I will change it since I already have the admin account.

If the menu can appear then we can add superfish functionality to the menu but I think now we have to focus to make the menu appear.

Christianto comments:

And please don't vote until your problem can be solved :D
Expert can't answer on this thread anymore if the vote is assign :D


Yes, menu displays and I rolled back the code to original state where categories are listing by name.

The below link is reflects the code that I am currently using:


this is ideal result:
[[LINK href=""]][[/LINK]]

examples -> "nav-bar style"


I will try this did not print

[[LINK href=""]][[/LINK]]


OK, here is link:

Christianto comments:

<blockquote>Yes, menu displays and I rolled back the code to original state where categories are listing by name.</blockquote>
I really get confuse, I thought you want to use wp menu management, but why you rolled back to wp_list_categories ordered by name?

Regarding your statement below I take from your question description above..
<blockquote>This would be fine, but the nav order needs to follow the structure as built in Admin Menus. </blockquote>

If you choose to rolled back to wp_list_categories that means possibility to order the nav in wordpress admin menu will be gone.

If you want the menu follow the structure like in Appearance -> Menu you should use wp_nav_menu function. If the menu create WITH wp_nav_menu can display in your site then we can add another function like jQuery superfish.

so the question is..
Did you want to use wp_nav_menu or wp_list_categories?

Result on both wp_list_categories and wp_nav_menu can work with jQuery superfish. The only difference is how it manage. In link [[LINK href=""]]you're point at[[/LINK]] we can also add jQuery superfish function on it.



Christianto - you are correct...I wish to use WP menu management. I rolled back because I wanted to start from the beginning.

<blockquote>so the question is..
Did you want to use wp_nav_menu or wp_list_categories?</blockquote>

Answer: wp_nav_menu</strong>

I realize that my instructions may have been unclear so please ask any further questions to clarify.

Thanks for your attention towards this and I look forward to your solution.


Christianto comments:


Patrick, place the code of functions.php that I send to you, <strong>the last one that use add_action</strong> and add another code below to functions.php

function superfish_script(){
echo '
<!-- start superfish scripts -->
<script type="text/javascript" charset="utf-8" src="'.get_template_directory_uri().'/js/superfish.js\" ></script>
<!-- end superfish scripts -->';

And change the code on front end using the code below. Like in [[LINK href=""]]this page[[/LINK]] but I change the option/class for superfish initialize selector.

<?php if ( $activate = get_option('newstheme_activate') ) { ?>

<?php if ( get_option( newstheme_menucat ) == "Hide") { ?>

<div style="margin: 0px 0px 15px 0px;"></div>

<?php } else { ?>

<div class="menubar"><!-- BEGIN MAIN NAV -->

<ul id="nav sf-menu sf-navbar">
<li <?php if(is_home()) {echo 'class="current_menu_item"';}?>><a href="<?php bloginfo('url') ?>">Home</a></li>

$patrick_args = array(
'theme_location' => 'patrick_main_menu',
'container' => false,
'depth' => 2

And please enable/show the category menu on admin panel, if the menu didn't appear clear the wp total cache.

After that please download file attach contain superfish.css and superfish.js.

Copy entire superfish.css to style.css, then place superfish.js to js folder on your theme directory if the folder not exists create one.

Let me know the result..