0:01 Hey guys, in this video I'm going to 0:02 show you how to implement a menu in our 0:06 Bootstrap WordPress theme. All right, so 0:09 it's going to work a little different 0:10 than what you would do for just a 0:13 regular Bootstrap theme. I'm sorry, 0:15 regular WordPress theme uh because we 0:17 want to be able to use the drop-down the 0:20 Bootstrap dropdown um with our WordPress 0:24 theme. So we're going to use something 0:25 called the WP Bootstrap Nav Walker. 0:29 Okay, this is a class that we need to 0:31 download and just include in our theme. 0:33 So, what we'll do is you want to go to 0:35 this page and I'm going to just download 0:38 the 0:40 zip. Okay, we'll open that 0:44 up. And you should have a folder like 0:47 this. And we just want this file. We 0:49 want to bring it to our theme folder. 0:51 So, let's open that 0:53 up. Okay, this is the theme folder. And 0:56 we're just going to bring this over. 1:00 All right. And then what we're going to 1:01 do is go into our theme folder and 1:04 create a new file. We're going to call 1:07 this 1:08 functions.php. This is a very important 1:10 file for any WordPress theme because 1:13 this is where you can put all your 1:14 dynamic functionality. Okay. So, what 1:17 we're going to do is we first want to 1:19 require that file that we just put 1:23 in. Okay. Okay. So, we're going to say 1:26 uh actually let's put a 1:32 comment. Okay. So, we'll say require 1:37 once and we'll pass in 1:42 wp 1:46 bootstrap 1:49 navalker.php. Okay. So, that'll bring it 1:51 in. Now, we're going to create a 1:53 function to add theme add stuff 1:56 um for our theme to support. All right. 1:59 So, uh let's say 2:03 theme support. Whoops, I didn't want 2:08 that. Okay. So, this will be a function. 2:11 And I'm just going to call this theme 2:16 setup. All right. And let's go ahead and 2:19 add support for nav 2:23 menus. Why does it keep doing 2:27 that? Okay. So, we're going to say 2:33 register_nav 2:35 menus. All right. And that's going to 2:37 take in an 2:39 array. And we're just going to have one 2:42 menu. And it's going to be in the 2:43 primary position. 2:48 All right. And then for the text, it'll 2:51 just say primary 2:54 menu. All right. And this double 2:57 underscore function, this is just a 2:59 localization function for WordPress. Uh 3:01 you want to wrap that around any static 3:03 text that you 3:05 use. All right. So that'll that's that. 3:08 Now, in order for this theme setup 3:09 function to run, we need to create an 3:13 add action function. All right. And what 3:15 this does is we can choose a hook to 3:18 hook into and run this. All right. And 3:20 if you look at the documentation, 3:21 there's a ton of different hooks you can 3:24 use that get fired off at different 3:26 times. The one that we want is called 3:28 after setup 3:32 theme. All right. And then the second 3:35 parameter is just going to be the name 3:37 of the function we want to run, which is 3:39 theme setup. And we should actually 3:42 prefix this. We'll say um 3:46 WP 3:48 WPB we'll use that as a 3:52 prefix. 3:54 Okay. So, we can save 3:57 that. Now, if we look at the GitHub page 4:00 for the nav walker, you'll see this 4:02 right here, uh this WP nav menu 4:05 function. All right. So, we want to 4:07 include some extra stuff here. Okay. 4:10 Okay, normally you wouldn't have stuff 4:12 like the walker. Um, you would basically 4:15 just have the theme location, uh, 4:19 classes, things like that. But we're 4:20 going to go ahead and copy this. And we 4:23 want to go to our header file where we 4:25 have our 4:28 menu. Now, the way this is set up is is 4:31 different than a regular WordPress 4:34 navbar. So, it it's probably going to 4:36 look a little different in this 4:38 particular theme. Uh, I didn't really 4:40 realize that before I started. Um, you 4:42 can see we don't even have a UL here. 4:44 And the code that we paste in is going 4:46 to generate a UL. So, it might be a 4:48 little different, but let's just go 4:49 ahead and replace everything inside of 4:51 this nav tag with what we just 4:54 copied. Okay. And then we're going to 4:57 save that and go back and reload. And 5:01 now you can see we have this add a menu 5:02 because there's no menu assigned to 5:04 primary. 5:06 So if we click that, it's just going to 5:08 take us to the back end here. So we want 5:11 to go to if we reload appearance and 5:14 then menus. All right. And then what 5:17 we'll do is we'll say main 5:19 menu, create menu. And now you should 5:22 have an option for the primary menu 5:24 location. So you want to check that. And 5:27 let's go ahead and 5:29 save. We'll go back and reload. And now 5:32 you can see we have well looks like the 5:34 only thing that's really wrong is that 5:36 the the the color is blue. So let's go 5:38 ahead and change that. We'll go to our 5:42 stylesheet and go down to the bottom 5:47 here and let me see what do we have for 5:49 a 5:53 class. Okay, so 5:55 blognav. All right. So, we'll say 5:58 blognav 6:00 a 6:02 color 6:05 white. Okay. Oh, good. That worked out. 6:08 Now, hopefully the the um Oh, let's do 6:11 the hover as well. 6:26 All right. So, I just want to check out 6:29 um if the dropdowns are going to work. 6:32 Now, in our uh 6:35 footer.php, we need to we need to 6:39 correct this because right now it's 6:41 looking in the Wordstrap root for a JS 6:44 folder. So, we need to just make sure 6:45 that it looks in the template. So, we're 6:47 going to say blog 6:51 info template 6:55 URL slash and 6:58 thenjs. All right. So, let's save that. 7:01 And what we're going to do is create a 7:03 couple 7:04 pages. So, let's create 7:11 about. Okay. And then let's create 7:14 another one. And we'll call 7:17 this our 7:20 team. And what I want to do is over here 7:23 I want to choose about as a parent. All 7:26 right. Now, this isn't really going to 7:28 matter with the menu because we can set 7:30 parent and and child items from within 7:33 the menu section, but um I'm just going 7:35 to do it anyways. And then we'll create 7:37 another one called services. 7:46 And then let's go to 7:48 menus and we're going to bring over 7:51 about services and our team. And then 7:55 what I want to do is put services under 7:57 about like this. Same thing with our 7:59 team. And then we'll save it. And then 8:02 let's go back to the front 8:04 end. And now we have a dropdown. 8:08 Perfect. That worked out good. 8:12 Now, if we go to one of these pages, 8:13 it's not going to be any different 8:14 because we this is still all static 8:16 HTML. All right, but we know our menu is 8:19 now working. 8:22 All right.
1:38:36
1:40
7:18
43:53