How to add a custom item to a specific WordPress menu item position

Question

I have a primary menu registered and displayed that consists of 4 links (home, about, news, blog). I want to add html (a logo) in between the second and third menu and I was

Answer 1

Little variation on Compass' solution, getting rid of the loop.

add_filter('wp_nav_menu_items','add_custom_in_menu', 10, 2);

// add in Logo in the middle of the menu
//
function add_custom_in_menu( $items, $args )
{
    if( $args->theme_location == 'footer_navigation' )
    {
        $new_item       = array( '<li class="menu-logo"><a href="/"><img src="' . get_template_directory_uri() . '/assets/img/logo.png" alt=""></a></li>' );
        $items          = preg_replace( '/<\/li>\s<li/', '</li>,<li',  $items );

        $array_items    = explode( ',', $items );
        array_splice( $array_items, 2, 0, $new_item ); // splice in at position 3
        $items          = implode( '', $array_items );
    }
    return $items;
}

Not sure if it will be much fast using build in functions. Your choice

Answer 2

I solved similar problem this way:

add_filter('wp_nav_menu_items','add_custom_in_menu', 10, 2);

function add_custom_in_menu( $items, $args ) 
{
    if( $args->theme_location == 'primary' ) // only for primary menu
    {
        $items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) )
        {
            $items_array[] = substr($items, 0, $item_pos);
            $items = substr($items, $item_pos);
        }
        $items_array[] = $items;
        array_splice($items_array, 2, 0, '<li>custom HTML here</li>'); // insert custom item after 2nd one

        $items = implode('', $items_array);
    }
    return $items;
}

Please notice, it works only for single-level menu.

Answer 3

function add_admin_link($items, $args){
    if( $args->menu_id == 'header_menu' ){
        $items .= '<li class="nav-item">Paste the text or code here</li>';
    }
    return $items;
}
add_filter('wp_nav_menu_items', 'add_admin_link',20,2);

Answer 4

PHP Version

One way would be to create 2 navigation menu's which are then used.

header_menu_1 | LOGO | header_menu_2

Within the back-end, you'd need to create a new header location and then add the 2 menu items to it.

Then within your header.php file, have this code.

<?php
    $args1 = array( 'menu' => 'header_menu_1' );
    $args2 = array( 'menu' => 'header_menu_2' );
    wp_nav_menu($args1);
?>

<img src="LOGO SOURCE" />

<?php
    wp_nav_menu($args2);
?>

That will be the easiest way without using jQuery or messing about with plugins.

WP Nav Menu

Adding New WordPress Menus

jQuery Version

$(document).ready(function() {
    var i = 1;
    $('ul li').each(function() {
        if(i == 2) {
            $(this).after('<img src="http://www.socialtalent.co/images/blog-content/so-logo.png" width="250" />');
        }
        i++;
    });
});

Demo

CSS Version

This is a really dirty hack way of doing it.

Using nth-child, select out the 2nd and 3rd elements. Both items get more margin for the middle so 2nd element 30px margin right and 3rd element 30px margin left.

Then put the div with the logo in it to be position absolutely in the middle.

Example:

CSS:

#container {
    width: 100%;
}

ul {
    display: block;
    width: 100%;
}
li {
    display: inline-block;
    width: 15%;
    padding: 1.25%;
    margin: 1.25%;
    background: blue;
}

li:nth-child(2) {
    margin-right:10%;
}
li:nth-child(3) {
    margin-left: 10%;
}

#container img {
    width: 20%;
    position: absolute;
    left: 50%;
    margin-left: -7.5%;
}

HTML:

<div id="container">
    <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" />
    <ul>
        <li>Home</li>
        <li>Home</li>
        <li>Home</li>
        <li>Home</li>
    </ul>
</div>

Demo