0

I'm a newbie WordPress developer working on a WordPress theme project that demands mega menus as part of the main navigation.

I'm done with the front-end stuff, and now I'm trying to explore the wp_nav_walker class to extend it further according to my requirement, but don't really know how to get started.

My idea is:

  • To populate the mega menu with the help of widgets, as widgets seem to be the only way to do advance stuff (eg. AJAX-loading posts from categories) in the menu

  • To add a checkbox option below each first-level menu item to enable/disable mega menu for it

The problem is — how would I make it support widgets?

I have looked into a couple of free plugins like Widgetize Navigation Menu, but it's a bit of advance stuff, I found them hard to customize to make simple.

Any help would be greatly appreciated.

  • is there a reason you prefer to use a widget rather than another menu construct? (Primary -> Secondary -> Third -> {{n}} -> etc.. ? – Brandt Solovij Feb 6 '15 at 17:01
  • Yes, the reason behind that is the requirement to show stuff like AJAX-powered loading of posts from specific categories, contact forms, Google maps etc.; that I think would be easily doable with the help of widgets. – Bheemsen Feb 6 '15 at 17:09
  • What exactly are you trying to accomplish? What widgets would you be showing on the menu, and where? A mockup would be of great help to me in visualizing what you're attempting to accomplish (if you happen to have one already). – mor7ifer Feb 6 '15 at 18:19
  • @m0r7if3r Sorry, can't post a working mockup, but this is what I can provide you with right now: goo.gl/TWliqU (image). I think it's no different from other mega menus. I'm left to use widgets as I can create a widget that loads posts via AJAX, but I'm helpless while extending WordPress menus. – Bheemsen Feb 6 '15 at 18:59
  • @m0r7if3r For live demonstration, you consider it similar to the menu at mashable[dot]com – Bheemsen Feb 6 '15 at 19:00
0

Based on your comment that the mashable.com menu is what you are going for, I'll be assuming that you want to structure your HTML similar to that (which is to say ul.menu > li > a + ul.submenu + ul.featured-content). That said, that's really implementation details which you can refine for your use case.

Before I get into the code, I should note that this is partially pseudocode as parts of this answer are not directly relevant to the question and I'm trying to keep an already long answer as succinct as possible.

class WPSE177330_Walker extends Walker_Nav_Menu {
    // Don't need to modify start_lvl()
    // Don't need to modify end_lvl()
    // Don't (necessarily) need to modify start_el()

    /**
    * Outputs the closing for the element.
    *
    * @param string $output Passed by reference. Used to append additional content.
    * @param object $item   Page data object. Not used.
    * @param int    $depth  Depth of page. Not Used.
    * @param array  $args   An array of arguments. @see wp_nav_menu()
    */
    public function end_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
        // Setup indent
        $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

        // Capture all top level items and append the featured content
        if ( $depth < 1 ) {
            if ( 'taxonomy' == $item->type ) {
                // Get your top posts in the category using $item info
                // Assemble output
                // Add it to output
                $output .= $indent . $featured_content;
            } else {
                // What to do with top level menu items that aren't taxonomies
            }
        } else {
            // What to do if depth is greater than 1
            // Default behavior
            $output .= "</li>\n";
        }
    }
}

Make sure you mess around with $item to get exactly what you want. Here's a print_r of $item from a category menu item named "Foo" to give you some idea of what to look for to customize everything exactly how you need.

WP_Post Object
(
    [ID] => 7
    [post_author] => 1
    [post_date] => 2015-02-07 15:29:42
    [post_date_gmt] => 2015-02-07 20:29:42
    [post_content] =>
    [post_title] =>
    [post_excerpt] =>
    [post_status] => publish
    [comment_status] => open
    [ping_status] => open
    [post_password] =>
    [post_name] => 7
    [to_ping] =>
    [pinged] =>
    [post_modified] => 2015-02-07 15:29:42
    [post_modified_gmt] => 2015-02-07 20:29:42
    [post_content_filtered] =>
    [post_parent] => 0
    [guid] => http://sandbox.localhost/?p=7
    [menu_order] => 1
    [post_type] => nav_menu_item
    [post_mime_type] =>
    [comment_count] => 0
    [filter] => raw
    [db_id] => 7
    [menu_item_parent] => 0
    [object_id] => 3
    [object] => category
    [type] => taxonomy
    [type_label] => Category
    [url] => http://sandbox.localhost/category/foo/
    [title] => Foo
    [target] =>
    [attr_title] =>
    [description] =>
    [classes] => Array
        (
            [0] =>
            [1] => menu-item
            [2] => menu-item-type-taxonomy
            [3] => menu-item-object-category
        )
    [xfn] =>
    [current] =>
    [current_item_ancestor] =>
    [current_item_parent] =>
)

I wrote this so that it doesn't use widgets, as you said you were open to that in the comments. I feel this is a cleaner implementation, as it allows you to set things up once and doesn't clutter your widgets with a bunch of menu specific widgets. If you wanted to use widgets instead (as you had originally proposed), perhaps for a bit more flexibility than you can have with a hard coded solution, you could register widgets for each top level menu item and then use the same concept of a custom Walker_Nav_Menu extension to display those widgets.

  • Hi m0r7if3r, thanks for taking your time to demonstrate your idea. The code is really simple and helpful to take a start, I don't know what made me to think of widget-based menus instead of taking this approach. I'm now working on the next logic to get the posts for the taxonomy menu-items. This saved me from falling into the complexity of Widgetized menus, really appreciate your help :) – Bheemsen Feb 10 '15 at 11:38
  • Glad I could help! – mor7ifer Feb 10 '15 at 17:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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