1

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:

<ul>
<li>item1</li>
<li>item2</li>
etc.
</ul>

to here:

<ul>
<li><div>1(dynamic-content)</div>item1</li>
<li><div>2(dynamic-content)</div>item2</li>
etc.
</ul>

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.

3
  • 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. Commented Mar 15, 2012 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
    Commented Mar 15, 2012 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. Commented Mar 15, 2012 at 19:12

1 Answer 1

4

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.

wp_nav_menu(
    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 );
}
17
  • before. Thanks for the tip man. if it's not too much to come up with an example I would appreciate it. Commented Mar 15, 2012 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
    Commented Mar 15, 2012 at 16:45
  • great man.. thanks a lot.. i'll be all over it today and let you later know how it went. Commented Mar 15, 2012 at 17:31
  • @daniel.tosaba Thinking about this, I came to another, maybe better, solution. See my update.
    – fuxia
    Commented Mar 15, 2012 at 18:36
  • that's awesome man. i am right now getting on it. thank you so much for your time & effort!! Commented Mar 15, 2012 at 18:46

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.