Correction: code added to a script, not to functions.php.
Hi Seezee,
For the placeholder I’ve outlined how to change that in the plugin description so I’d have a read through that to see what you can do to modify the output before throwing too much jquery at it.
This is the simplest way to target all dropdown menus, add this to your functions.php:
<?php
add_filter( 'dropdown_blank_item_text', 10, 2 );
function my_dropdown_blank_text( $title, $args ) {
return __( 'Go to...' );
}
?>
I purposefully avoided the use of optgroups because you can’t nest them beyond 1 level and as you say they’re not clickable.
To do what you want you need a more tailored solution. I don’t know your skill level with PHP & WP but maybe take a look at the plugin code and rework it to fit your needs as the optgroup thing isn’t something I’m planning to add in I’m afraid.
Marking as resolved because the original question has been answered.
Re. optgroups and styling there area few things you can do:
The <option> elements all have class names like you’d get in a regular menu with some extras to indicate the depth of the item.
You could use jQuery to set the values of the <option>s with the class ‘depth-0’ to empty making them dead options.
Likewise for styling purposes you can use the ‘depth-X’ class names to style or text-indent the values differently but be aware that <select> styling never works cross browser, most notably on mobile devices.
Hi there,
When I added the php code above to my functions.php, I got an internal server error. Is the code correct? (It’s not a problem with php tags)
I also tried adding it to the filters.php of my theme, same result.
Hey TrolandB,
Which theme are you using? Can you give me some more information eg. PHP version and wordpress version?
Something that’s bitten me once before is when copy pasting code (especially from this forum) the quotes are incorrectly interpreted as unicode quotes in your text editor. They should just be regular primes or double primes. Probably isn’t that but worth checking.
Hi there,
The problem originally occurred with the carrington mobile 1.0.2 theme. This theme works as part of a theme framework so I thought that might be the problem, so I tried it with business canvas from chimera themes, which is a pretty normal theme, but this didn’t work either. (My site uses two themes, one for mobile one for desktop, and wordpress mobile edition to switch between the two).
WordPress version: 3.3.1
phpinfo output: PHP Version 5.3.2-1ubuntu4.11
Not sure quite what you mean by unicode quotes, but I doubt that’s the problem, as the quotes are just the same as in every other function.
There might be a php error. Can you try setting WP_DEBUG to true in wp-config.php and seeing what it prints? If you’ve got an error log set up though you could just check there.
There could be a function name conflict that I’ll need to fix. It may not be the theme but another plugin it’s in conflict with.
Thanks for that – I found that I had included this filter twice; in functions.php and in dropdown-menus.php, that’s why I got the server error.
In fact though this may not be necessary for what I’m trying to do. What I want is for there to be a default text ‘Navigation’, or even better ‘<menu name> navigation’, that is always shown regardless of which page you’re on (which option is selected). Then when the dropdown is clicked the ordinary menu would come up with the selected one highlighted as usual (but still with the default text in the box).
This is probably a bit of an extension of what you’ve done, so no problem if it’s not something you can help with, but if you have any pointers as to how to start let me know.
Ok I managed to get a default text to always show by removing reference to the $selected variable in dropdown-menu.php and adding my own title using the dropdown_title parameter when I call the function.
I almost got the ordinary menu to come up with the correct item selected when the select box is clicked with the following jQuery:
jQuery('select.dropdown-menu').click(function(){
jQuery('option.current-menu-item').attr('selected', 'selected');
});
jQuery('body').click(function() {
jQuery("select.dropdown-menu").prop('selectedIndex', 0);
});
jQuery('select.dropdown-menu').click(function(e) {
e.stopPropagation();
});
It worked on in chrome with iPhone user agent, but unfortunately in iphone safari there’s a problem with multiple options being selected which I couldn’t fix.
So I’ll leave it with an always showing default option, unless anyone has any suggestions.
