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.

  • 1
    I don't know exactly the answer, but if you make a search in google about "wordpress menu walker" you will find a solution. – andresmijares Mar 15 '12 at 9:51
  • 1
    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

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 );
  • 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
  • 1
    @daniel.tosaba I've added a sample Walker. Not tested. Sorry, I don’t have much time. But it should give you a direction. :) – fuxia 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. – fuxia 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 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.