How to add SimpleModal in a link in the menu

I just pulled this out of my child theme’s functions.php file

It’s not perfect, but what it does is creates a login/logout menu item on the primary menu and builds in some redirect logic.

As-Is … no guarantees that it will work in your theme or environment. In fact in mine, the simple modal plugin gives an “ERROR: OK” message on successful logins and after that it will not refresh the page or redirect. I don’t have time to try and fix it so I’m not even going to use this plugin, but I hope this login/logout menu snippet thing works for you.

<?php
function sv_get_logout_redirect_url() {
	$badurls = array('submit-form', 'dashboard', 'profile', 'guidelines');
	$current_url = get_permalink();
	$isgood = true;
	foreach ($badurls as $bad) {
		$pos = strpos($current_url,$bad);
		if (! $pos === false) {
			$isgood = false;
			break;  // no need to check any more "bads"
		}
	}
	if ($isgood) {
		return wp_logout_url(get_permalink());
	} else {
		return wp_logout_url(home_url());
	}
}

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

function sv_add_usermenu( $items, $args ) {
	global $current_user;

	if (is_user_logged_in() && $args->theme_location == 'primary-menu') {
		// menu items for logged in user
		$guidelines_url = site_url() . '/guidelines/';
		$dashboard_url = site_url() . '/dashboard/' . $current_user->user_nicename;
		$profile_url = site_url() . '/profile/' . $current_user->user_nicename;	

		//	http://fortawesome.github.com/Font-Awesome/
		//	some fontawesome names icon-arrow-down, icon-chevron-down, icon-caret-down
		$items .= "<li class='menu-item'><a href='#'>$current_user->display_name <span class='icon-caret-down'> </span> </a>";
		//$items .= "<li class='menu-item'><a href='#'>$current_user->display_name</a>";
		$items .= "<ul>";
		$items .= "<li class='sub-menu'><a href='$guidelines_url'>Usage Guidelines</a></li>";
		$items .= "<li class='sub-menu'><a href='$dashboard_url'>My Dashboard</a></li>";
		$items .= "<li class='sub-menu'><a href='$profile_url'>My Profile</a></li>";
		$items .= "<li class='sub-menu'><a href='" . sv_get_logout_redirect_url()  . "'>Log Out</a></li>";
		$items .= "</ul>";
		$items .= "</li>";
    } elseif (!is_user_logged_in() && $args->theme_location == 'primary-menu') {
		//menu items for NOT logged in user
		//$login_url = site_url('/a-page-name/');		// get login url and redirect to a specific page
		//$login_url = wp_login_url( home_url() );		// get login url and redirect to home page
		$login_url = wp_login_url( get_permalink() );	// get login url and redirect to current page
		//the contents of <a href""  must be a url
		$items .= "<li class='sub-menu'> <a href='$login_url' class='simplemodal-login'>Log In</a></li>";
    }
    return $items;
}
?>

The second last line of code is the tie in to this plugin where it simply adds that class name to the link for the menu item. The plugin magically takes over from there and replaces the standard wordpress login page with its modal overlay.

Here is a barebones example (which I just tested on my site):

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

function asv_add_usermenu( $items, $args ) {
  if (is_user_logged_in() && $args->theme_location == 'primary-menu') {
    $items .= "<li class='sub-menu'><a href='" . wp_logout_url()  . "'>Log Out</a></li>";
  } elseif (!is_user_logged_in() && $args->theme_location == 'primary-menu') {
    $items .= "<li class='sub-menu'> <a href='" . wp_login_url() . "'>Log In</a></li>";
  }
  return $items;
}

The ‘primary-menu’ text is from this admin page (whatever name the theme registered that menu as). http://yoursite.com/wp-admin/nav-menus.php It is one of the menu names in grey italics in the top left box.

I gleaned the above from http://codex.wordpress.org/Function_Reference/wp_get_nav_menu_items
and http://codex.wordpress.org/Function_Reference/wp_nav_menu
and I think the ‘primary-menu’ is the only thing environment specific.