Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So our sidebar is looking good. Structurally it's in place. We have our navigation that you can see here, but this navigation is pretty much just a copy and paste from our static site that we are working in, that you can see over here, it's just static. We're basically going to get rid of that. Gone, and we're going to replace it with WordPress 3.0's new dynamic menu system. It's really nice. it's specific to WordPress 3.0, which we'll be covering here in a minute. So, let me just save that and you can refresh this page and see that our navigation is gone here.
And I'm also going to go to the wp-admin here. Under Appearance and Menus is where you build these new menus in WordPress 3.0. Now, it's giving us this warning up here at the top here and says this theme does not natively support menus and it's giving us that warning because we haven't declared any new menus. So, in order to kind of enable and use this feature, we're going to have to do a little bit of coding to enable it. That happens in the functions.php file. So, at the bottom of this, we're going to keep the stuff that's in there.
The stuff that's in there is good and helping us out, but we're going to add some new stuff at the bottom. What we're adding is a new function called register nav menus. So, register_nav_menus and we're going to pass to that function one parameter. That's an array and in this array, we're going to say 'main_nav'. We're declaring this, 'main_nav,' and we're going to give a description of 'Main Navigation Menu.' So that's that.
We have called it, we can save it, we can refresh over here and it's going to not give us that error anymore, but we should future proof or even more appropriate kind of past proof our code here, in that this function, register_nav_menus, is specific to WordPress 3.0 and later. So if you were to grab this code and use it on a WordPress 2.9 site, it's going to give you a PHP error. A show-stopping PHP error that will prevent your theme from even running at all, which is bad.
So, we're going to wrap this whole bit of code here in the special PHP function. It's not WordPress specific. It's just a PHP function called function-exists. So, if function_exists, and you can see an example of it up here. This is for widgetizing a sidebar. Now that didn't exist forever in WordPress in either. So this code is kind of past-proofed and then it wraps this register_sidebar function in the same thing. So, we can even copy and paste. We'll just steal their version of it. Only we are not testing for register_sidebar; we're testing for register_nav_menus.
So we'll do that and then close out that if, and we have some past proofed code here. Now, if we save this and reload, nothing is going to change at all over here, but since this is enabled, we can now create the menu that we want to create. So, let's start by doing that. We'll call it Main Nav Menu. No problem. Create Menu. Now we need to fill that menu with stuff. What do we want to fill it with? Well, if you remember back in our static design, we have homepage, About page, Contact page, all these things we need to have in our menu.
So, how do we fill our menu with it in the WordPress site over here? We don't have any content yet to do that with. So, let's just quickly create some content so we have some pages to fill it with. So, what were those things again? Now that I'm in the pages land, I have a little quick link up here says New Page. So I'll click New Page and I'll make the Contact Us page. We have a special homepage for our site. So I'm going to make a homepage and publish it. I'm not worrying about filling these with content. I just need the pages to exist, so I can make a menu out of them. I have a blog.
Does that cover it, or are we missing one? We've got four in there and we're missing one. So, let's look and see what it was again. Buy Widget! That's our dtore page. So, we'll jump back and make the store and hit Publish there. So we have the five things that are what we plan on being our main navigation menu at least for now. So we'll go back under Appearance, under Menus, and we're going to need to add stuff to this menu that we created. So, one of those things that you can add to a menu is existing pages. So here's those five pages we just created.
I'm going to go ahead and check all of them and click Add to Menu and they're going to pop over here into this area. Now, I'm just going to hit Save Menu and then I'm going to go ahead and Command+Click so we can look at the front end of this site again, and nothing is there. It's because we haven't put anything in our sidebar.php file where we deleted that old static menu. We need to put some code here to output that new menu that we just created. So, the function for that is WP nav menu. So, we'll open up PHP. It's a PHP function, wp_nav_menu, and we pass it again one parameter.
That's an array and it's menu and then we need to say what we called that menu. So, let's go back into the WordPress admin and copy and paste exactly what we named that menu. So this bit of code is outputting that new menu that we built. So, let's hit Save, go back to the front of the site, and reload and you should see our menu pop in there, which you do. Fabulous! So that's looking good. Now, why did we do it this way? Specifically so we could get all the cool dynamic stuff that WordPress menus can do.
So, back in the admin, I can drag these things around and kind of match what we've done before. So, let's take a look at what the order was before. We want it to go Home, About, Contact. I can just drag these things around, Homepage, About. Notice how it indented a little bit here. That's going to make it a submenu. We don't want that. I'm going to drag it to the left, so they all stay on one level. Home, About, Store, Blog. Now, if I hit Save, jump back over to the front, you'll see them rearranged themselves in this order.
So, boom, they've rearranged themselves. Now, the color stays the same because of our all little smart CSS trickery, how we colored them based on their position, not based on what they are. So, no matter how we rearrange them, they'll stay in this color pattern, which we prefer to stay in that pattern. So, you can imagine that this is a lot easier for our client to deal with, and really it's easier for you to deal with too. If you ask me, if you just want to change a few things, add a few things, it's a lot easier to do from the admin than it would be to have to jump into a code editor and edit these things.
So, if your client, they want to add a link to Google.com, they can just add a custom link, just hit Add to Menu and it'll pop down at bottom of this menu. Just hit Save, reload over here, and you'll see Google pop right in there. They can rearrange that of course, hit Save, and see Google jump up in that menu, whatever. You can get rid of things really. So we will just click this arrow to drop down, hit Remove, it's gone, hit Save, jump back to the front, reload the page, and Google is gone.
So, you can see how dynamic and easy it is to deal with menus and that will serve us well in the future.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 103006 Viewers
61 Video lessons · 89671 Viewers
71 Video lessons · 73321 Viewers
56 Video lessons · 104896 Viewers
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.
Your file was successfully uploaded.