I have a WordPress menu that has a few menu items I added through the standard (drag and drop) WordPress admin menu feature. Recently I had to add another item to the menu that generates a dynamic href link. I achieved that using the following code in my functions.php file:
//add my profile menu item dynmacially to the members menu (generate user name based on current user logged in)
add_filter('wp_nav_menu_items','add_profilelink_in_menu', 10, 2);
function add_profilelink_in_menu( $items, $args ) {
if( $args->theme_location == 'secondary') { global $current_user; //converts user id to username $user_info = get_userdata($current_user->ID); $items .='<li id="menu-item-2091" class="menu-item menu-item-2091"> <a href="https://www.mysite.com/members/' . $user_info->user_login .'">Profile</a> </li>'; } return $items;
}
My problem is that this menu item is added to the end of the menu and the regular WordPress Menu classes such as 'current-menu-item' don't get applied to this item. Is there a way for me to control the position of where this menu item is added to (For example: add this item after the first two items?)
and how can I get WordPress to treat this dynamically generated menu item as a regular menu item and have it add all the classes that it adds the other menu items (created through the WordPress menu feature)?
Thanks for any help.
Here's the logic that you can base using jquery
//suppose your menu is this
<ul id="secondary_nav">
<li id="li_unique_id_1"><a href="">menu 1</a></li>
<li id="li_unique_id_2"><a href="">menu 2</a></li>
<li id="li_unique_id_4"><a href="">menu 4</a></li>
</ul>
//the jquery workaround
//place this in your footer
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
<?php
global $current_user;
//converts user id to username
$user_info = get_userdata($current_user->ID);
?>
$("<li id='menu-item-2091' class='menu-item menu-item-209'><a href='https://www.mysite.com/members/<?php echo $user_info->user_login; ?>'>Profile</a></li>").insertAfter("#secondary_nav #li_unique_id_2");
});
</script>
You can also use insertBefore function