FREELessons: 35Length: 7.7 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.1 Menus and Menu Modules

This lesson will cover menus, the importance of modules and why they are needed. This will give us important insight into how Joomla produces HTML code to be displayed typically on the front-end but also the back-end as well.

4.1 Menus and Menu Modules

Hi guys, welcome back to A Beginner's Guide to Using Joomla!. And in this lesson we want to focus on the Menu Manager component. The Menu Manager is an integral part of the front end of your Joomla installation. So it doesn't really affect the menus in the back end, that's not what the menu component does, it affects the menus in the front end and allows the users access to certain pieces of content and information. Now we will be coming back to the Menu Manager every time we go to, let's say, a new component, and we'd like to view it on the front end, and what it produces. We need to create a menu item to gain access to that specific piece of content that's generated in the back end. But that'll be gradual and throughout the course. Right now we just want to understand as much as we can about the Menu Manager and menu items, and how they work in Joomla!. So the Menu Manager component is accessible through the Menus drop down. And from here we can take a look at the Menu Manager itself and list out all of the menus that we have. Also, what you can do, is from there, you can add a new menu. It's the equivalent to clicking on Menu Manager and then saying New. But also in the drop down, you'll have all of your menus. So the Main Menu, Author Menu, and Button Menu in here. And then, from there, you can add individual menu items onto those menus. So now let's take a look at the menu table. So we can create a new menu. We can go ahead and tick on a particular menu and Edit or Delete the menu. And also if there is any corrupted data that you're getting in your table, you can tick on that menu and say Rebuild it. Now on top of that we can Check All from here. We have the title, we can see how many menu items have been published. So with your menu items, you'll see here with the Main Menu, we've got three published menu items. One, two, three right there. But I could have other menu items that are not visible. So they are unpublished, they are temporarily disabled. So I can have unpublished menu items. And I can also have menu items that sit in the trash ready to be deleted if I wanted to. And also I can see the Linked Modules and I can drop that down. That's the Main Menu and it's in position-1, and it's for the Public right here, so anybody can view this menu. Drop this down, this is the Author Menu, it's got special viewing permissions and its in position-1. And then also we drop this one down, with the Button Menu, again it's public and it's in the footer. So I can see right there which module that this is linked to. So what is the position, and what viewing access, and also I can see the ID as well of the menus. And then we can view more menus. You can have tons and tons of menus if you wanted to, and you can search through, and so on and so forth. So now I'm going to create a new menu. So go up to the New button right here. And then, we only have a few fields to fill out. So the Title, so this is just for the display, in the administrator back end. So, I'm gonna say, this is gonna be a Test Menu right here. And then we need to set the Menu type. So, ideally, you want this to be very unique. You don't want this the same as any other menu, and I'm just gonna say testmenu. I'm not gonna have any spaces in there, or special characters. And then also you can have a description to describe what this menu is all about. But what I'm going to do is just leave it like that and then say Save & Close. So here is the menu listed and we currently don't have a module. So what does the module mean? Well as the front end is made up of multiple modules, it really depends on where the module is, so what the position is. So we'll talk more about this in just a second. But what I'd like to do, is to prove a point, what I'm gonna do is pause the video and create a menu item, that's inside of the Test Menu. So you can see here that we have the Test Menu now, and I have one published, so viewable and enabled menu item that's assigned to this menu that I've created. And if I click, you'll notice we can now see that I've created a menu item saying Another About. And so if I refresh the front end, we cannot see this menu. We can't see that menu item at all in the front end. And in a large way that's because we have not assigned a module. So if we go back, and you'll notice under the Menus drop down we now have Test Menu. If we go back to the Menu Manager, or I could click here, you'll notice that it says, would be Linked Modules, it says Add a module for this menu type. Now this is important to understanding Joomla and how the front end works. Now to a lot of people it doesn't make sense. But what I'm gonna do is put it in the simplest of terms so that you can really get to grips with how Joomla works with the front end, and positioning of modules, and so on and so forth. So let's have a look at the front end. You can see here that we have a few modules. This menu is classed as a module. We have another module here, another module there. So these boxes are classed as modules. We also have another menu down here, which we only have one menu item in this footer menu. And, again, that menu is a module. But what is a module? How do you define a module? So a module is really for your front end rendering. And all it is, is the HTML code, a snippet, a small piece of HTML code, and lots and lots of modules make up your page on the front end. So, for example, let's take a look at the main menu with three menu items at the top. Well, what this is doing is it's going, and it's taking a look at the Main Menu, which has a module assigned. And what happens is it takes a look at all of the menu items and it goes right we've got three menu items for our Main Menu. And then it says right, generate the HTML. So in this case it would generate an unordered list. And in there they'll be three list items. And those three list items will be your three menu items right here. So all it is is that little piece of HTML code put simply. Also, it's very important to note that a module can be static. It doesn't have to link to the back end. So for example, a module can just be HTML on its own, and then injected into the page. But how does Joomla actually know where to insert this snippet of code? Well for this next part, I'm going to log in to demonstrate this. So we have the Author Login, and I'm going to log in as the administrator on the front end. And so now when you hover over a module, you will get the Edit module button, and then you get the name of the module, and then you'll get the position. So each module is assigned a position and depending upon that position, the HTML will be rendered in that certain section. So for example we have our Main Menu, that's a module. There's a Main Menu module and it's in position-1. We also now have the Author Menu, which again is in the same area, which is position-1, we also have the Search, which is in position-0. And because of this modularity it makes it very, very easy for us to customize the front end. Because I can say, well take this menu right here, take the Main Menu module, and instead of assigning it position one I could assign it position seven. So all of these gray boxes right here are modules and they're assigned position-7. So they're in this side bar area, here. So I could easily take that Main Menu, reassign the position, so instead of position-1, it's now position-7, and it would take that HTML code and inject it into the side bar. And so that's why Joomla is so flexible on the front end, cuz I can take those HTML snippets of code and move them around my front end template. And at the bottom you even have a module as well. So you have your footer module, and the position is of course the footer. So that does show us how modules work in Joomla!. Now there is something to note. The look of your modules will vary depending upon you changing the template and also the position can change without reassigning the module's position. So it really depends upon the front end template. So let me just demonstrate this real quick. What I'm going to do is change the template, which I'll talk about in a later lesson, but all we need to do is say Template Manager, we get to view the templates and I'm going to change it to Beez3. And then, we can go ahead and refresh the front end. So now, the template has changed. So the look of my modules has changed. On top of that, you will notice some distinct differences between the positioning of certain modules. For example we have Older Posts, Blog Roll, and Most Read Posts. And they were the gray boxes on the right hand side in the other theme, now they look different and they're also in a different position. But their position has not been reassigned. They are still in position seven. But because this template is built differently, position seven is now different to the one on the other template. So ideally when you get a template, you need to look for some documentation to find out all the different positions of a template. If the template doesn't come with the documentation telling you all the different positions of that template, then what you can do is create a module and then simply start throwing it around in different positions and seeing where it ends up on a particular page. And I'll show you how to do this at a later date, but right now I just want you to concentrate on how the front end works. You'll also notice position three's now all the way over here. It's no longer in the main content area. I also can't see the footer menu. I can't see that anywhere, and so on and so forth. So you can see how everything has sort of changed and now looks different. But it's the same HTML code that's being injected into the page. So now let's have a look at changing it back to protostar, and going ahead and refreshing this guy, so we get our front end looking like it was before. Now the last thing you need to understand to truly understand the front end and the modules, is you can have viewing access levels on the module. So you get to say who can see this HTML content. So for example I'm going to log out. Now when I log out, the Author Menu module will disappear, this HTML will no longer be rendered on the front end if I log out. And when I log out I'm now classed as public access basically. So I'm a guest and I don't get to see that module. So that module has a viewing access level. I get to say who sees a module and who doesn't. And it can even boil down to menu items, individual menu items. I can say only render than menu item if, let's say, they are logged in as the super user, or an administrator, or a manager, but don't display that with the public, or a guest, or even a regular registered user, we don't want them to see the Author Menu. But if I log back in again, we now have this module, this HTML, being rendered on the front end when I log in. And now we have the Author Menu. So, hopefully now, you can understand a lot more about the front end. Hopefully now you can see how flexible this truly is. And now we understand why our menu, our Test Menu right here, which has one published menu item right here, so it should be visible, but it isn't because there's no module being attached to it. So there's no HTML code being generated, and thus, if there's no HTML code being generated, you cannot see it on the front end. So thank you for watching me in this lesson. And in the next lesson, we'll have a look at our Test Menu. And we'll assign a module to it and get it visible on the front end. And we'll carry on playing around with the Menu Manager component.

Back to the top