FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.2 Taking Menus Further

Now we’ve created a menu with one published menu item, it’s time we make it visible on the front-end. We must first create a module that will be assigned to a menu. This module will generate the HTML code, but we must also assign a position to tell the HTML code where to be rendered. On top of that we’ll be creating a second module for the same menu to demonstrate the flexibility of Joomla and the module system.

4.2 Taking Menus Further

Hi guys. Welcome back to a beginner's guide to using Joomla! And in this lesson, we want to continue on learning about the menu manager component. So, coming back to where we last left off, we have the test menu and we have no module being assigned, so no code is being generated in order for this menu to be viewable on the front end. So, we don't see that one published menu item that's within that test menu. So now it's time to attach a module onto this menu so that we can view it on the front end. So I'm going to click the link to add a module for this menu. So it's important to know, with modules, you have different types of modules. So, because I clicked that link, it automatically has, sort of, given me the options for a menu module, meaning that this module will produce content for a menu. But you can have other modules, as well, for other pieces of content. And we'll talk more about modules later. But right now we're talking specifically about a menu module, and that will produce the code for the menu. Now we need to provide a title for the module. This is good for associating this module with the content it's generating cuz if all of them were clusters module menu, and that's all we saw, then we wouldn't really know what content this module is generating. So here it gives us the chance to provide a title to be a bit more self explanatory about what the module is, so the title of the module. Also, the title of the module appears in that pop up. When you log in as the administrator on the front end and you hover a module, you have the edit module button. And you hover over that, and then you have that little pop up. And in there it will say the title of the module. So in my case, I wanna keep it relative to the content it's generating, which it's generating the content for the test menu. So, I'll say, test menu here, but you can give it whatever name you'd like. Now, on top of that, what we have here is the module tab, and there we can say select menu. So in this case, it's saying select a menu that you'd like to generate the content for. So as we clicked on that link for the test menu to add a module to it, it's automatically filled this in with test menu from the drop down. Now we could choose all of the other menus if we wanted to, but they've already got modules generating content, so I'm just going to now say the test menu needs to have this module associated with it so it's generating the content. Now, even if I saved this module right now we still wouldn't see the menu appear in the front end. The reason being is because we haven't provided a position. So the content is gonna be generated, but it doesn't know where to place that HTML, and thus, it just doesn't show in the front end. So when you go to select a position, you get a nice drop down menu with a search box. And in there, you will have all of the themes and their positions. So we have Bees3 installed, and we also have another theme, Protostar. Now, we're not talking about the back end themes. We have two back end themes, but they're not listed here. We're talking about the front end. So we only have two front end themes, Bees3, and Protostar. Now, the current theme that I have enabled is Protostar. So, I'm only really interested in this section. And if you scroll all the way down, you will find the custom positions. But right now, I just want to focus on my enabled theme, which is Protostar. So, I'm just going to type in proto and it will filter and it will say, okay. It's targeting this theme, and then I can see all the positions of that theme specifically. Now some of these positions are self explanatory, such as banner. We have debug, we have search. Now if you remember we have search in position zero, navigation in position one, breadcrumbs in position two. Now let's have a look at this on the front end. We have search, position zero. The navigations, this is the navigation area, or position, if you will. That's position one. And then also you have the breadcrumbs. If I scroll all the way down you'll see this is actually position two down here with the breadcrumbs. Now over here was position seven to the right of our content. So if I go ahead and drop this down and again type in Proto and scroll down, I can see right position seven and left position eight. Now if it says unused and then a position, then it means that that position is unused by this template. So some templates will utilize certain positions, others won't. So in my case, if I set this to position four while that's unused, so if I go ahead and save it and then hit refresh, you will notice that the content is not appearing anywhere. So now I'm going to take a look at taking that out. So you can hit the x right there, or you can drop it down again, type in Proto, and then I want to set it to go to the right. So now this content will be injected into the right hand side. So I can go ahead and save that. Hit refresh, and there is the content being generated on the right hand side. And sometimes you can't actually see a position until you actually put content in it. So there is a position over the left hand side that we can utilize with this template. So again I drop it down, and then we take a look at left, right here, position eight. Save it. Hit refresh. And now you'll notice it's now over the left-hand side. So, let's go ahead and delete that now and change that back to position seven like so. So you can see position seven, Bees3, don't want that. But the Protostar, that's right, no problem. Go ahead and save that. Hit refresh. And my content now get's injected to the right hand side of my content. So, if we go ahead take a look at the back end again, underneath the module tab we're going to take a look at this right hand side section, and all of the available options to us. So firstly, we have the ability to show and hide the title of the module on the front end. So, right now I can set that to hide, save it, and then refresh. And now we'll hide the title of this module. Now on top of that, it does also depend upon where the module is positioned. So, currently in position seven, we can see the title. But, however, if I was to change the position to position one with the Protostar, which is the navigation position, that area. If I go ahead and save it now, you'll notice that I've still got the title set to show. But, however, if I refresh the front end, you'll notice it's gone up here into position one, and the title does not show up. So, depending upon where your module is, you may or may not be able to show the title. So I'm gonna say Protostar, right position seven, and we're gonna move it back over to the right hand side. Now on top of that we can change the status. So we can change it to publish, which means it's viewable, enabled on the front end, or unpublished, disabled, not viewable on the front end. But of course we can still modify this module in the back end. This is all to do with the front end. But on top of that, we can also set this to trashed, which means that it's not viewable on the front end and it's also sitting in the trash can. And from the trash can we can permanently delete this module. On top of that, we can also set a start and finish publishing date. So, I can set the start date to tomorrow, and then I can also set the finishing date, as well, to the 31st of October. And I can also set the time, as well. Then I can change the status to unpublished. So, for the rest of today and for a part of tomorrow, it will be disabled until we get to half twelve or round about, and then what will happen is it will enable this automatically. So, it will change it to published, then it will be viewable. Then we get to the finishing date and time. And then what it will do is change it to unpublished again. So it will only show this content between those two dates and times. Very, very useful if you have seasonal content. Now on top, of that we can also set the viewing access level. You can set the viewing access levels up underneath the users manager component. And right here we can say, well, this public, so everybody can view this content. But I can also say only super users, or only registered users get to view this content. So we actually have to log in, in order to view this module, this content, on the front end. On top of that, we can set the ordering. So right now, you can see all of the modules that are assigned to the right-hand sidebar for this template, which is position seven. Now you may notice something very strange here. We can see popular tags, and and then test menu is set to the second one in the list. Why is it that we don't see the popular tags here? Well, the popular tags module may be that you actually have to log in to view this module. Also, it may be disabled. But regardless of the circumstances, if you have a module that is assigned to a position, it will show up in this list right here. Published, unpublished or whatever viewing access level you've got on there, it will show up in this list. And this is good for when you start enabling and disabling certain modules. Everything stays in the same order. So, popular tags is currently disabled. So we're not gonna see that module. So the next best thing is the test menu, which you can see it cuz that module is published, it's viewable on the front end. But what if I actually selected self? So what that will do is it will actually push it down one, so whatever you've got selected here, your module will appear below. But I've actually selected itself so the second one, test menu, is this module. So let's go ahead and save it now, and then scroll down. Now you can see that what it's done is it's actually moved it down one slot. So we now have older posts above the test menu. Let's go ahead and refresh the page. So now test menu should appear below the older posts, like so. And them I'm gonna change that back to popular tags again. So it goes up there. Now on top of that, we can assign a language to this module. Now, again, remember that all we're doing is assigning a language, we're not translating it into a different language. If your module is in English, and you've created it in English, it's in English and you would typically say English UK. But, however, what you're doing is you're just saying what language this module is in. And then, you'll see at a later date, in a later lesson, about the languages and how that works. But please do note again, you are not actually changing the content or converting it into another language. You are just assigning a language. On top of that, we can add a quick note, and this will show up in the table data, which gives us a little bit more of an explanation. But that's all going to be displayed in the back end. So, now what I want to do is just skip these options right here for now. The reason being is because I'm gonna need a hierarchy of menu items. So when we come back in the next lesson, what I'll do is I'll have a better hierarchy in this test menu, and we can start to have a play and understand what these options do. But right now, let's go back and learn a little bit more about modules. So right here we have a module. That's generating the HTML code for the test menu. But let's say that I want the test menu module in the sidebar, but I also want the exact same content being generated for the footer. Well, now how do I do that? Well, you don't necessarily just have to have one module assigned to a menu. So you can have multiple modules that generate pretty much the same content but place it in different positions. So, for example, let's go ahead and close out of that. And let's go to the menu manager. And now with test menu you can see you have the modules button. And underneath there, you have test menu. So that's the name of the module, the title. Now on top of that, you'll notice this is a plural, modules. So we can have multiple modules attached to this menu. So, I can go back underneath extensions I can go to the module manager. And in here, I can create a new module. And then we can select a module type. So what type of HTML content is it going to generate? Well, we know that we want to generate the HTML content for a menu. So if we look through here, should be in here somewhere. There it is. Menu. It says this module displays a menu on the front end. So I can go ahead and click on that. And then I can say, which menu do we want to generate the content for, which is gonna be the test menu. I want to assign a position. So, again I'm gonna bring up Protostar. And I want to select footer. So now it's gonna be in the footer position, status published, and I'm also gonna make the access public, as well. And, finally, we need a title, so I'm gonna say, test menu two. And then I'm just going to very quickly save it and hit refresh. And now we have the content, which is another about, and again we don't have the title, it's not visible here, unfortunately. But there is my menu. So we're generating the same content for the same menu, but we're telling it to display in a different position. And when we go back to the menu manager, you'll notice underneath modules we now have two modules associated with this menu. So thank you for watching me in this lesson, and please join me in the next lesson where we'll carry on learning about modules and all of the different options that are available to us.

Back to the top