Menus and Menu locations
With the new theme set as active, if we open the Dashboard and expand Appearance, we notice that in comparison to other “complete” themes we are missing quite a bit.
Let’s begin by activating Menus on our theme.
We edit the file functions.php and include the following code:
function my_first_theme_setup(){
//add support for menus: we need to add this for WP to offer the entry:
//Appearance-->Menus in the Dashboard
add_theme_support('menus');
}
/*
link the init or after_setup_theme hook to our callback.
Whenever WP executes the registered event it will call our callback
*/
//we could do this
//add_action('aftter_setup_theme','my_first_theme_setup');
//but we are going to do this instead
add_action('init','my_first_theme_setup');After that, our dashboard should show the Menus Button. Great, we have added our first feature to my-first-theme.
Menu locations
In order to show menus on the page, we need to:
- Define some locations and …
- “Place” those locations on the actual PHP or HTML code of our page
Let’s define two locations, one called ‘primary’ that we will use the main Navigation on the page and another called ‘secondary’ which we will use to show a different menu in the footer or our page. To do this, we edit the file functions.php and insert the following code in the callback my-first-thema-setup:
//add a custom menu-location called primary
register_nav_menu('primary','Primary Header Navigation');
//... and another called secondary
register_nav_menu('secondary','Footer Navigation');The complete callback and action block now looks like this:
//callback for theme setup
function my_first_theme_setup(){
//add support for menus: we need to add this for WP to offer the entry:
// Appearance-->Menus in the Dashboard
add_theme_support('menus');
//add a custom menu-location called primary
//.. this will be our main navigation
register_nav_menu('primary','Primary Header Navigation');
//... and another called secondary
//.. this will be used only for the footer
register_nav_menu('secondary','Footer Navigation');
}
/*
link the init or after_setup_theme hook to our callback.
Whenever WP executes the registered event it will call our callback
*/
//add_action('aftter_setup_theme','my_first_theme_setup');
add_action('init','my_first_theme_setup');Placing the menus on the page
Now that we have defined the locations for the menus, we need to tell WP where to place them on our page. We decide that the “primary” location will be part of the header and shared by all pages. The “secondary” location will be placed in the footer and will also be shared by all pages.
We edit the file header.php and insert the following after the <body> tag.
<body>
<?php
wp_nav_menu(array('theme_location'=>'primary'));
?>And in the file footer.php we insert between the <footer> and </footer> tags the following.
<footer>
<p>this is my footer</p>
<?php
wp_nav_menu(array("theme_location"=>"secondary"));
?>
</footer>