Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that our main menu works the way it's supposed to, I want to show you how you can create additional menus and place them elsewhere within your site. So I'm going to do that by creating an optional social media menu, and the menu's going to work by placing social media icons on the right hand side within my menu bar here. And the menu will be controlled from within Word Press as a separate menu. So that way the site owner can add new social media networks and organize them in the way she wants. The idea for this type of menu came from Justin Tadlock, who's a famous Word Press developer.
And if you want to learn more about where the idea came from, and how he implements you can go check out the article where he published all of these ideas it's called social nav menus part 2, and you can find it on his blog. The menu that I'm going to create is a little bit different, but it's based on the same principles. So what you see in the course will match pretty close to what Justin Tadlock came up with originally. But he's using Genericons, I'll be using Font Awesome and I'll also make some other small changes. The first step in getting this menu up and running is, we need to make WordPress aware that there is a new menu and that's done in functions.php.
So, I'll go to functions.PHP. And scroll down until I find this function called register nav_menu. And this is where we can register as many menus as we want. So now I need a new one, so I'll make a new line. And I'll give it a name, so I'll call it social. And then I'll give the menu a proper human name. And here I'll use that same markup that you see above. This markup is so that translators can hook in and change the name into a different language, if they want. Here, I'll say, my-simone, as the text, domain.
And that way. When someone wants to translate the theme, they can change this name into a different language if they want to. So now that I've defined the menu, I can go back to WordPress, go to the WordPress toolbar, select Menus, and here, if I go to Manage locations,. You'll see I now have an additional menu called Social Menu. So now I can create a new menu, so I'll click Use New Menu. This creates a new menu and I'll call it Social Menu. And then I need to populate my Social Menu, so I'll go ahead and select Links here and I'll put a couple of links through some social media networks.
So twitter.com/martin. And I'll set the link text to just the name of the social media network, because later we'll hide the link text. I'll say Google+ and Facebook. And now that I've created my menu, I have to make sure theme locations is set to Social Menu. And then I can save my menu. Now of course, when I go to the front page of my site now, you won't see the menu, because we have yet to tell the theme where the menu's going to appear.
And before we can do that we have to further define how this menu is going to work. So, what I'm going to do now, is go to the include folder and find the file called template-tags. And this is where we're going to put all our extra functions that are not necessary for the theme to work but add extra functionality and this is a perfect example of that kind of function. So here I'm going to create a new function that generates the menu and all the mark up we need for the menu. So scroll all the way to the bottom of this file and add some new lines.
And I'm going to go to my code snippets, and here you'll find all the code for template text. So I'm going to copy out this code here, and paste it in. And then I'll explain what's going on here. First, I have a comment explaining what this is, and within the comment they also have a link directly to that article I mentioned previously because this open source and you want to credit the people who come up with great ideas. Then I create a new function called my Simone social menu. And within that function I say, if the theme currently has a menu called Social, then I'll put the nav menu, and then wrap it in a div.
Give it a container ID of Menu Social. Give it a container class of Menu Social. And give each of the menu items the idea menu Social Items and each of the items, the class Menu Items. All of this will help us get Word Press to automatically generate the code we need so this menu is easy to style later. So now that I've created the function called My Simone Social Menu, I need to call the function in my template file so that it actually displays.
So I'm going to copy the name here, so I don't misspell it. Then I'm going to go to header.php and scroll down to where I have my menus. And like I said, I want this menu to appear next to the other menu, but shifted to the right. So here, underneath wp_nav_menu, I'm going to add a new line, add in the php to the limiter. Then just my new function name and end the PHP delimiter. So what'll happen now is header.php will call my function my_simone_social_menu from template tags and this function in turn sets up my menu so that the markup that comes out is exactly what I want.
So now I can save header.php. Go back to my site and reload it. And here you'll see that my menu items appear. And because I placed them within the structure of the main menu, they automatically inherit the same styling as the rest of the menu items. But right now, they're showing the menu item names, and not the social icons. And this menu is also jammed to the left, so it appears alongside the rest of the menu. Now I want to move this menu to the right and swap out these menu items for menu icons.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.