Extending WordPress - Menus

well good morning good afternoon good evening everybody welcome back to another live training here at WP studio we are going to be talking about a ways of extending WordPress with the menu system now before we dive into it there are tons and tons of plugins that are available both free and premium in the WordPress repository or through different companies that build plugins that can help you extend the menu system enhance the menu system and all sorts of things what I'm going to try to do today is stay away from all other plugins I will show you one or two simply because it may make life just slightly easier but almost everything you want to do to extend a WordPress menu can be done with a just a little bit of code or a code snippet or using some of the built-in features so just so you know kind of where we're going some some fun things that we're gonna do if you take a look at this menu that's going on right here notice that there are a number of things that do not come out of the box with WordPress like embedding your search box into the menu system now I have not styled anything so this is just straight as is with just one or two tweaks the other idea is the ability to have a login logout so for example if I click this button it's go literally going to log me out and then when we look at the window when we're now logged out we can see that oh we can just log back in all built into the menu system it handles it for you and I hope I have the password saved because if I don't have the password saver I'm gonna have to go look it up okay perfect so notice how that's something that we're gonna be able to add with Xero plugins we can have a login logout for a menu makes it great for membership and it's literally only like two lines of code plus if you take a look at this notice how there is an icon going on here so I want you to see that we're going to do all sorts of things without any plugins so let's get started by I'm gonna bring over my browser window that Wow for some reason it is not likely to be dragged and dropped Chrome I think is just it's almost having a heart attack right now okay looks like I got it okay so we're over here in the one of our test sites that we've been working on and this test site it doesn't really have anything going for it just yet the menu system in WordPress is a powerful system that does allow you to manage locations that mastaba shhhhht by your theme and in just a moment I'll show you how we can add new locations and then you can manage each menu by whether it's pages posts other custom post types as well as dragging and dropping each item okay all this should be already understandable to most of you who have been using WordPress but where what gets people even for people who've been working for a long time in WordPress is this screen options area if you have not used this in your WordPress site you're missing out because there are several areas that you can take advantage of so in the menu area we've got normally none of these are selected yeah beer types I think that had to do with a custom post type or taxonomy we created in a dump in another webinar so this is what happens when we reuse websites for training we have strange custom post types showing up okay so by default none of these are checked so when all of these are unchecked you just have a very basic navigation system here and here so that is something that is is not going to be very very helpful so if you only do one thing it is this add your CSS classes because all of a sudden that's going to open a box for every single one of your menu items a CSS class if you enable link target now you can choose to open that in a new window which is great if you have on one of your menu areas a link to an outside source and we're gonna create that in just a moment the title attribute is basically going to assist in screen accessibility things that especially if you're gonna use icons which we will in just a moment and no label you need an attribute and this will make sense when we make our first social network thing because anybody who has a screen reader if all we leave here are icons in stand we get rid of the label for our link they're not going to know what it is for so we need the title attribute in there and finally some themes you can add a description so that you know this is kind of where we're getting into mega menu type things where you hover over the item and maybe there's a description that shows underneath the menu some themes will support it out of the box but the only way they support it is if you check the box so it's not gonna be there so what we're gonna be doing today we're gonna use all three of these now so I'm just gonna quick save this menu just because I made quick changes the first thing to understand when we're looking at this menu is I put an icon there I simply went to - icons a part of WordPress and I selected the first - icon that showed up which for me this early this morning was - icons buildings so if I drop the CSS class into here all of a sudden icons get placed into the menu I didn't have to do any CSS I didn't have to do any customization what I was no you're gonna notice that this is a different font than this then the default well that's because - icon is now the font for this menu item sure we can go into the inspector and take a look at this and simply adding - icon is going to add a before pseudo-class notice how it now adds a - I con before that is what happens when we use - icons in the CSS class now we don't have to use this we could use other CSS classes that in our stylesheet we change the color the font the size all these other things we can do all of that in here so this is a very powerful region but in order for me to demonstrate something we're going to make you know up here this is actually a hook area that I've taught you how to create with the você theme in a prior webinar but instead of building a an actual hook based area where a large structure of content is being placed into here we're going to use the built in menu area here to create kind of our social linked icon so this is step by step and what we're gonna do right now you can do with any theme right now so it doesn't have to be the você theme so let's start by creating a new menu so we do this by coming here create a new menu and we're gonna call this new menu social links okay so let's go ahead and create this menu now we're going to assign it to the header menu which if you haven't used the voce theme is basically right here it's on the side the right side of the the header area so we're gonna assign that then we are gonna come over here and we are going to use custom links custom links in the menu system is not attached to any type of custom post type taxonomy anything so what I'm gonna do here is I'm going to we're gonna make just some very basic things and I'm not gonna link to anything specific so we'll make a twitter.com and I'm gonna put the link there we need to make a few of them you're gonna see them show up here let's create a Facebook calm Facebook we're gonna adjust the items when we get over here and then let's come over here we'll do LinkedIn oops maybe I should actually linked in com linked in and then there's a reason I'm gonna go check something - icon the WordPress thing that's already included in WordPress I'm gonna scroll down here because they do have a social section and there's a social section of already made icons so there's Twitter there's Facebook let's do a Google+ there I don't even think well maybe we shouldn't do LinkedIn so all to use this is LinkedIn even though that's not it and then we'll do let's do Google okay so we have four items here now if I simply save this menu and I'm going to show you step by step we're gonna go back over here and we're gonna see that we have oh I know what's going on hold on we have I have extra spaces going on in the menus so let's go ahead in and I need to pull up my stylesheet cuz if you look at the stylesheet I actually made custom made widths of the list items so let's go ahead and let's change this to fifty pixels I want to actually give some space and again I'm going to change the stylesheet version number so it automatically updates okay so notice how I've got some other issues because our logout login and the search are also being Auto inserted I'm gonna get rid of those because that was just for the example we're gonna come back we're gonna use these later so I'm just commenting out the two codes that I'll talk about later okay so now here we are so we have see how we have Twitter Facebook Linkedin Google let's actually make this a little bit longer I want to I'm trying to space it out so there's no confusion of what is overlapping I'm just changing the version number all right okay so we're now good so here's our twitter facebook linkedin google now at this point this is where all the stuff we did in the screen options to turn on the options we're going to start to adjust the menu and we're gonna open up the menu if it will open up and first we want to make sure every single one of these opens in a new link because when we're gonna send somebody from our own website to our social network link we we don't want them to lose our site because then you basically they get dumped down the rabbit trail of the social networks so we're gonna use that open link in a new tab notice how it's not new window that's this is now the preferred way of opening links and most browsers respect that even if you do blank it's going to open a tab so WordPress basically now just uses this as the language it's not a custom attribute in the anchor tag it's simply using this the the target blank that we've always used except the way browsers now work is they are always going to open up a new window in a tab that's why you see this and not open a new window all right let's save this so we don't lose any of that now at this point we're going to start using the dash icons in each one of the CSS classes so we need to find them so let's start with Twitter we come over here and we see dash icons Twitter now there's two things we have to do when we're working with just dumping the CSS class for dash icons we have to actually first use the CSS class - icons alone and that loads all the information about the font and everything that needs to be done and then we add after that a second the actual copy-paste that we did here - icons Twitter so that's what we're gonna do for each one we're gonna go to Facebook let's go grab the social network for Facebook and you can choose which one you want to use we're gonna add - icon whoops that's the title attribute in the CSS class - icons - icons Facebook let's get LinkedIn I said I was going to use this one instead since we don't really have a LinkedIn one default go to the CSS class - icons paste and then finally we'll use the Google Google+ let's open this - icons Google+ did I have a typo there are a number of spaces that are coming Oh cache icons huh - icons don't grow on trees okay so now we're gonna save this money menu and when we go look at this we should actually see the icons showing up but notice how the icons are automatically placed before the text so at this point we can now come over here and let's get rid of the navigation label and we're going to put the navigation label in the title attribute you're gonna see it the reason why we're moving the attribute the name of each link because I'll I'm gonna open up the source code here in just a moment and each one just simply gets moved down and we save because we have the icons in there hopefully I didn't break it I did break it oh let me see if okay that is weird did you guys see what just happened I think I found a bug in WordPress all our menu items just went away okay the menu did literally just disappear that is a bug because you used to not to have you used to not have to be able to put a link text in there all right now I'm gonna have to do it let's just do one of them oh wow somebody I'm gonna put a space let's see if we can pull still pull this one off - icons - icons twitter twitter space okay there we go we needed to put the space there for some reason it's now there is a conditional tag wrapping so I'm gonna go I'm gonna fix that I'll submit a request okay so see there we go it is actually the social links menu so what happens if you actually remove the link so let's go ahead and I'm gonna just add in Facebook we're just dude - we'll do the process again facebook.com Facebook add the menu custom link navigation here make sure you have a space - icons - icons Facebook okay whoa it overwrote the thing you cannot okay here's another issue are you serious you cannot have the exact same navigation label space space okay so that's a space space we are really because when we push the limits of what WordPress is supposed to do we find all the little bugs so I did a space space for for Twitter we'll do a single space or sorry I did a space space for Facebook we'll do all right let's see if this works save menu okay we got it okay so now we've got our Facebook and the spacing remember we have a hundred we already preset in the this stylesheet that all our list items in the menu our width of 100 that's where it's coming now what we can do is if we do menu Li - icon actually let's just do this - icon width 70 I'm going to make it 50 pixels height 50 pixels let's see if that will make it larger yeah carry that is a weird let me make this 75 just to make sure not 750 oh you know why I can't believe I was just doing something really stupid - icons is a font font size - e em and let's I've gotta find where my - let's just do this there so now we're starting again I just simply grab - icons and said any time you use - icons we're gonna use this size again we would wrap it maybe inside a menu but I've got several menus here so we would have to customize it so we've now been able to put links in this so it's just one thing to do now there's also nothing stopping you from keeping Facebook in here and using Twitter using the names of these items which then basically just again we would have to work on the spacing but we can then adjust this people know what it is it's linked off and it links directly off into Twitter so there's you know lots of stuff that we could do with that so that's just a quick little idea of pushing WordPress beyond just some default concepts and that's using CSS classes the description oh let me do the title attribute let me go back there the the attribute now we're not using the description because the font sorry the voce theme doesn't use it if your theme uses it you're going to have something but see the title attribute helps screen readers here especially if you're going to link off to something without the name or something you need to have a title attribute that shows off what is being linked so rather than actually creating images or something like that we can use dash icons we can play around again there's a lot of customization that you'd have to deal with when doing it this way I in the handout I did point out that if you want a very simple method of doing this there is a plugin called menu icons many of you may already know of this plugin but menu icons there's a few of these out here also makes it fairly easy and I'm gonna just quick show you this one so if rather than messing around with this you just want something that will give you more than the dash icons out of the box we can search for menu icons and it should be right here so there's a number of them that will have it but this was pretty easy and we're gonna activate this one and so once we have our menu icons activated I just want to make sure that we are our menus see menu icon settings so the settings are which fonts do you want to use if you want to use - icons you want to use font awesome we can put a few of them there we can save this now it does have a few extension whoops it does have a few extensions that you can connect up to ICO moon icon moon or whatever you want now you can also choose do we want to hide the label are we gonna put it before after what's the vertical line so you can actually do some type of settings here alright so once you've saved the settings you're gonna also see that we have the ability to select the icons so well it opens this up looks like WordPress we can simply search for where's this Facebook and see which one we want all right we want this one so we say we're gonna hide the label yes see we're previewing it to hide the label actually that's this is the preview of what it will look like we can zoom this up and you're gonna see the preview let's do to see how we can do for so we we get bigger and bigger let's just do two that worked well and then we can select so now we have this icon here I'm gonna remove this just so you see the difference and let's save this menu come back over here and we're going to have Facebook again does something similar now if we go ahead come back over here to hit this button and remove the label this will handle it for you save this refresh basically we do the same thing we were doing but now it's all centered for you it does all the code you didn't have to go into your stylesheet and do anything and we can do the same thing for the Twitter so basically what's happening is with this menu icon it allows you to set everything here and then the icon takes over the menu icon takes over and becomes this becomes the visual not any of this yes the hover is the title save that menu and so now our social menu is here so it's very easy to use and it does give you a few more options so so this is the the story of kind of using social icons or adding icons you don't have to use it for just social type things this is a great tool if you need more type of icons that will be next to the home the support link the other thing it's going to be one of those step above that you can provide to a client and if you don't want to just use the CSS and style everything yourself using the menu icon plug-in great solution very easy to use and it's very simple John can it menu item have two lines or levels of text yes that's where the description comes in we're not gonna be really dealing with that because it very it is a very specific type of thing that the theme hat you have to rewrite the entire theme the way the theme adds menus because it is literally another line of code that has to be inside the what's called the menu Walker some themes do it some themes don't but in order to get the multiple levels of text without using something like a mega menu or a custom menu plug-in it's the theme that supports it if that is something that is of interest I would Google search this WordPress menu description code if you put those words together you should be able to find something that should point you in the right direction okay so let's now talk about the next thing I'm gonna get I'm gonna change this menu because we're gonna work in this main menu here just now so I'm gonna uncheck this so we're gonna get rid of our the header menu we're gonna go back to our menu over here and let's get rid of this dash icon and this way we're all back to a traditional menu here okay so where you're in a traditional menu the next thing I want to show you is how to add a log in log out link now everything every menu item here on any menu is part of a hook that exists a location that exists in WordPress called the WP nav menu items so in order for me to do this I'm going to go back and forth here I'm gonna zoom in let's just I'm gonna make some space here so we can see it all okay so it all has to do with something called the WP nav menu items all items in all menus exist inside this hook so therefore if we treat it like a filter where we say okay take everything that's in here and then we're gonna filter it through items so we're gonna add a filter a filter for this and then we name the function that we're gonna filter so we're gonna do an add login out yeah now you know we actually want to make sure that this function this hook that contains all the menu items is finished processing before we start adding our own stuff so we want to make sure that it has a priority and a position that occurs afterwards that's what that's what's happening with these additional parameters most of the time if you just left this alone it would try and add the login before it's ready to receive additional items to filter because we want to be able to filter the already finished menu system so let's do our function add login out now inside this little area we do have to because again we're filtering something so therefore we do have to add some arguments that are being passed in one of them is the items so those are all the items this is what WordPress deems each menu is in the variable items and then we have our arguments the arguments are there so that if we need to customize how it exists [Music] you're gonna see why there's a bunch of these are just things that we're passing in these are arguments that are specific to WordPress menus so the first thing we want to do is anytime I'm gonna filter something I often and before I start doing something I'm gonna return the items that I'm trying to filter and so I'm returning the items back to the nav menu this just makes sure I don't forget to if I don't do this basically I'm pulling everything out and then stopping I'm not giving it a change I'm not passing it back to WordPress so in this function we're going to basically add an item because every single one of the WordPress menus have an items pretend it's kind of like this is an array and when we when the menu what's called the menu Walker and it doesn't matter whether you're working with Drupal Joomla you know any type of WordPress any type of content management system that dynamically builds their menus they have something called a Walker what the Walker does is it basically creates a loop and it every single time it goes through the loop it places an item equals something and whatever is in here is going to be the each menu and so the Walker builds the menus dynamically so what we're gonna do is use the period equals which means we're adding it to the ongoing list of items that are created so every single one of these items somewhere in the Walker code the menu Walker code has this so all we're doing is we're just adding one to it and because everything is gonna be like a list item great and so now I'm going to we're gonna have a variable that's gonna contain the login logout code so log in out so this is simply saying when you're going through and building every menu item we're gonna add this so what this is simply a variable so we need to define it log in out equals and this is the cool thing WordPress has a function that will automatically know whether you are logged in or logged out it's called WP login out and if you just leave this it's simply going to send people back and forth to the login page but what we can also do is we can always say when we login them in or out if you put index it's going to send them to the index page the homepage so when we login it goes to the index page when we log out they log out and go to the index page and then this is false for returning to where you the location where you were you can also choose a different location to send them this is just this is the parameter and whether or not we do any redirects all right so I'm going to save this and this is going to add this login logout option this item to every single nav menu item so we hit this and all of a sudden we now have our log out because we are logged in and that's all you have to do to do to handle that it's not in here we're not putting anything there so it's kind of a cool little method of especially if you do a membership site now I'm gonna show you how to add a search well guess what what if we just changed this whole thing to instead of add login logout let's say add cool stuff okay so we're adding cool stuff we need to make sure we update our function we're gonna pass in the items and arguments it still works perfectly fine but now we can start adding items items multiple items what do we want to do let's get search form which is the wordpress search form and again you can you can go look up just do a google search for get search form wordpress and you'll find all the parameters that may go there now notice how I've now put two items in the same function I'm returning all the items into the WP nav items so now I come back here and I've got not only the logout I've got the keyword or what if I simply want to add something else items we can basically start hard coding everything client and no touchy oops and I not close the list item okay that's weird oh here's why let me add this up here the reason why is we only have a hundred width and the search form is longer than that so in order to see that it's different client no touchy if you want to make sure that there's always going to be specific links that are styled the same way manage the same way for our each item and maybe you do allow the client to adjust some items this is a way that you can set exactly the things that need to happen at the end of a client's social or a client's menu system so it's a kind of a cool little way of filtering setting the items it can be straight HTML it can be pulling log in and out stuff it can be grabbed in the search form it could be basically any type of thing you know how gravity forms has the ability to call a function or Caldera forms has the ability to call a form through a modal window from a function well you could add that directly to a menu so hey sign up boom click the button and what happens a modal window pops up this is how you can turn your menu system into something that is going to pass functions because watch this items I know we're gonna really break something here break it all okay so I now put a function here so function break it all I don't know what returned muffins are awesome muffins are awesome so anything you want to put into here so you can build full functions into your menu items Chris no sorry I don't have time to build out a whole login logout popup window but hopefully this gives you the direction to chase using it like this so we can start adding in items to our menu and they can do everything from internal functions HTML out external functions and even WordPress form concepts so a lot of what the webinars I'm trying to do is give you the idea that while there's so much more just beyond the horizon to to customize so yes everything we're doing right now is basically a few exporting out returning HTML but hopefully this gives you the idea now the other thing is a lot of people sometimes have custom menus about certain things that they want to pass on to information so I have run into both clients as well as other developers who use the menu system because they've taught their clients how to connect up certain things and so let's call this one our directory and in the directory maybe we will do a sample page a new page let's go too fast news 3 whatever I don't you make three things okay so I'm gonna call this one are direct again this is our directory name okay so we've got this all set to go we're gonna create a new function and this is going to create a shortcode called menu that will allow us to simply name the menu and use a shortcode so let's go above this filter and we're gonna add a shortcode so this shortcode we're gonna call it menu menu display that's the name of my function so my function is menu display and like any shortcode you're gonna pass really two different arguments or parameters into this function you're always gonna pass in the attributes because short codes can have attributes that specify what is happening with that and then we're also going to anytime you have content inside a shortcode or that it's going to display content you need to pass in that content is gonna be started you know basically if we don't add anything we're not gonna do anything because it's null to begin with so when we work with work with shortcodes we extract the shortcode attributes now give me one second and our shortcode attribute basically is name and by default it's null and then we have our attributes make sure I got this right yes okay got to make sure I get this and then return well then I have one too many let's see this one goes so I've one two three opening one two three closing okay so I don't need this one I'm not sure where this one came from maybe I backed up any time you see and you see an extra parenthesis check and make sure it didn't get auto inserted by something trying to autocomplete so the best way to do it is just backtrack count how many times you open something and then count how many times something closes and then if you have an extra one you know exactly where to get rid of so let before we return let me show you what the menu the shortcode is gonna look like it's gonna look like menu name equals display okay so if this is the attribute we need to extract that based on the name so we're extracting something based on the name that's our attributes so that we can return the wp nav menu which is the function that allows us to place a menu anywhere this is how we display the menu and our array is going to be menu equals oops menu equals so let's get that right name well when we extract it out the name we set it as a variable that's what this extract shortcode attribute means this becomes now a variable with this being the value so this is the variable this is the value is stored now in the variable and then we're going to do echo equals false because we're basically returning we're not echoing okay so that's what's happening so we should be able to put this short code now anywhere and this short code code which is in the handout is going to handle that so let's go over here and we're gonna edit our regular post here and then I've lined 20 oh don't want that I had a semicolon ending this but I needed to end it here not here so that should fix that okay so let's edit this page and at this post so here's our breaking news oh my breaking news and I'm going to put a shortcode menu name equals display let's go ahead and update this and if it's working look there's our menu and plus it includes the logout client no touchie muffins are awesome and then our menu our search so I'm gonna just turn this filter off temporarily because what we would end up doing is adding all of this stuff conditionally based on the menu items so we would have an if this is the menu we would do that okay so let's do this okay so now what we've been able to do is put a menu system that would show up wherever you want and it operates like a menu it's managed like a menu if so if you have a number of links so there's some there's some neat things you can do outside the box of changing the way your menus are displayed or how you choose and where you choose you can do it by a short code you can add items to menus you can customize with icons and there's really a lot that if you go outside and start digging into it especially if you are looking at if you use like the você theme one of the things I do is I give you the code here that you can easily create new locations and then add them to certain hooks but we're not gonna have time to go into this whole item but let me just talk you through this I'm gonna carry this I'm gonna talk you through it and show you the code okay let's go ahead and adjust this okay so there's several things going on I'm gonna pull these action hooks above this so that we can talk about them so the first thing anytime you want to create a new menu location you're gonna have to do two things one you're gonna have to register it with WordPress and two you're gonna have to register it with the theme now if all you're doing is using an already created hook for your theme whether that's Genesis or Divi or anything or voce or 2017 anything that has a hook that you can connect into you can do that now if you don't have a hook you can add your own hook into WordPress by simply going into the theme and you know somewhere in the theme you you do like a do action the name of the hook you just put that in the location in the theme template file then you can use that hook but that's beyond so this first one the anit is the wordpress hook where we are initializing items and so that would be like initializing a new menu item so we're gonna call it through our function called você custom toolbar so this is our rotate custom toolbar menu and the location is top bar menu and that includes the description so all we have to do is register the menu this is a function of WordPress the same way we would register sidebars or things like that and we're passing in the locations the location is basically just the naming convention that's the only thing it does we're registering a naming convention so that when somebody comes to the menu area and they go to the manage location they're going to see a location whoops that is called menu area placed above the header area see that menu area placed above the header area maybe it'd be better if we did top bar menu now that I spelled correctly that would help alright save this and now you're going to see top bar menu no I did it opposite from everybody else but this now gives us a new location but simply adding something to this location adding the directory menu doesn't do anything because all we've done in this first part of the code is register it with WordPress so the second part is we need to connect the menu with a hook that exists inside WordPress or you can use that do action to set a location so bocha has something before the HTML right at the very top has an add custom top menu so here's add custom top menu look we're using the same thing WP nav menu that is the code we used when we use the shortcode notice how menu equals name @ go equals false so what we got here is I'm gonna show each one top bar menu container ID here so instead in this one we simply use the arguments the menu to create which menu we're adding in this one we're simply saying the Loeb theme location we're finding the theme location top bar menu this and this have to match and then we're adding a CSS ID top bar menu that will wrap around that so what this is now done is we have a our directory thing is going to show up now at the very top but it's actually being hidden well it's actually it's here there's another thing that's happening above here but here's our directory why that's the directory one we use with the shortcode here's the directory now added in a shortcode sorry I now add it in through the traditional menu system so you can do you can add infinite number of menus so we could just simply do let's go a muffin menu and we'll call this one our muffins we'll just make it simple we'll ignore that it translations stuff right now because I want to do it fast another menu another menu even more than more okay so if I did this I've now registered a whole bunch of menus see we've got a bunch of more menus which means now in our code we can simply start connecting we would create you know again we can't do it to this one because if this this function is already connected to this hook but we can go through a whole bunch of hooks and simply say theme location muffin man do you want a CSS wrapper around it and again you can also Google WP nav menu to see all the different parameters and arguments you can add so hopefully this gives you some ideas of taking greater advantage of WordPress menus everything from icons to styling to customization to adding and there's really a lot you can do with WordPress menus you just have to dig a tiny bit deeper any questions we've got about just a few minutes to go before we sign off I hope this has given a few of you some ideas to chase for this weekend things that you can use and implement immediately alright everybody take care I will see you all in the slack channels and have a great rest of your Thursday

Channel: WPStudio

Views: 142

Keywords: WordPress, Menus, WPStudio

Id: Jjl-FRra7Zw

Length: 55min 14sec (3314 seconds)

Published: Thu Aug 09 2018