We demonstrate how to add a navigation menu to the footer of web page in our to our Community Library Case Study site. We create an administrative menu in the dashboard under Appearance and Menus and then we add a new function to our custom_functions.php to add this menu to the footer. We use the wp_nav_menu() function. After reviewing the CSS code in Firefox, we change the class of the menu and restyle it.
[This post contains video, click to play]
Video Transcript
Okay so we’re going to just dive right into the middle of this here and the first thing I want to do is answer a question that was asked on the forum about how to add a navigation bar to the bottom of the webpage. Now, we’re going to work off of this same website that we’ve been working on for the several weeks, this Community Library Website and we’re going to add a menu bar right down here. That is going to be a different menu bar than this. It’s going to be an administrative menu bar.
So we’ll go to the dashboard of the site because the very first thing that we have to do is create this menu. And I have created a bunch of blank pages here on the site. You can see book donations, how to reserve a book or our lending policy and support the library. I am just managing those administrative pages that we can add to the administrative menu so that’s why I did that. Anyway, we have those pages here.
So now what we have to do is create the menu. You create the menu under Appearance and Menus and if you’ve been following this, you know we’ve already created a main menu for this site but we are going to now create an Admin menu. Let’s call it footer menu. Okay then we’ll create that menu and then what we have to do is to add pages to that. And so if we scroll down here to let’s see, I’m looking for pages. Pages, here we go. Support the library, how to reserve a book, book donations and our lending policy. We’ll go ahead and add that to the menu. And then probably will just move around a little bit too. So how to reserve a book will go above, support the library, book donations, our lending policy… let’s see, I’ll put book donations up there too. So now, we have this menu that lays out like that and we’ll leave those names the way they are for the moment and we’ll just save the menu.
And now that we have the menu saved, we need to go back and look at the code that will add this menu to the page. First though, let’s just go ahead and start our function off. And so, this is our custom functions php file so I’m going to go ahead and copy this little header or the comment box. Give myself a little bit of room and this function adds the footer menu to the footer. Okay so let’s give it a function name, function byobfooter_menu, opening and closing parentheses, opening bracket closing bracket and then we’re going to… just before we get any further, let’s go and add the menu to the hook. So that’s add action single quotes Thesis hook footer and then the name of our function.
And if you’re watching this and you feel like you’re at the beginner level and this looks above your head, don’t worry about it. We deal with all kinds of different issues here.
So now this function adds a footer menu to the footer. We’ve got our function name, byobfooter_menu and we’ve added that function name to the Thesis hook footer, byobfooter_menu. Okay so now, we actually have to write the function that we’re adding there and you may recall from our previous lesson that we do… that command is called WP nav menu. So we’re just going to come down here and look at the codex reference for it again, just to refresh our memories. WP nav menu takes at a minimum, a single argument and that is the menu name. And so that’s what we’re going to do here. We’re going to… let’s see, in fact, what we’re going to do here… well, let’s just go back to this.
So we’re going to set up a variable args = array because we put an array of data in here and close that out with a semi-colon. And then the first piece of data in here is going to be… well, in fact, we don’t even need to… see how more complicated I can make this? By typing errors… okay so we’ll say a single quote’s a menu and then menu name comes in here. So equals greater than sign single quotes again and that menu name was footer_menu. Okay so at its very basic, it takes us 1 argument so now let’s go back and copy that argument from the… it’s this argument right here. WP nav menu args, go back to this and paste it and this code is going to now insert the footer menu in the footer just as it is right here.
So we’re going to save this quickly and come over to Filezilla. I’m already actually logged in to the site so we’ll just upload that to Filezilla to the site. Come back over to the site… yeah, let’s look at it in Firefox. You can see that there’s no menu down here now but when we refresh it, okay there’s our menu. Now you can see that this menu right now looks very much like the menu up at the top right? And that’s because by…without any other extra modifications, the menu here will mimic the exact style and behavior of this menu. And so, we don’t really want the menu to look like that so I’m going to show you how we do that next.
The easiest way to do that is to change the class of this menu. If we come up and just take a look at this class, you’ll see that it has the class of UL menu. So we have footer and we have div class menu and then it’s got the class of menu. So with the class of menu, it takes exactly the same styling as the class of menu does up here under our main menu which also has the class of menu. Now what we’re going to do is we’re going to give this instead the class the footer menu and it will lose all of that styling.
Okay so let’s do that and that’s another argument actually inside of this function and that’s the argument right here, menu class. If we don’t specify the menu class then it defaults to menu. But what we’re going to do is we will specify menu class and we’re going to specify footer menu which will give us a whole new class to hang on to.
And then so here’s our first argument, we’ll put a comma there, enter tab over and paste menu class… let’s see, backspace and backspace and this going to be called footer menu. Okay, we save this and we upload this to the site. And then we… okay so we save that, we uploaded it, we looked at… just for a moment, you just refresh your memory here again about this. It has the UL id of menu. In a moment, when we refresh this, it’s going to have… I’m sorry, the class not of menu but of footer menu.
And now, there it is and you can see the menu over here now. It has jumped off the side, it has taken a very simple styling. So the next thing we need to do then is add CSS to style this and we’re going to add that CSS to the class footer menu. So let’s see, go back to our… now, we’re going to go to custom CSS.
There are a lot of questions in here about CSS and HTML. I’ll cover some of those here after I get through this part of it. Most of the people watching this have a pretty good understanding of sort of the basics of HTML – CSS syntax.
So anyway, we’re going to create a new CSS class and this new CSS class is going to be header menu or footer menu. And we’re going to say… it’s actually going to be UL .footer-menu. So if we need to see that again, you can see that we’ve got a UL id of menu footer menu but we’re addressing ourselves to the class so it’s UL .footer-menu. If we were addressing ourselves to the id, it would be UL #menu footer-menu but we’re just going to address ourselves to the class. Makes it a little simpler, not a lot simpler, just a little simpler.
So the first thing we want to do is we want to give that a list style of none. That gets rid of our… in fact, let’s just do this in Web Developer instead of doing it here so we can watch it happen as we do it. Okay, open up our custom css file, here we go. Paste that there so that got rid of our little bullet points and then the next thing I believe… you know what? I just drew a blank on this UL menu .LI and we are going to say not list style none but let’s say float left. You know what? I think display block does this. I’m sorry, I hate it when I draw blank. No, that doesn’t do it. Anytime you want to dive in here, Brian and tell me what I’m doing wrong, I’m open.
Okay so either way, list style… it’s not going to be list style for this. I think maybe just float: left will work. Yeah, it works. And then let’s say padding and then 0 and 20 px. Yeah, so there… I mean, at its simplest, that does the trick here, right? The padding: 0 means no padding at the top and at the bottom but 20 pixels of padding on the left and on the right. And at its… really, at its most fundamental, that’s what we’re doing here is we are adding a set of links here that do this. We could you know, get a lot more… we can get a lot fancier with this if we wished to change the styling of these but I think that’s probably good enough for this point.
So we’re just going to go ahead and copy this custom CSS out of Web Developer, come back over to our custom css file, paste it, save the document, upload the document, and let’s see… test the document. Here we go, it’s working. So we’ve just added this thing here and obviously, if we wanted to, we can go back to Appearance and Menus and we could add the sample page to this as well, right? We could add the sample page, add it to the menu, save the menu, go back to the page and now, sample page is on here. So there’s a little bit of messing around we want to do over here too but…
Okay so that wraps up this little demonstration on how to add a menu to the… a 2nd menu to the footer.