SoCal Websites

After much searching across the webosphere, I decided very few people have shared how to integrate sIFR with dropdown menus.

I found one example, but his solution did not work for me.

Taking his cue, however, I did implement SuperFish as a starting point.

Implementing SuperFish is pretty simple, so I’ll leave their documentation for that part of this “how to.”

After you get the SuperFish plugin working with wp_list_pages in WordPress, you run into a major problem with sIFR and any of the dropdown solutions for Wordpress. The CSS wp_list_pages creates is applied to the <li> tags, and sIFR will want to replace all of the sub-pages text as well as the text for the top level pages.

To get around this, I installed the plugin List Pages Plus and made a couple modifications.

Once you have the plugin activated, you need to edit the “list-pages-plus.php” file included. Change the following line:

$litem[$k] = "\n\t" . ‘<li class="’.$class1.$ac.’"><a href="’.$href1.’" title="’.$title1.$at.’">’.$pre.$text1.$post.’</a>’. "\n\t <ul> \n\t" .’<li class="’.$class2.$sac.’"><a href="’.$href2.$sah.’" title="’.$title2.$sat.’">’.$spre.$text2.$spost.’</a>’;

to:

$litem[$k] = "\n\t" . ‘<li class="’.$class1.$ac.’">’.$pre.’<a href="’.$href1.’" title="’.$title1.$at.’">’.$text1.’</a>’.$post. "\n\t <ul> \n\t" .’<li class="’.$class2.$sac.’"><a href="’.$href2.$sah.’" title="’.$title2.$sat.’">’.$spre.$text2.$spost.’</a>’;

And then change this line:

$litem[$k] = "\n\t" . ‘<li class="’.$class.$ac.’"><a href="’.$href.’" title="’.$title.$at.’">’.$pre.$text.$post.’</a>’;

endif;

to:

$litem[$k] = "\n\t" . ‘<li class="’.$class.$ac.’">’.$pre.’<a href="’.$href.’" title="’.$title.$at.’">’.$text.’</a>’.$post;

endif;

Now, if you really wanted to be complete, you should also change the position of the input box in the form for the admin, but it is not a necessary step. The hack will work whether it looks right in the admin form or not.

After you have made the above code changes, go into the settings for List Pages Plus and add <div class=navReplace> and </div> to the last two input fields for the parent item.

Now, change wp_list_pages to wp_list_pages_plus in your header file (or wherever you are implementing your dropdown menu with sIFR for the top level).

Your last step is to use the span tag as your selector for your sIFR replacements. Using the class example I gave above, your selector would be “.navReplace”

If you do the above, you can get sIFR working on your top level navigation items with dropdown menus.

Subscribe to the comments through RSS Feed