Adding html elements to wp nav menu

Question

I know how to create wp menus using the functions.php and diaplay it in my sote wherever the menu is required (e.g top menu, footer menu) I even know how to style it using custom CSS.

I would like to know if it's possible to add HTML elements to a dynamic custom menu. for example: I want to build a menu when each li item will look like this:

<li><a><span>number here</span></a>
<a href="the permalink">
<h4>post title</h4></a>
///
<h5>name of the author</h5>
</li>

is there a way or function to output such menu? basically add some extra html inside li item?

also inside the:

<span>number here</span>

I would like to add a counter which will display a number for each posts (1-5)

Any help will be appreciated Thanks

Answer 1

I made a dynamic menu using this code:

//add login/logout link to menu

add_filter('wp_nav_menu_items', 'wps_add_login_logout_link', 10, 2);
function wps_add_login_logout_link($items, $args) {
    $login = __('Sign in');
    $logout = __('Sign out');


    $menu_id = '15';
    $menu_id2 = '16'; 

    if ( ! is_user_logged_in() )
        $link = '<a href="' . site_url('log-in-log-out')  . '">' . $login . '</a>';
    else
        $link = '<a href="' . wp_logout_url('log-in-log-out') . '">' . $logout . '</a>';

    if ( $args->menu == $menu_id )
        $items .= '<li>'. $link .'</li>';
    elseif ( $args->menu == $menu_id2 )
        $items .= '<li>'. $link .'</li>';

    return $items;
}

You should be able to grab the $items and $args variable to play with their contents. I hope this helps

Sorry, I forgot to mention that I was using the 'Catalyst' framework, so the way that the $args object is used to grab the menu id may be different in a normal WP site.

Answer 2

If you are using wp_nav_menu() you would better off using wp_get_nav_menu_items() if you want to create a customized markup. The function can returns an array, so you will need more work to iterate the menu items, the 'current-menu-item' class manually and other details. But on the other hand you can do a customized markup & additional functions like post count.

$args = array(
    'order'                  => 'ASC',
    'orderby'                => 'menu_order',
    'post_type'              => 'nav_menu_item',
    'post_status'            => 'publish',
    'output'                 => ARRAY_A,
    'output_key'             => 'menu_order',
    'nopaging'               => true,
    'update_post_term_cache' => false
);
$menu_items = wp_get_nav_menu_items('product-section', $args);
foreach($menu_items as $item){
    print_r($items); // just to make sure what is in the array
}