Custom menus to WordPress themes. -Pittsburgh web development.

Posted

Using php to add a custom menu navigation to your WordPress theme. ENAC, Pittsburgh’s rising web powerhouse.

Lets get started with making the new navigation. Go into your functions.php file and get some space to add some code. We want to use the WordPress function“register_nav_menu()”  what this does is it tells WordPress that we are going to add a new menu, we are going to put it in a function so we can add as many menus as you we would like, we could also add this to the BlankSlate register_nav_menus() function, but for now we are showing you it this way because this will help us understand the WordPress function. So we created a function called “register_animated_menu()” and added the “register_nav_menu()” built in function inside it, you can name the function whatever you like, then we use the WordPress “add_action()” function to call our menu.  Our final line looks like this:

 


add_action('init','register_animated_menu');

What this last sentence is saying is “please register the function register_animated_menu on after WordPress is loaded but before the headers are sent” that is the ‘init’ tag.

Our final code looks like this now.

register_nav_menu() WordPress image

The first ‘animated-menu’ is the name for the WordPress back-end to use for menus and the “__()” function is for language purposes, the ‘Animated Menu’ inside the function is the name that will show up on your WordPress dashboard.

AWESOME!!!

Now we have that set up, we have to go into the file that we want to add the menu and add it now. I made a secondary header file and named it, well, “header-secondary.php” we will show you how to use this at a later date, but for now we just copied the header.php code into it. We are going to use the “wp_nav_menu()” function that is built into WordPress to make this menu “appear” in your code. We wrapped this code in the normal “<nav>” so the first line looks like this:

 




&lt;nav id="menu" role="navigation"&gt;

We give it an id, and we add the role=”navigation” for screen readers and such. (Always remember ARIA) then we start the php. *although you can add an id to this nav in order to style it this way I personally do not recommend that as then that will be static, maybe you want to put two different style menus in that location, they will both be stuck with the same style if you know what we mean….

Anyways, so we use the built in “wp_nav_menu()” we wrote ours like this:

 

&lt;?php wp_nav_menu( array( 'theme_location' =&gt;  'animated-menu',
                    'container_id'   =&gt;  'animated-menu',
                )     );
?&gt;

Ok, so line 1 is our opening php tag, line 2 we call the function, now here is the tricky thing, line 3 we are  giving the theme location, we did not know where we are putting this menu yet so we gave it a generic name of “animated-menu” THIS NAME MUST MATCH THE NAME OF THE MENU IN THE FUNCTIONS.PHP FILE. Remember this function:

register_nav_menu() WordPress image

Then the ‘container_id’ is the id you want to give this navigation, we just made it the same as the menu name for WordPress, this makes no difference in functionality of it working. You can name it sparkleKittenSurprise for all we care. close it up and close the nave and there you go you are all finished with it. Our final outcome looks like this:

wp_nav_menu() WordPress image

Awesome, all done. We am going to go over why it is a bad idea to style stuff based on static id’s now. Say you wanted two different menus but in the same area, like so:

wp_nav_menu() WordPress image

If you styled them off the <nav> id, then both of these menus will have the same style, when using the ‘container-id’ these menus would have a different id to style off of.

Ok, let us go into our dashboard and look under menus and see what we have.
Manage Locations WordPress dashboard image

BADABING-BADABOOM IT IS THERE.

Awesome now just to make sure lets get that menu set up and inspect it, I threw in some pages and added the items to the menu, and:

Google inspect WordPress Navigation Image

Looks like the id is all there,awesome!

If you are looking to hire ENAC for you next Pittsburgh web project, contact us here.

Leave a Reply

Your email address will not be published. Required fields are marked *