WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am not sure if it is clear from the title what I want to achieve here so let me try to clarify this.

I wanna make use of Wordpress's menu system and need to adjust it to my needs, which means that I need it to go from here:


to here:


What would be the best way to achieve this?? Just need some quick directions to go there and do it myself without losing too much time finding appropriate solution.

Is it the wp_nav_menu() or wp_get_nav_menu_items() that I should be researching? Short sample would be appreciated as well if it's not too much to ask. And another thing.. I would appreciate tip on how to generate number inside that inserted div that represents menu item's order apperance: 1,2,3,etc. Is there a way to pick up this from Wordpress's core?

Thank you so much. Any help appreciated.

share|improve this question
I don't know exactly the answer, but if you make a search in google about "wordpress menu walker" you will find a solution. – andresmijares25 Mar 15 '12 at 9:51
Thanks Andrew. Will take a look definitely. – daniel.tosaba Mar 15 '12 at 9:57
I usually achieve this using a Walker menu + using the "description" field in the native WP menu so admins can add in that extra text themselves without me having to do anything programatic. :) Here's an article on how to do that: kriesi.at/archives/… – Michelle Mar 15 '12 at 18:41
@Michelle: Thanks Michelle, I came across that article as well but didn't find time to take a look. Now that I got encouragement from you I'll check it out for sure. Sounds like an elegant solution. But then again, description field is static and I need to increment variable. – daniel.tosaba Mar 15 '12 at 19:12
up vote 3 down vote accepted

You could use a custom walker or just filter the menu title. It depends on the position you need for your extra content: Should it appear before or inside the link?

Example with a walker

Update: Actually, this cannot work: the parent function creates the <li, so you have to copy and adjust the whole parent function.

    array (
        'walker' => new WPSE_45647_Walker

class WPSE_45647_Walker extends Walker_Nav_Menu
    public function start_el( &$output, $item, $depth, $args )
        $output .= $this->custom_content( $item );
        parent::start_el( &$output, $item, $depth, $args );

     * Create your extra content here.
     * @return string
    protected function custom_content( $item )
        // inspect the item and return your 
        // custom content as a string

Example with a filter

More hackish, but maybe easier to understand: Grab the <li> and replace <a with $custom <a

add_filter( 'walker_nav_menu_start_el', 'wpse_45647_add_custom_content', 10, 2 ); 
function wpse_45647_add_custom_content( $item_output, $item )
    static $counter = 0; 
    // You may inspect $item and do something more creative here.
    $custom = ++$counter . ' Hello World!'; 
    return str_replace( '<a ', $custom . '<a ', $item_output );
share|improve this answer
before. Thanks for the tip man. if it's not too much to come up with an example I would appreciate it. – daniel.tosaba Mar 15 '12 at 16:23
@daniel.tosaba I've added a sample Walker. Not tested. Sorry, I don’t have much time. But it should give you a direction. :) – toscho Mar 15 '12 at 16:45
great man.. thanks a lot.. i'll be all over it today and let you later know how it went. – daniel.tosaba Mar 15 '12 at 17:31
@daniel.tosaba Thinking about this, I came to another, maybe better, solution. See my update. – toscho Mar 15 '12 at 18:36
that's awesome man. i am right now getting on it. thank you so much for your time & effort!! – daniel.tosaba Mar 15 '12 at 18:46

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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