So we are going to start off today with how to add a Members Only Menu. You are familiar with this concept from my site because when you are logged in the menu is different than when you are not logged in. And as I said near the beginning of this course what we are going to do is we are going to have a Members only menu and a Visitors only menu and depending on whether or not you are logged in you’ll be able to see the appropriate menu.
This has generally required some relatively simple programming but I have written a plugin to make it a little simpler. So we are going to take a look at it that way instead. If you want directions on how to do this without using a plugin that is if you want to hard code it yourself ask me that question in the forum and I’ll post code that would let you hard code it if that’s what you want to do.
Create a Membership Website – Install BYOB Thesis WP Menus Plugin
By the end of the day Week 7 Resources will have this plugin added to it. And in the meantime let’s just pretend that we downloaded the plugin and that it’s sitting down here on our computer. And we are going to come over here to Week 7 which is the lesson that we are working on now and upload the plug in. Add New, then upload and then from wherever it happens to be stored – I’m going to pick it up from my folders – it is called byob-thesis-wp-menu and the version you’ll be looking at today is 1.0. These plugins I’ve been writing these last months have been evolving rapidly and so a month from now they’ll probably be a different version number.
But nevertheless right now it’s this one here and if we open that and say Install Now. I actually already have it installed, come over and look at the installed plugins for a second. You’ll see that I have this BYOB Thesis WP Menus plugin that’s been activated. This does require a minimum of WordPress 3.0 and it does require Thesis1.8 so if you aren’t working in both this menu won’t install properly for you. Once it’s installed what it does is it creates this little dialog down here. This dialog I have five or six plugins that I’ve written so far and each of them installs under this BYOB Thesis Plugins.
Create a Membership Website – Create New Menu
The only I have installed right now on this site is the WP Menus Plugin but if you have installed my plugins you’ll be familiar with this. We’ll come on over to WP Menus and if this is the first time you’ve installed it you are not going to see any of this stuff right here. All you are going to see is how many WordPress menus. And the way this works is you select the number of WordPress menus you want to use here and the plugin allows you to create up to eight WordPress menus and allows you to place those WordPress menus around various places in the site.
Create a Membership Website – Configure New Menu
For the time being we’ll select two and hit Save Changes and then what happens is the settings for the Thesis Nav Menu now show up plus settings for the two new menus that you are going to create. Now the reason why settings for the Thesis Nav Menu come up is because one I want you to be able to select the location that the Thesis Nav Menu is going to go and secondly I want you to be able to set the visibility.
The question is who should be able to see the Thesis Nav Menu. We are going to say Only Logged-in Users can see it. By default before anything is set everyone can see the menu and that’s the way it’s set at the moment. We want it after the header. If everyone can see it then everyone is going to see this menu and any other menu you add after the header will be added to this. I just want the Thesis Nav Menu to go away when somebody logs in so I’m going to say Only Non-Logged in Users can see it. Then we are going to create a new menu and I’ve given it the name of Member Menu and I want it in the same location as the Thesis Nav Menu and I want it so that only Non-Logged in users can see it.
If I have it set this way these two menus are just going to swap back and forth depending upon the persons logged in status and that’s what I’m after. But it doesn’t have to work that way, you could have a standard menu that is in that location all the time and another menu that is the members menu that can be in a different location. You can see that it can be at the very top before the header, inside the header, after the header, before the content, after the content, before the footer, within the footer and after the footer.
So you have a wide range of places that you can put this additional menu and in fact you could do the same thing with other menus. Let’s just say we are going to create a footer menu and we are going to put it down before the footer. We’ll say that everybody can see the menu and then we’ll hit Save Changes. Now we’ve created these two menus and we’ve defined what’s going to happen in the Thesis Nav Menu. These are now WordPress menus which means that we use the regular WordPress menu function for adding pages to them.
So if we come back over here to Appearance and Menus you’ll see we have two different menus, we have the footer menu which I just created which has no pages in it whatsoever and then we have the member menu which I actually created earlier which has my Dashboard, My Profile, Member Support, Courses, Forum, Blog and Affiliate. What we are going to do is come over to our footer menu and we are going to add some additional menu items. So we are going to add the Home page and we’ll add the Members Support page. And we’ll add the Products page and the About and Forum. We add those to the menu. This is obviously too long and so we rename this and we are just going to say Home.
Create a Membership Website – Test the New Menu on the Site
So there’s the name of that navigation and then we’ve got Member Support and I think we’ll just change that from Member Support to Support to make it nice and simple; Products, About, Forum and save it. So now we have the Footer menu and the Member Menu and if we come back over and take a look at our site now here’s my Member Menu. It starts off with my Dashboard and below my Dashboard is my Profile and Member Support and then there’s the Courses page the Forum page, Blog and Affiliate.
Come down here to the bottom. Because of the styling of this menu what happens is the new menu adopts the styling of the Nav Menu by default. You can use custom CSS to change the styling of the menu, any of the menus actually so that they display in a different manner. But the way I have the main navigation menu styled it is influencing the way this menu down here appears. In some later version of this plugin I’m going to have the ability to add styling to the menu from the plugin itself rather than having to edit your custom CSS file.
But if you wanted to edit your custom CSS file to change the way this looked, I’ll bring it up in Firefox and I’ll just take a look at it quickly. For some of you this is a no brainer and for others it’ll be a little more complex. So here’s what the menu looks like when you are not logged in because I’m not logged in at this point. And then here’s what the menu looks like when you are logged in. But if we scroll down here and inspect the element for a second and in fact let’s edit this custom CSS. If you can’t tell what I’m doing here watch the first few lessons of Customize Thesis Like a Pro and you’ll understand what’s going on here.
Basically what I’m doing is I’m modeling the custom CSS using Web Developer and Firebug for Firefox. And so this is the footer menu and so instead of member menu I’ll say footer menu. And then the ID is menu footer menu instead of member menu. And I think the main thing I’m going to do here is delete that, let the background color be transparent, but the color itself will be black. Now we’ll say Menu A: hover and we don’t need the background color anymore there but the color let’s just say is red.
So this is the current menu item. So what we do here is add li.current-menu-item a. Again we are going to get rid of that background color. Let’s select this color from the list here, copy that color and paste that color there. So that is the current color, there’s a hover color and there’s a normal link color. That looks fine and so you could do something like this for that menu and you could also add padding and all other kinds of things to make this footer menu work differently.
But you get the idea here, once you’ve created the menu and the plugin then you can add pages to that menu in the Appearance menu section. And then you can use custom CSS to identify that specific menu which in this case is menu-footer-menu. Then you can add custom styling that way.
And we know that this works because we can see what it looks like when we are not logged in and we can see what it looks like when we are logged in and so we’ve gotten the desired result. I think one of the takeaways I want you to have is that this will allow you to do lots of additional menus. I’m going to do some videos that describe how to use this to create lots of additional menus. It could very well be that a lot of people are not going to use logged in and non-logged status and instead have everyone always be able to see these menus.
But this will allow you to easily create and place menus throughout your site whether or not you are using this logged in or non-logged in status. And one other thing I want to point out is that all of these plugins I create have this Help system up here where I try to give a fairly verbose description of how to use different sections of the plugins. So you can find help there and when I get the videos done for this you’ll also find videos under plugins on the site up here under Membership and Plugins. These plugins are ready on the site and I’ll be adding the one that we’ve just been talking about here. Anyway so that’s adding the Members’ Only menu.