![\"primary](\"http:\/\/localhost\/syllogic\/wp\/wp-content\/uploads\/sites\/2\/2014\/05\/primary-menu.jpg\" "\\"The")
<\/a><\/figure>\n\n\n\nHere is a screen shot of the secondary menu for the logged-out visitor (ie public view).<\/p>\n\n\n\n As you can see the menu appears above the main menu and consist of a registration and login link. This menu needs to change when the user is actually logged in…<\/p>\n\n\n\n In the above case, the site is conference registration site and the menu changes to a Submission and logout menu.<\/p>\n\n\n\n Now here comes the beautiful part of this custom menu….<\/p>\n\n\n\n As you can see from the above screenshot of the site Dashboard, the menu manager allows the webmaster to configure the logged-out menu by adding other pages, sub-menus, links, post, categories and what not. However, the only thing missing is the Login menu link. This is done dynamically with a function by simply adding a login menu item at the end of the menu structure.<\/p>\n\n\n\n Same thing for the logged-in menu structure, no login menu item.<\/p>\n\n\n\n Why did we do this? Well for starters, adding logout\/login urls has to be done manually using the custom Links items, which means that if the the site domain name changes (such going from a demo to a live site) one needs to remember to change it. However, we also wanted to add an Ajax-enabled login functionality as described in this neat little tutorial<\/a> by Natko Hasik. And the result is this:<\/p>\n\n\n\n Neat no?<\/p>\n\n\n\n So how does it work? Well here is the magic….<\/p>\n\n\n\n Here is the code to register the two menus that we will be using in the headers of our site\u2026<\/p>\n\n\n\n Next is the function which will add the necessary login and logout menu links dynamically each time the menus are being called by the header\u2026<\/p>\n\n\n\n Finally the Ajax initialisation \u2026<\/p>\n\n\n\n \u2026and call handlers\u2026<\/p>\n\n\n\n This is the javascript file that will be loaded, I place it in the js\/ folder of my child-theme root folder\u2026save the code into a new file called ajax-login-script.js<\/p>\n\n\n\n the css needed to make it all look good\u2026<\/p>\n\n\n\n This is the tricky part, because the header will differ from one theme to the next and you will need to see where best to fit in your additional menus\u2026<\/p>\n\n\n\n One of the downsides of WordPress menus is the inability to have a set of menus for logged-in users that may differ from the primary menu. Many sites tackle this in various ways, but a conventional approach is to have a separate menus to handle the logged-in and logged-out states of the visitor. A menu […]<\/p>\n","protected":false},"author":2,"featured_media":359,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,10],"tags":[7,8],"yoast_head":"\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nIntegration with the WordPress Menu Manager<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nSo what’s the big deal?<\/h3>\n\n\n\n
<\/a><\/figure>\n\n\n\nThe functions.php file first<\/summary>\n
function sy_conf_register_menu() {\n register_nav_menu('quick-in-menu',__( 'Quick Loged-in Menu' ));\n register_nav_menu('quick-out-menu',__( 'Quick Loged-out Menu' ));\n}\nadd_action( 'init', 'sy_conf_register_menu' ); \/\/ register additional menu<\/code><\/pre>\n\n\n\nfunction sy_quick_nav_items( $items, $args ) \n{ \/\/$items, $menu,\n if( 'quick-in-menu' == $args->theme_location )\n $items.= '<li><a href=\"'.wp_logout_url(get_permalink()).'\" title=\"Logout\">Logout<\/a><\/li>';\n if( 'quick-out-menu' == $args->theme_location ) {\n $logInitem = '<a id=\"show_login\" href=\"\">Login<\/a>';\n $logInitem.= '<form id=\"login\" action=\"login\" method=\"post\">';\n $logInitem.= ' <p><\/p>';\n $logInitem.= ' <div id=\"loginFields\"><p><label for=\"username\">Username<\/label><input id=\"username\" type=\"text\" name=\"username\"><\/p>';\n $logInitem.= ' <p><label for=\"password\">Password<\/label><input id=\"password\" type=\"password\" name=\"password\"><\/p>';\n $logInitem.= ' <p id=\"lostPass\"><a href=\"<?php echo wp_lostpassword_url(); ?>\">Lost your password?<\/a><\/p>';\n $logInitem.= ' <p id=\"loginButton\"><a href=\"javascript:void(0)\">Cancel<\/a><input type=\"submit\" value=\"Login\" name=\"submit\"><\/p><\/div>';\n $logInitem.= wp_nonce_field( 'ajax-login-nonce', 'security' );\n $logInitem.= '<\/form>';\n $items.= $logInitem;\n }\n return $items;\n}\nadd_filter( 'wp_nav_menu_items','sy_quick_nav_items', 10, 2 );<\/code><\/pre>\n\n\n\nfunction ajax_login_init(){\n wp_register_script('ajax-login-script', get_stylesheet_directory_uri() . '\/js\/ajax-login-script.js', array('jquery') ); \n wp_enqueue_script('ajax-login-script');\n wp_localize_script( 'ajax-login-script', 'ajax_login_object', array( \n 'ajaxurl' => admin_url( 'admin-ajax.php' ),\n 'redirecturl' => home_url(),\n 'loadingmessage' => __('Logging in, please wait...')\n ));\n \/\/ Enable the user with no privileges to run ajax_login() in AJAX\n add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );\n}\n\/\/ Execute the action only if the user isn't logged in\nif (!is_user_logged_in()) {\n add_action('init', 'ajax_login_init');\n}<\/code><\/pre>\n\n\n\nfunction ajax_login(){\n \/\/ First check the nonce, if it fails the function will break\n check_ajax_referer( 'ajax-login-nonce', 'security' );\n \/\/ Nonce is checked, get the POST data and sign user on\n $info = array();\n $info['user_login'] = $_POST['username'];\n $info['user_password'] = $_POST['password'];\n $info['remember'] = true;\n $user_signon = wp_signon( $info, false );\n if ( is_wp_error($user_signon) ){\n echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));\n } else {\n echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));\n }\n die();\n}<\/code><\/pre>\n<\/details>\n\n\n\nAjax Javascript file ajax-login-script.js<\/summary>\n
jQuery(document).ready(function($) {\n \/\/ Show the login dialog box on click\n $('a#show_login').on('click', function(e){\n $('body').prepend('<div><\/div>');\n $('form#login').fadeIn(500);\n $('div.login_overlay, form#login a.close').on('click', function(){\n $('div.login_overlay').remove();\n $('form#login').hide();\n });\n e.preventDefault();\n });\n \/\/ Perform AJAX login on form submit\n $('form#login').on('submit', function(e){\n $('form#login div#loginFields').fadeOut(500);\n $('form#login p.status').show().text(ajax_login_object.loadingmessage);\n $.ajax({\n type: 'POST',\n dataType: 'json',\n url: ajax_login_object.ajaxurl,\n data: { \n 'action': 'ajaxlogin', \/\/calls wp_ajax_nopriv_ajaxlogin\n 'username': $('form#login #username').val(), \n 'password': $('form#login #password').val(), \n 'security': $('form#login #security').val() },\n success: function(data){\n $('form#login p.status').text(data.message);\n if (data.loggedin == true){\n document.location.href = ajax_login_object.redirecturl;\n }\n }\n });\n e.preventDefault();\n });\n});<\/code><\/pre>\n<\/details>\n\n\n\nCSS beautification….<\/summary>\n
form#login {\n background-color: #FFFFFF;\n border-top: 3px solid #7B0099;\n display: none;\n padding: 5px;\n position: fixed;\n z-index: 999;\n}\n#login div#loginFields > p {\n line-height: 0.5em;\n padding-bottom: 5px;\n text-align: right;\n}\n#login div#loginFields > p#lostPass {\n text-align: center;\n}\n#login div#loginFields input {\n border: 1px solid #D3D3D3;\n padding: 1px 2px;\n width: 100px;\n}\n#login div#loginFields label {\n margin-right: 5px;\n}\n\nform#login p.status{\n display: none;\n line-height: 0.5em;\n padding-bottom: 5px;\n text-align: center;\n}\nform#login div#loginFields a.close {\n background: none repeat scroll 0 0 #F0F0F0;\n border: 1px solid #D3D3D3;\n color: #00266A;\n font-size: 11px;\n margin-right: 4px;\n padding: 1px 25px;\n}\n#login div#loginFields input.submit_button {\n color: #00266A;\n padding: 0 2px;\n width: 86px;\n}\n.login_overlay{\n height: 100%;\n width: 100%;\n background-color: transparent;\n opacity: 0.9;\n position: fixed;\n z-index: 998;\n}<\/code><\/pre>\n<\/details>\n\n\n\nIntegration into the header…<\/summary>\n
<body>\n <header>\n <div id=\"top-navigation\">\n <nav id=\"quick-nav\">\n <?php\n $menuClass = 'nav';\n if ( is_user_logged_in() ) {\n \/\/get the logged-out menu \n $quickNav = wp_nav_menu( array( 'theme_location' => 'quick-in-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => 'quick-menu', 'echo' => false ) );\n if ( '' == $quickNav ) : \/\/in case the menus have not been setup\n ?>\n <ul id=\"quick-menu\">\n <li><a href=\"<?php echo wp_logout_url(get_permalink()); ?>\" title=\"Logout\">Logout<\/a><\/li>\n <\/ul>\n <?php\n else :\n echo ( $quickNav );\n endif;\n } else {\n \/\/get the logged-in menu\n $quickNav = wp_nav_menu( array( 'theme_location' => 'quick-out-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => 'quick-menu', 'echo' => false ) );\n if ( '' == $quickNav ) :\/\/in case the menus have not been setup\n ?>\n <ul id=\"quick-menu\">\n <li><a href=\"<?php echo wp_login_url(get_permalink()); ?>\" title=\"Login\">Login<\/a><\/li>\n <\/ul>\n <?php\n else :\n echo ( $quickNav );\n endif;\n }\n ?>\n <\/nav>\n <nav id=\"top-menu\">\n <?php\n $menuClass = 'nav';\n $primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => 'top-menu', 'echo' => false ) );\n ?>\n <!-- ...your primary menu html code....-->\n <\/nav>\n <\/div>\n <\/header><\/code><\/pre>\n<\/details>\n","protected":false},"excerpt":{"rendered":"