Add a Secondary Top Menu in WordPress

Apr 25, 2018 | WordPress Wednesday

In this video, Kori shows us ways to add a secondary top menu in your header on your WordPress website.  She will go over a couple of plugins and a cool nerd way of adding the secondary menu.  Check this out!


Video Transcript

Hey, y’all. Welcome to another WordPress Wednesday. My name is Kori Ashton, and you have found a video in a YouTube channel with over 200 different free to watch WordPress videos, how to improve your WordPress website. And today we’re gonna be looking at navigation. So how do we add a secondary top menu option?

Some themes are very generous and allow you to easily select and build out different areas that you could have different navigation. Like this one up here.

secondary-top-menu

If you see at the very very top of the video, we’ve got a secondary option across there. How do we build that out on a website that might not just by default offer you that? First of all, be sure your theme doesn’t offer you that. Secondly, I’ve got two different plugin options, free plugins that might meet those needs. And then third, stick around toward the end. I’ll give you a link to a very detailed nerd code description of how to build this out the long way inside of your functions file and actually create with nerd code menus. So don’t worry about that though.

header-footer-pluginWe’ll start with the easy route. I’m gonna give a quick example. This is the template that I’m playing with right now. I wanna put a menu across the top up here. How would I do that? I found this plugin header and footer. As of today it has really great reviews. A lot of installs and it’s been tested nearly up to my version of WordPress right now. So I’m gonna go ahead and give it a go. Inside of your plugins you go plugins, add new. You do a search for it. This is what you would find. You’d wanna click install now, and then activate. I’ve already done that for the sake of this tutorial. Once you’ve activated it, inside of settings lives an area called header and footer.

This allows you to get in and see, to get in and access your header and your footer across the board. So check this out.

header-footer-plugin-sections

You could go just in your posts area if you wanted to. Just into your pages. You could be putting Google ads in here. You could be doing all sorts of cool stuff. But we’re gonna use this for the sake of now. We’re gonna use it in the after body area. This opens up the body of your website. So that should drop in your content right here.

Now before you start tinkering, please be sure you have a backup of your website in place, and be sure that you know how to get to that backup and click restore in case you’re working in a live environment right now, right? If you don’t know what I’m saying, please stop this video. Go into the description box and I have a video there about how to back up your WordPress website. You must do that before you start tinkering with stuff like this, because we could really mess something up.

So we’re over here in the header area. I’m just for the sake of now gonna show you here, and I’m gonna go down to the bottom and just click save. So I can show you where that shows up on the front side of our website. If you see it right over here on the far left-hand corner, there it is. It’s right before our body tag. So we’re gonna pop in here and we’re gonna write some nerd code and create it into a menu.

header-footer-adding-code

We’re just gonna write the link.php. So whatever your link name would be, would go right there, right? And then you close that link. And so for the sake of quick time here, I’m just gonna do a couple of these and we’re gonna say here 3. And we’ll say here 2. And let’s go save so that you can see what it looks like. So here is our menu here, here 2, here 3. And all of those will be clickable and create a little menu space. Now that’s really, really, really super simple, and if I went too quickly, pause or rewind me. But all that’s doing is putting links up there. If you wanna add some color around it, you might have to do a div class, you might have to write some CSS.

Now if that goes way over your head, let’s look at this potential option for you. This is another video I’ve done that allows you to put an alert message at the top of your WordPress website. You can see there’s a different bar of color up there. You can add in links if you wanted to. This could be an option for another menu to sit up at the top. So check out that video. I’ll put the link there in the description box below.

If for those of you who wanna go crazy nerdy, WPMU DEV has an amazing tutorial on how to actually do this custom coded all the way out. So you’ll figure out your child theme. You’ll come in here and go into your functions file. This is super, super nerdy. But if you wanna go for it, challenge yourself. I know you can do it.

I hope you’re having a great WordPress Wednesday. I’ll see you next time. Bye, y’all.

How to Backup Your WordPress Website

Header Plugin

Alert Plugin Option

Nerd Code Route – WPMUDEV