WordPress Function to Adds a custom dropdown option to WP_NAV_MENUS where the user can select a predefined css class for each menu item

Adds a custom dropdown option to WP_NAV_MENUS where the user can select a predefined css class for each menu item

<?php function menu_item_class_select(){
    global $pagenow;
    if ($pagenow == "nav-menus.php"){
?>

<script>
jQuery(document).ready(function(){
    function create_dd(v){
        //create dropdown
        var dd = jQuery('<select class="my_class"></select>');
        //create dropdown options
        //array with the options you want
        var classes = ["","class1","class2","class3"];
        jQuery.each(classes, function(i,val) {
            if (v == val){
                dd.append('<option value="'+val+'" selected="selected">'+val+'</option>');
            }else{
                dd.append('<option value="'+val+'">'+val+'</option>');
            }
        });
        return dd;
    }
    jQuery(".edit-menu-item-classes").each(function() {
        //add dropdown
        var t = create_dd(jQuery(this).val());
        jQuery(this).before(t);
        //hide all inputs
        jQuery(this).css("display","none");
    });
    //update input on selection
    jQuery(".my_class").bind("change", function() {
        var v = jQuery(this).val();
        var inp = jQuery(this).next();
        inp.attr("value",v);
    });
});
</script>

<?php } }
add_action('admin_footer','menu_item_class_select');
?>

source: http://wordpress.stackexchange.com/a/33816/479

You may also like...

1 Response

  1. For demonstration purpose I will add a text input, drop down and a checkbox form field to the custom meta box.

Leave a Reply

Your email address will not be published. Required fields are marked *