3

So, let me explain what I'm actually trying to do, maybe there's a better way to achieve it. I'm working on a theme, and I'd like the user to be able to easily position "special" items in the menu that will do something "special" in the themes frontend, in this case (amongst others) build nested menu structures based on custom taxonomies and their linked posts.

So I thought of a new "section" in the WordPress "Appearance > Menus" configuration, where some hard coded items would be offered, something like this:

Custom Menu Section

Now I could think of two ways how to handle that, a custom post type that is only shown in the nav menu, or a custom meta box (which seems to be a lot of work, at least wp_nav_menu_item_post_type_meta_box() looks like hours of trial and error).

I'm wondering whether any of these two options is the recommended way of solving this problem?

btw, I wouldn't consider using wp_update_nav_menu_item() as an option since items created with it just seem to sit in the menu without an UI for re-adding them in case they are being removed. So this would require a custom meta box anyways, also it would save the items directly to the menu, breaking the "add item > save menu" convention people are used from the WordPress UI.

1 Answer 1

2
+50

Menu items are a post type, and the menus to which they belong are taxonomy terms. So to create a post type in order to get a metabox from which you can add menu items seems a bit redundant (effectively duplicating every 'special item' in the database). In any case, setting the post type's visibilty so that its only seen on the menus screen might be tricky.

Regardless this is quite an involved task, so I'll just outline here how I would do this. You can see a 'working example' of this in this plug-in I built with Kaiser and Ryan Urban. That plug-in adds a post-type archive metabox for links to a post type's archive page.

Adding the metabox

You'll want to hook onto the admin_init hook and add_meta_box() (see codex). The screen ID for that page is nav-menus

add_action( 'admin_init', 'wpse102735_add_meta_boxe' );
public function wpse102735_add_meta_boxe() {
    add_meta_box(
        'wpse102735-metabox-id,
        'My Custom Section'
        'wpse102735_metabox_callback',
        'nav-menus',
        'side',
        'low'
    );
}

The function wpse102735_metabox_callback() is responsible for the content of the metabox. And should produce a checkbox-list of the 'special items' - all with a value/ID with which you can identify that item. (See metabox() method in the above mentioned plug-in, or this function in core which produces the HTML mark-up for the standard post/page metaboxes.

Javascript

In the previous step you should have added a 'submit' button. You'll need to listen for when that button is clicked and then send a custom ajax request to ajaxurl (a global javascript variable pointing to WordPress' ajax handler). The following is skeleton code:

jQuery( document ).ready( function($) {
     $( '#my-submit-id' ).click( function( event ) {
        event.preventDefault();

        var item_identifiers = []; 

        //Collect the IDs of the selected items and put them in $item_identifiers

        // Show spinner - you need to add this in the mark-up.
        $( '#wpse102735-metabox-id' ).find('.spinner').show();

        // Disable button
        $(this).prop( 'disabled', true );

        // Send checked post types with our action, and nonce
        $.post( ajaxurl, {
                action: wpse102735_add_menu_items,
                items: item_identifiers,
            },

            // AJAX returns html to add to the menu, hide spinner
            function( response ) {
                $( '#menu-to-edit' ).append( response );
                $( '#wpse102735-metabox-id').find('.spinner').hide();
                $(this).prop( 'disabled', false );
                            //Uncheck checkboxes too
            }
        );
    } );
} );

Note I've omitted nonces from the above (and below). You'll need to add those in. Also you'll need to properly register/enqueue the above script. See the referenced plug-in for details.

Handle the ajax

In the above we set the action to wpse102735_add_menu_items, we need that the ajax handler hook.

 add_action( 'wp_ajax_wpse102735_add_menu_items', 'wpse102735_ajax_handler' );

Our ajax handler will do two things:

  1. Create the menu items with wp_update_nav_menu_item() (best look at source / above plug-in)
  2. From the returned IDs, retrieve the menu objects and generate the HTML for the admin screen. (We appended the returned HTML to the menu in the previous step)

The ajax handler:

add_action( 'wp_ajax_wpse102735_add_menu_items', 'wpse102735_ajax_handler' );
function wpse102735_ajax_handler(){

   //Perform any necessary nonce/permission checks

   $items = $_POST['items']

   //For each item, set up the details for the menu item:
   foreach( $items as $item ){
      $menu_item_data= array(
         'menu-item-title'  => 'Item title',
         ...
      );

      // Collect the items' IDs.
      $item_ids[] = wp_update_nav_menu_item( 0, 0, $menu_item_data );
   }

   // If there was an error die here
   if( is_wp_error( $item_ids ) )
        die( '-1' );

   //Finally we want to generate mark-up to be added to the menu admin screen
   //First we set up the menu items we've just created

   // Set up menu items
   foreach ( (array) $item_ids as $menu_item_id ) {
        $menu_obj = get_post( $menu_item_id );
        if ( ! empty( $menu_obj->ID ) ) {
             $menu_obj = wp_setup_nav_menu_item( $menu_obj );
             // don't show "(pending)" in ajax-added items
             $menu_obj->label = $menu_obj->title;
             $menu_items[] = $menu_obj;
         }
    }

    //Now generate HTML using Walker_Nav_Menu_Edit walker

    // Needed to get the Walker up and running
    require_once ABSPATH.'wp-admin/includes/nav-menu.php';

    // This gets the HTML to returns it to the menu
    if ( ! empty( $menu_items ) ) {
         $args = array(
              'after'       => '',
              'before'      => '',
              'link_after'  => '',
              'link_before' => '',
              'walker'      => new Walker_Nav_Menu_Edit
         );

          echo walk_nav_menu_tree( $menu_items, 0, (object) $args );
     }

     exit();
}

I hope that gets you on the right track :)

3
  • Thanks for your detailed answer. I had another, closer look at wp_update_nav_menu_item, and finally understood that it doesn't necessarily adds items to the menu immediately, and looking at your code it's all less complicated than I thought. However there's one thing I'm not sure about, are there any known problems when linking menu-items to non-existent post-types/posts? One glitch I've noticed is that nothing is shown for the Original label, that's not crucial, but of course it would be nice if the user could still see what type of item it is after changing the Navigation Label.
    – ndm
    Commented Jun 14, 2013 at 22:25
  • Nope, menu items exist independently of menus. You don't need to add the items to menu, as WordPress does this for you when you save the menu. R.e. links to non-posts - no this isn't a problem, take the 'custom' links for example. The 'Original' points to the original post, so it doesn't make sense in this case. In the plug-in I linked to I create another 'type' of menu item (which is linked to a post type rather than specific post). I've not looked into how you can change the menu-item options though. Commented Jun 15, 2013 at 11:25
  • Alrighty then, looks like I've got everything to get it working... thanks for your help :)
    – ndm
    Commented Jun 15, 2013 at 15:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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