Hard Code WordPress Menu Items, logout example

WordPress menus are one of the core features of any WordPress website, if you are creating WordPress themes and do not take advantage, you are missing out. WordPress menus allow you to easily organise your websites navigation hierarchy via their simple drag and drop editor.

WordPress Menu Creation

To create a WordPress menu, login to your websites administration area (usually yourwebsite.com/wp-login.php). Click on Menus > Appearance from the menu down the left hand side, you will be directed to a page similar as below.

Wordpress Menu Admin Area

WordPress Menu Admin Area

To create your menu, simply type the name of the menu you want to add, and click on the blue button labelled Create Menu. Once added a new tab will appear with the name of the menu you just created, in the example below a menu titled Main Menu has been created.

New Menu Created

New Menu Created

To add items to the navigation, scroll down the page to your relevant container and select the appropriate item, once you have chosen all the items from that list click on the add to menu button relating to that list. You should see that the selected items have populated your menu at the top of the page.

To change the order of any menu items, click on the item and drag it into the correct order, or slide it to the right hand side to make it a child item of the menu item above.

TIP- Make sure your click on the button labelled Save Menu otherwise any changes wont be saved.

Displaying a WordPress menu in the theme:

Now that we have a WordPress menu created on your website, we need to implement this with your WordPress theme. Browse to your websites theme folder, and open up functions.php, this should be located in your themes root directory, if there is not one, create on now (this file is automatically loaded along with your theme, its a good place to store your functions and settings). Once functions.php is loaded in your favourite code editor add the following code, this tells WordPress that the theme will be using custom menus.

add_action( 'after_setup_theme', 'jc_theme_setup' );
function jc_theme_setup(){
	register_nav_menu( 'primary-menu', __( 'Primary Menu') );
}

Once wordpress knows that the theme is registered to use custom menus, using the function wp_nav_menu() we will display your websites menu.

Hardcoding links to your menu:

This may come in handy if you want to add login / logout items to your websites navigation bar.

The following snippet will add a logout link to all your wordpress menus.

function jc_nav_menu_items( $items, $args ) {
	$items .= '<li id="menu-item-logout" class="menu-item menu-item-logout"><a href="'.wp_logout_url('/').'">'.__('Logout').'</a></li>';
	return $items;
}
add_filter('wp_nav_menu_items','jc_nav_menu_items', 10, 2);

To add a link to a specific WordPress menu, find the name of that menu and replace my-menu with your menu name.

function jc_nav_menu_items( $items, $args ) {
	if(isset($args->menu) && $args->menu == 'my-menu'){
		$items .= '<li id="menu-item-logout" class="menu-item menu-item-logout"><a href="'.wp_logout_url('/').'">'.__('Logout').'</a></li>';
	}
	return $items;
}
add_filter('wp_nav_menu_items','jc_nav_menu_items', 10, 2);


Liked this article? help spread the word.