Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm trying to add a new menu item to the WordPress admin bar. The sub menu item contains a select drop down to switch themes. In Firefox with href => false it generated <a href=""> and when I clicked the select it reloaded the page. I changed it to <a href="#">. That fixed the page reload when clicking on the select... but the javascript isn't working.

The code itself works just fine in Chrome and Safari on Mac. I haven't tested IE or any browsers on Windows yet. In Firefox on Mac it does nothing.

Here's the code generated by the plugin:

<li id="wp-admin-bar-switch_themes" class="menupop">
    <a href="#"><span>Switch Themes</span></a>
    <ul>
            <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">
                    <a href="#">
                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>
                    </a>
            </li>
    </ul>
</li>

Nothing fancy in the code to generate the admin bar items...

$wp_admin_bar->add_menu( array( 'id' => 'switch_themes', 'title' => __( 'Switch Themes', 'textdomain' ), 'href' => '#' ) );
$wp_admin_bar->add_menu( array( 'parent' => 'switch_themes', 'title' => $theme_switcher->theme_switcher_markup('dropdown'), 'href' => '#' ) );
share|improve this question
    
there's nothing wrong with that specific bit of javascript in isolation. what js errors do you get in the console? –  Milo May 16 '11 at 23:16
    
That's the thing... I'm not getting any errors in console in Firefox. Its like its just doing nothing. –  Ryan Duff May 16 '11 at 23:37
add comment

3 Answers

Obviously you cannot put a select tag inside a A anchor. What happens is related to event bubbling: Firefox takes the A anchor click into account, not the select control.

Change your html to:

 <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class="">

                            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none;">
                                    <option value="http://themes.fusionized.com?wptheme=Abstract" style="color: #000; text-shadow: none;">Abstract</option>
                                    <option value="http://themes.fusionized.com?wptheme=Ambience" style="color: #000; text-shadow: none;">Ambience</option>
                            </select>

            </li>

and it should work cross-platform.

share|improve this answer
    
but what does the click have to do with the change event? it's not an onclick, it's onchange. either way, it's not really obvious, since it doesn't fail in other browsers. –  Milo May 17 '11 at 15:07
    
Think twice: what do you have to do to trigger a change() event? Click on the select box. Since your select box is inside a link, the link captures the "clicked" behavior and prevents the "change" event from occuring, because A is parent of the SELECT tag, hence it comes first. –  pixeline May 17 '11 at 21:20
add comment

If you want to add content to the menu item outside the <a> tag, you can add this in the ['meta']['html'] argument. So your code would look like this:

$wp_admin_bar->add_menu( array(
    'parent' => 'switch_themes',
    'meta' => array(
        'html' => $theme_switcher->theme_switcher_markup( 'dropdown' ),
    ),
    'href' => '#',
    'title' => ' ', // An empty title will not be accepted
    'id' => 'wpse17434_child', // If the title is empty, you need to specify the ID yourself
) );

This will generate an ugly empty <a> block above your dropdown, but you can hide this with the correct style.

Have you considered not using a dropdown but just a submenu to list the different themes? This would be more in line with the current menu bar style.

share|improve this answer
add comment

Since I couldn't edit the tags that were being added but I could edit what was inside them, I added a closing tag and re-opened a new tag at the end of what I was inserting. Then just used CSS to hide the blank line they were adding around my content. Also set the href on both tags to #....

Fixed the Firefox issue which seemed to be the only thing picky enough... even the W3 validator said the code was ok.

Here's the resulting code:

<li id="wp-admin-bar-switch_themes" class="menupop">
<a href="#"><span>Switch Themes</span></a>
    <ul>                                
        <li id="wp-admin-bar-abstractambienceantisocialapertureapzauldbackstagebig-easybiznizzbloggingstreamboastbold-newsbusy-beecaffeinatedcanvascanvas-buddypress-betachapterscinchcity-guidecodacoffee-breakcontinuumcrispcush" class=" themeswitchermenu"> 
            <a href="#"></a>
            <select name="themeswitcher" onchange="location.href=this.options[this.selectedIndex].value;" style="color: #000; text-shadow: none; margin: 10px;"> 
                <option>Blah</option>
            </select><a href="#"></a> 
        </li>
    </ul>
</li>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.