Introductory: Learning Joomla! using Sample Data

All you need for this lesson is available in each Joomla! download

Written by Mark Dexter

Some Jargon Explained

One of the challenges when learning something new is to understand the jargon. It might be helpful to think of a website as a magazine. The main content are the articles. In addition, there might advertisements, pictures, page numbers, color coding, and other items that make up the page. In a Joomla! website, the content is usually one or more articles. But it can also include things like web links, contacts, and news feeds. Modules in Joomla! are typically the small things around the articles, like menus, the login form, "Who's Online", and advertisements.

As we saw earlier, in Joomla! the template controls the layout of the page and the colors, fonts, and other graphic elements. Each menu option in Joomla! is called a "menu item". Each menu item takes you to a different page, like a page in a magazine, with different content and possibly different modules. Finally, when you work with Joomla!, you will see a lot of "parameters". These are settings that give you a fine degree of control over different Joomla! elements.

Menus and Menu Items

Almost every Joomla! website has at least one menu to let the user navigate around the site. Menus in Joomla! can be a little confusing at first. Each menu has three parts: (1) the Menu name; (2) one or more Menu Items; and (3) one or more Menu Modules.

To see how this works, let's return to the back end of the sample website and look at the Main Menu. First, we'll navigate to Menus / Menu Manager to see the screen shown below:

This list all of the menus defined in the site. If we click on the Title for "Main Menu", we'll see the Menu - Edit screen shown below:

There isn't much to this screen. We just define the menu and give it a name and a title.

There are two different ways to navigate to the Menu Items: (1) click on the Menu Item(s) icon in the Menu Manager (not the Menu Title!) or select the desired menu from the "Menus" menu -- for example, Menus / Main Menu, as shown below:

For some reason, when I was first learning Joomla!, I had difficulty finding the Menu Item Manager. I would click the Menu Title and go to the Menu Manager instead of the Menu Item Manager. Then I would be confused because it didn't show the menu items. Very annoying!

Note that the "*" next to Main Menu indicates that this is the menu that contains the home page.

Using one of the methods above, navigate to the Menu Item Manager for the Main Menu. The screen should display as shown below:

This one screen is a gold mine of useful information. For Joomla! newcomers, there is probably more here than you can absorb at one time. But you will use the screen a lot when working with Joomla!, so you will get to know it well.

As you would expect, the Menu Item column lists each option in the menu. In this case we have 9 options. The Default column is very important. This shows the page (or menu item) that will be loaded when a user navigates to the site's URL. Every Joomla! site must have one default menu item. Let's try changing the Default to the "Joomla! Overview" item by selecting it's check box and then pressing the "Default" button in the upper right toolbar. Now the Joomla! Overview should have the gold star in its Default column, as shown below:

Now, open a new browser window and navigate to your URL -- in our case "http://localhost/joomla155sample". You should be taken to the Joomla! Overview page instead of the Home page. This points out an important fact that can be confusing: the default menu item can be any menu item you like. The sample site use a "Front Page" layout as the Default menu item, but it is not required. Before going on, go back and change the Default back to the Home page.

The next column indicates whether a menu item is "Published". You can have menu items on a menu but "unpublish" them so they are not visible to users. Why would you do this? Perhaps you are making a change to the site and don't want this menu item to be visible until you have finished. Or perhaps you are removing this option but want to keep it around in case you want to add it back.

The Order column does just what you would expect -- determine the order that the items appear in the menu. You can use the little green arrows to move items up or down. Or you can enter in order numbers in the boxes and then press the disk icon in the column header to change the order based on the new numbers.

Access Level determines who can see the menu items. These are all "Public", so any user can see them. We'll see Access Levels in action later, when we discuss user logins.

Perhaps the most important column is the Type column. Each menu item has a specific type or "layout". This is where you decide what kind of page you want this menu to link to. This is also where having the sample website really helps, because you can see the different layouts in action. The first item, Home, uses a Front Page layout. Open the sample site and look at the home page. Notice that there are five articles in the center portion of the page. The first article spans the entire area and the remaining articles are located in two columns. This type of layout is also referred to as a "blog" layout. In Joomla!, there are three types of blog layouts: Front Page, Section, Category.

Go back to the Menu Item Manager in the back end and look at item #7, "The News". This is a "Category / Blog" layout. In the front end, navigate to "The News" link on the Main Menu. Notice that it is similar to the Front Page -- the first article spans the columns and the remaining articles are in two columns.

This is a great time to introduce parameters into the picture. Remember that we said that parameters are a way to make Joomla! more flexible. Suppose you wanted to change the blog layout? Could you do this? Yes! And very easily. Again, go to the Menu Item Manager in the back end and this time we'll make a change to "The News" page. Click on the Menu Item "The News" and you should see the Menu Item: [Edit] screen shown below:

This screen has a lot of stuff on it and can be a little intimidating, but the great thing is that you can try different things and see how they work. Let's say we want our blog layout to have the first two articles to span both columns, instead of one. Click on the "# Leading" field in the upper right and change the value to "2". Press "Save" in the toolbar.

Now, go back to the front end. You will need to refresh the page to see the change, so navigate back to the Home page and then back to "The News". And now, the first two articles span both columns.

Let's go back to the back end and look at an important feature of Joomla! -- the online help. Again, click on "The News" Menu Item in the Menu Item Manager screen to get back to the Menu Item: [Edit] screen. This time, click on the Help button in the toolbar. The screen below will display:

Every Joomla! screen has a related Help screen. This help screen is one of the largest, since it documents all of the different Menu Item Types (or "layouts") available in Joomla!. You might want to take a few minutes just to look through this. These different layouts are some of the most important tools in your web-building toolbox that Joomla! gives you. Most of these layouts are used in the sample website, so you can see what they look like (in the front end) and how they are defined (in the back end). Which layouts you use in your website of course will depend on what type of site you are building. Is it helpful to be familiar with the different layouts available so you know what you have to work with.

Also, keep in mind that Joomla! is an open system that is designed to be extended. Developers around the world have written hundreds of programs called "Extensions" that add specific functionality to Joomla!. For example, some extensions add even more layout options for you, putting more tools in your toolbox. So, for many Joomla! web designers, the core Joomla! package is a starting point, not an ending point.

Menu Modules

Looking at the Menu Item Manager screen, we can see that we have listed the options for the menu and determined the type of page that will display when that option is selected. But have we defined everything about the menu? For example, what will the menu look like? Where on the page will it be displayed? Will it be shown on all the pages or just selected pages?

These decisions are made when we create the menu module. To me, this was a confusing part of Joomla!, since it might seem to make more sense to define everything about a menu in one place. However, once you get used to it, it makes sense. And it turns out that there are good reasons for having menu modules defined separately from menu items.

In the back end, press the Close button to return to the Menu Item Manager. Then select Extensions / Module Manager to open the Module Manager, shown below:

As mentioned earlier, modules in Joomla! are the small "gadgets" usually around the outside of the main content area of the page. There are 20 different types of modules that come with Joomla!, and, as with layouts, installing an extension often adds one or more additional modules. Menus are one of these types.

Click on the "Main Menu" Module Name to open the Module: [Edit] screen shown below:

And here we can see the answers to our questions about the Main Menu. What will it look like is determined by the "Menu Style", in this case "List". Where it will display on the page is determined by the "Position", in this case "left". And which pages will it show on is determined in the "Menu Assignment", in this case "All" menu items. One other very important thing to note is the "Menu Name". This is how we assign the menu (from the Menu Manager) to the menu module.

Let's look at two other menus. Press "Close" to return to the Module Manager. As you can see, there are a lot of modules defined in the sample website. This is great, because it gives us a lot of examples to learn from. But right now, we just want to see menu modules. Look at the "Type" column on the right side of the screen. This is the Joomla! system name for the module. For menus, it is "mod_mainmenu". Now, look at the "Select Type" drop-down list on the right side above the columns. Select "mod_mainmenu", as shown below:

Notice that now the Module Manager only shows the six menus. This is handy when you're just working with one type of module. You can list all module types just by selecting "Select Type" from the list. You can also filter on other columns: Template, Position, and Published State.

Click on the "Top Menu". Here we can see that this menu is located in the position called "user3". Where is position "user3"? You may remember that earlier, we saw that the Joomla! template determines the layout of the page. So it would make sense that the positions will be different on every template. So how do we know where a position is for a given template? Glad you asked! Joomla! has an easy way to see the template positions for any page. Just add the code "?tp=1" to the end of the URL. So, for example, go back to the front end and enter the URL "http://localhost/joomla155sample?tp=1". You will see the display shown below:

Each rectangle with the red print indicates a template location. Scroll down to the bottom of the page to see more locations. This is a great trick, and works with any Joomla! website. (For fun, try the URL "http://joomla.org/?tp=1".)

Go back to the back-end Module: [Edit] screen and press "Close". Open the "Example Pages" menu, again, by clicking the title). Notice the Menu Assignment area, shown below:

This menu only shows on some menu items (or pages) and not on others. It shows on the Example Pages menu item in the "ExamplePages" menu and on all of the individual menu items under the "ExamplePages" menu. Let's go to the front end to see how this works. Select the Example Pages link from the Home page. Now we see the Example Pages menu. Select any of the Example Pages menu items and the Example Pages menu is still visible. This allows the user to navigate easily within this part of the site, for example, from one example page to another. This type of assignment pattern is very common when you want a menu to show only for a subsection of the site.

Add Comment