Recently I am working on wordpress, but I've got stuck in nav menu item issue. My desireable result was a pull down caption like this: http://www.masterhands.com.tw/index.aspx

  • Each category list on nav menu as an item. I made this by a default way: function.php register.

  • I am fine with the code of pull down area, it relys on inputing category ID in WP_Query to show most recent 3 posts now. And I seperate it as another php.

But the problems:

  • How to get the cat ID but not the menu item ID?
  • By just on hover?

I was searching high and low for few days.

This is the way I call post from category (pick category with offset) in a php named : caption.php

<div class="content"> 
<?php $cat_id = 2; //the certain category ID
     $latest_cat_post = new WP_Query( array('offset' => 0, 'posts_per_page' => 1, 'category__in' => array($cat_id)));
     if( $latest_cat_post->have_posts() ) : while( $latest_cat_post->have_posts() ) : $latest_cat_post->the_post();  ?>
// Where I post thing...

I tried to dissect it part by part

  • caption.php presently included in all php ()
  • Hover on "menu li a" trigger pull down (.content is where the container is)
$("#menu-menu-1 a").mouseover(function(){ 

The default menu by wordpress looks like:

<div class="menu-menu-container">
<ul id="menu-menu-1" class="menu">
<li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19">
<a href="http://localhost/wordpress/category/cat2/">cat2</a>

So I think merely get the cat id from URL while on hover for '$cat_id' is a direct way?

  • if you don't show code it is like you haven't asked anything. No telephats around here as far I know :) Commented Jan 27, 2014 at 10:22
  • Updated :), Thx for watching the post.
    – Cwkin7
    Commented Jan 27, 2014 at 13:28

1 Answer 1


This is quite complex (both the question and the way to achieve what was asked for).

You would have to set up a new Walker. In fact, you only need a custom start_el function, in which you check if you need/want to build a pull down area or not.

You (could) do this with respect to $item->object_id. Fetch the post, and check for whatever you like (certain post type, get the category and act upon that, certain date etc.).

The output of the custom query you want to run is then added to the output (either to $item_output right before the last line, if you want to have it filtered, or to $output after the last line, if you don't want to have the output/query filtered).

So, here is a blueprint of what I just described (incomplete code!):

class MyMenuWalker extends Walker_Nav_Menu {

    function start_el(&$output, $item, $depth, $args) {
        // ...

        // currently second last line
        $item_output .= $args->after;

        // THIS is where the pull down action is
        $current_post = get_post($item->object_id);
        if (... $current_post ...) {
            $pull_down_query = new WP_Query(array(...args...));
            // add (i.e., concatenate) query output to item output

        // currently last line
        $output .= apply_filters('walker_nav_menu_start_el', $item_output, $item, $depth, $args);
    } // function start_el

} // class MyMenuWalker

Then, where you are calling wp_nav_menu, you add the walker:

    // other args
    'walker' => new MyMenuWalker(),

The rest is CSS...

I hope this gets you started.

  • Thx so much for your suggestion, but it seems quite a different thing to my current set? Or they work togather? Anyway I will study it through. Hope my additional code would help declaring my situation. I am new to wordpress and spending time in try and error. :)
    – Cwkin7
    Commented Jan 27, 2014 at 14:31
  • Are you using wp_nav_menu to render your menu? Your current code does not tell. If not, you might want to have a look at register_nav_menu and wp_nav_menu. That's where the above Walker comes into play.
    – tfrommen
    Commented Jan 27, 2014 at 14:57
  • I am using the wp_nav_menu to do so. I am looking for something to retrive cat id from its url in menu now. Would that be a right direction?
    – Cwkin7
    Commented Jan 27, 2014 at 15:03
  • Well, then (almost) all you need is right there in my answer. You have to provide a new parameter 'walker' for your wp_nav_menu call. This Walker first needs to be set up. This is what I described (and illustrated) in my answer. For each menu element/item you can access the variable/object $item, which provides you with a bunch of things. One is the ID of the post that the current menu item links to. So you can fetch the post (using get_post($item->object_id), for instance) and work with that. Or just call [wp_get_post_categories] or [get_the_category]() or something like that.
    – tfrommen
    Commented Jan 27, 2014 at 15:16
  • Thx for the inspiraing of walker. I see more from shinraholdings.com/62/custom-nav-menu-walker-function/…
    – Cwkin7
    Commented Jan 28, 2014 at 5:47

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.