Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:19Length:2.2 hours
  • Overview
  • Transcript

4.2 Add Touch-Friendly Responsive Menu Copy

Hi, this is Kezz. Welcome back to WordPress Theme Creation with Underscores. In this lesson, you're going to learn how to add a fully touch-friendly responsive menu into your theme. This means that if you have people who are on, for example, a larger screen touch device, so they don't have access to hover interaction, they're still gonna be able to properly interact with your menu. Now in the Underscores theme, the HTML and PHP that controls the nav menu is housed in the header.php file. And we're gonna do the same thing that we just did with our functions.php file where to make sure we keep track of our customizations. We'll make a duplicate of header.php and we're gonna rename that duplicate to header hyphen original and just put an underscore at the start of that file name. Open up your header.php file for editing and scroll all the way to the bottom and now we're gonna highlight these two lines here. That's the button, HTML, and the PHP snippet with wp nav menu inside it, and we can replace that code with this. We're doing three things here. Firstly, we're adding some screen reader text for this section. And we're just calling it main navigation. And that just helps screen readers that are going through that recognize a nav element there to understand what that nav element is for. Next up we have a navigation icon. And this is gonna give us one of those little three line hamburger icons. And we're swapping that out where the button used to be. And then thirdly we have almost the exact same nav menu setup here. But if you notice we have this little extra attribute being passed. Depth is two, and we're doing that because we just want to have drop down menus, but we don't want to have a third level flying out because that's just a little bit harder to make work with my ball devices. If you have a flyer you can often have menu items that are going right off the screen and that becomes difficult for a touch screen and mobile device user. At first when you look at the effect of the code you just added, it's gonna look a bit broken. But don't worry, there's nothing wrong. It's just that we haven't styled our new menu at this stage. Before we add in the styling that we need for our menu, we'll first get rid of the temporary basic menu that we added in the last section of this course. So in your custom styles file, find this code that you added, and go ahead and delete that. First we're gonna add some coloring mix-ins, just like we did in the last stage of the course. This new menu is gonna have two different forms. It's gonna have its expanded form, which we will show whenever the layout is wider than our total site width value, and we're gonna have a compacted menu that will show whenever our site width is lower than our total site width value. These first two mix-ins affect the expanded version of the menu. Now our top level of our menu is still going to look the same as it does now. But the drop down, the child menu, will need styling. And that's what these mix-ins will do. These next three mix-ins will affect the compact menu. And we've got some different styling for our top level menu items in this case, with our compact menu item mix-in. And then below that we have the styling that will affect the child menus on our compact version and the individual child menu items. Now jump into the custom menus file, so that's in your custom folder inside navigation and then menus .scss. And this time I want you to highlight everything from line 1 through to line 78. And that's everything up to just before the site-main comment-navigation style. And delete all of that code. We can add three new sets of menu styling. First we're going to add some CSS that's going to apply to the menu at all times, whether it's expanded or compact. Then, we're going to add some styling that applies only to the expanded menu version. And, following that we'll add some styling that will apply only to the compact menu version. Our code that applies to the menu at all times, whether it's expanded or compact is this. And this really just handles the basic process of turning a normal unordered list into a menu. So it removes the bullet points. It makes sure that the user gets a proper pointer cursor when they're over the menu. And so on and so forth. It also sets up our switch symbol. And we're gonna have a little plus symbol that will appear to the right side of any menu that has a child menu item below it. And then we're also setting that child menu to be hidden by default. The code that applies to our expanded menu version is this. You see the first thing that we're doing here is using a media query to ensure that this code is only used if the site is larger, is wider than the total site width value that we've been through earlier. The first thing inside this round of code is setting our nav icon to be hidden. And that's because that's gonna be a toggle we use in our compact version. So we don't need that in our expanded version. And then most of this code is really just taking care of layout. Now we are setting our top menu items to sit next to each other horizontally. We are organizing how our child list will be positioned when it's activated and then we're including some of the styling mix-ins that we created earlier. If we save and compile what we have done so far, this is where we are at. So it looks alright now, it looks just like it did before, we are not seeing anything that looks broken, but we are also not seeing anything that tells us where there are any child menus. Now to handle this, we are going to include a little bit of JavaScript. From the root folder of the theme, the JavaScript is contained in this folder named JS. Into that folder, you'll need to paste a file that you'll get as part of your source code access and that file is named navigation-custom.js. And we're going to be using that instead of the navigation.js file that comes with the theme. But this file holds a little bit of jQuery that's gonna handle adding in a plus switch on the side of any venue that has a child under it. And it's also gonna handle all the opening and closing for the menu. To load that into our theme we're going to go back to our custom_functions.php file and we're going to add a little bit more to our enqueue_style_scripts function. I want you to add this code. Oh, here we're using the WP enqueue script function, which is really just like the WP enqueue style function, only you use it for loading JavaScript. In the first parameter, we've given a unique ID to our script that we're loading. In the second parameter, we've provided the location of our script, and then you'll also notice we're adding a third parameter, and this is the dependencies for this file. And this file needs jQuery to already be loaded before it runs. And by adding jQuery into this third parameter, we're telling WordPress that it should load up jQuery before it loads this file. Now that we're loading our own navigation JavaScript, we also just need to let the theme know not to load the default navigation JavaScript. So open up your functions.php file. And we're gonna need to comment out the line that's currently loading the default navigation JavaScript. The easiest way to find that is just do a search in the file, and look for navigation. And that should jump you straight down to this line where the theme is currently loading the default navigation JavaScript. So, comment that line out, and save your file. When we take another look at our theme now, we can see we've got our little plus symbols, and they act as switches to turn the child menus off and on, to open them and close them. So clicking on the plus button will open up the child menu, and then clicking it again will close the child menu. And because it doesn't need any hovering to see those child menus, this menu will now work for all devices, even if they don't have the ability to expand something by hovering over it. Now that we have our expanded menu all up and running, we are ready to add the code for our compact menu. Now, the first line, again, of this code is a media query and we use this to make sure that our compact menu only shows up when the window is less than, or thinner than, our total site width value. This time we have the nav icon showing and we're aligning it to the right and setting its size and its spacing. Then we have our styling for our top level menu in our compact menu. And, this time instead of having all the menu items lining up from left to right we're having them stacked vertically one on top of the other. And we're applying our compact menu item coloring mix-in to those top level list items. And then, below that, we're adding a little styling to the child items in our compact menu, pulling in the mix-ins that we created a little while ago. With all that code editing, when the site is at a narrow width than our total site with value, you'll see the expanded menu disappear, and a nav icon will pop up instead. And when that nav icon is clicked on, it will open up our menu in a vertical stack below it. Clicking the little switch next to any top level menu item that has a child menu works just like it did in the expanded menu, showing that menu, and closing it as you click the switch. And when the user wants to close the whole menu down, all they have to do is hit that nav icon, and the whole thing will be compacted again. A feature in WordPress themes that's often in pretty high demand is Featured Images, otherwise known as Post Thumbnails. In the next lesson you'll learn how to enable those in your theme. I'll see you there.

Back to the top