Compass Designs .net

This guide is an in-depth tutorial to the information a Joomla site displays. It details how to plan and organize the information and user experience for the site. It also explains the hierarchy structure currently used in Joomla, sections and categories and how information can be content items, components or modules.

In This Guide

• How are web pages generated by Joomla?
• What different ways can I present content items?
• How can I organize my content?
• How do components and modules present information?

Planning Your Content

Sections and Categories, Static items, Blogs and Tables

One of the hardest parts of Joomla for those new to it to figure out is how content is organized. The relationship between sections, categories, blogs and tables can be very confusing.

To get a better idea of how a Joomla site can be organized, letÙs make a sitemap for an imaginary site. This is a standard planning tool used by web designers and is critical for a Joomla web site. ItÙs usually shown as a tree diagram showing all the pages in the site. Here is our example.

Figure 4-1 A Website Sitemap

In this sitemap, each web page is represented by a box, the lines are links within the site. A sitemap represents viewer path through a site rather than content organization. It is still a useful planning tool for organizing the site however. Here there are seven pages, from an organizational point of view, it seems like there are four main areas of the site:

• About Us
• Widgets
• Contact Us
• Widget Blog

The first step in trying to understand how Joomla structures its content is to realize there are no pages!

OK, so what does that mean?

I talked about the idea of “placeholders” for the content in a CMS like Joomla. Remember, the content is stored in the database and needs to be placed onto the pages by Joomla. The CMS has spaces on its pages to place content and needs to know what content it should put there. Joomla only know what content should be used once you click on a link. Once the viewer has done this, Joomla now knows what page to generate, gets the content, and puts it into place.

Consider a very different example, a magazine. You turn to the index, look something up, get the page number and turn to that page. For that page to be filled with content, the magazine author/designer needed to have chosen the content and arranged it as they wanted on that page. So you turn to it and you see the content. This seems a daft example but it illustrates very well how pages are generated in a CMS. On a Joomla site, you click on a link (the magazine index) and then the content is generated and arranged on the page. So in the magazine case the pages exist before you go to it, but on a Joomla web site, the page only exists once you visit it. Strange but true.

The Least You Need to Know
Joomla generates a page the instant you go to visit it.

There are 4 main ways that Joomla generates content:

• Static content
• Dynamic content (organized in sections and categories)
• Components
• Modules

Note that these are not separate pages, in some cases itÙs possible to have more than one type on the same page.

Static Content

In a static site, this very simple sitemap would be 7 simple pages. The simplest ways of creating a site with Joomla is with static content, itÙs much easier to understand how a Joomla site is driven. Static content is just that, a single static content item in the database will correspond to a single page of content on your website; nice and easy.

The Least You Need to Know
A single static content item will be a single page on your Joomla site

LetÙs say we have a simple website of three pages, a “Home” page, an “About Us” page and a “Services” page.

Figure 4-2 Simple Sitemap

In the Content menu is the Static Content Manager. We have two static content items we have created, “About Us” and “Services”. These are created simply clicking the new button. You then get an editor appear and can fill in the information you want (weÙÙ look more at adding content later)

Figure 4-3 Static Content Manager

As we just discussed, the hardest things for users to realize about Joomla is that content does not exist by itself on the pages of their website, only in the database. It is only shown on the website when it is linked to in a menu, that is, itÙs the menus that determine the content of a Joomla site, not the content items. Sure, they will be there in the database, but they will only appear once we link to them in a menu somewhere. A consequence of this is that you have to create the content first and then the links to it.

This is true for all content that is in the “main body” of your pages, they must have a link to them to cause them to appear on the site. Just to increase the confusion, they must also be “published” in the content item manager. You can see that our two items above are published. LetÙs create a small menu to point to these two content items.

The Least You Need To Know
Menus determine both what will be on a page and how it will be laid out

Tip
An advanced menu technique is possible as the menu that causes the content item to be shown on a page does not need to be published or visible itself. This allows the creation of what I like to call a “landing page menu”. I can create a menu that is not itself published, that links to various other pages. I can then use these in various situations without having to link to them off my site. Maybe I want a special page that offers one of my products at a discount and give the URL in an offline newspaper ad, or a landing page for my Google AdWords campaign. To find these URLÙs, just look at the URL line in the Menu item. This technique is discussed more in the Tips and Tricks Appendix.

Now letÙs head over to the Menu Manager. We create a new menu clicking the New button.

 
Figure 4-3 The module created when you make a menu

Note as we create the menu it tells us a “mod_mainmenu” module was created. Take note of that, we will be coming back to it later. “mod_” is just Joomla shorthand for some type of module and “mainmenu” is a type of module that outputs a menu as links.

Now we have our menu, we need to create the links. You can do this one of two ways.

1. Creating Menu Links from the Menu Manager

Open the menu you created in the menu manager (select the menu you created from the “Menu” option in the main menu).

Figure 4-4 Finding the Menu Manager

Then click the “New” button in the top right. Note that the important buttons for any particular page in the Administrator site are always located here.

Clicking on the New button in the top right and you will get lots of choices. WeÙll be looking at these in later chapters, but for now, select “Link – Static Item”. Click the radio button and then click next.

Figure 4-5 Creating a new link

On the next screen, simply click on what static content item you want to point to and give the link a name. The name given will be the words that shows in the link. This is a critical point for SEO.

The link name does not have to be the same as the title of the static content item. Now, SEO wisdom tells us that the anchor text of a link, the actual words that are “underlined” are very important to achieve a good SERP with that key phrase. This makes our example good for showing what not to do. It would be pointless to try and achieve SERP for the phrase “about us”. If my website sold widgets, then it would make more sense to have a link that said “About our Widgets”, then at least I get Google points for having “widgets” in the link. For the most benefit, the title of the page I am linking to should also have the keyword phrase/anchor text in some version, perhaps “About Widget Inc, your quality supplier for Widgets”.

Now, while we are on link text and SEO, we should mention something else. When making a site care should be taken to make it as “usable” as possible. Usability experts tell us that the words in a link should match very closely the page we end up on. Steve Krug talks about this in his book, saying “if thereÙs a major discrepancy between the link name and the page name, my trust in the site will diminish”.

Taking both these factors into account, trying to place important keywords in the link text and making the link usable, is a balancing act. Often, doing better at one means worse in the other. DonÙt think you can dismiss usability, itÙs no good having good traffic if they all leave your site out of frustration. Needless to say, its work putting some careful thought into what you link text will be. Fortunately, its easy to change later, you just go and edit the menu item.

The Least You Need to Know
You can create links to a content item, but the content needs to exist first
The names of a link (anchor text) needs to be chosen very carefully

Back to static items.

2. Creating Menu Links from the Content Item

We mentioned another way of creating menu links, and itÙs probably an easier one. As you create a content item, there are 5 panels/tabs on the right hand side: Publishing, Images, Parameters, Meta Info and Link to Menu.

Note:
The content item must be saved before these tabs appear. Click “Apply” rather than “Save” and then they will be loaded.

 
Figure 4-6 Creating a New Static Item

Creating the menu link is as easy as selecting the menu you want the link to appear on, selecting the type (not shown here as this is a static content item) and the “Link to Menu” button. Note, however, the menu must exist already before you can use this method.

So, we now have a site with a couple of pages, a menu that links to two static content items to show the on the website.

On to the last page on our site, the home page. Now we start getting to some of the aspects of Joomla that are more difficult to understand. The default set up for Joomla installation is that the home page is not a static page or a dynamic section/category; itÙs actually a special component.

The Least You Need to Know
You can create a menu link as you create a content item, you have to save the item first so you can see the menu options.

Component Content

The Front Page Component

We saw when we were selecting what type of link to have that that a menu link can link to a component. The default Joomla installation has a number of pages that are actually components: the contact us page, the search page, the news feeds page and lastly the front page component. None of these really have content items of their own, but pull their content from various places, either within the Joomla site database (contacts) or even other sites (RSS newsfeeds). Basically a component is a mini application that presents data in the main body of a Joomla site in some fashion. A good example of a component is a forum. The content presented is highly specialized and different from the rest of the site.

In almost every case (except this one) all components installed are in the Components menu. The Frontpage component is unique in Joomla in that it is not managed from anything in the Components menu, but rather in the Frontpage Manager in the Content menu. Quite simply the Frontpage component allows the publishing of any content item in a Joomla siteÙs database on the front/home page regardless of where it appears on the site.

The home page of your site doesnÙt have to be controlled by the Frontpage manager. Sometimes more control over its layout is needed, or some other requirement. The first item in the main menu will be the home page of your site. In the default Joomla installation this is set to be the Frontpage manager, but it could just as easily be a static content item, a table, or another component. Just remember, whatever is first in the list will be your front page or home page. One thing you need to be careful of is some issues with item ID with this relationship. For more information read this thread on the Official forum.joomla.org/index.php/topic,4259.0.html.

The Least You Need to Know
Components are mini-applications that present content in the main body is a special way
The home page of a Joomla site is a component. It allows you to pull content from anywhere in your site for the home page

A quick look at the Content Items Manager and you will see a column that controls if an item appears on the front page. You can simply click on these crosses and check marks to publish/unpublish items onto the front page. You can also change this setting in the publishing tab in the actual content item itself.

Figure 4-7 The Content Items Manager

This is a good example of a page that “does not exist”. What we actually mean by this is that the content is dynamically generated the instant you view the page. In the case of this dynamic page, the content is taken from other database locations to populate the home page. This concept of dynamically generated content is one of the main differences between CMS sites and static ones. You canÙt change a static page unless you go in and change (X)HTML in a file somewhere. In a dynamic CMS you can change content with a simple click of your mouse.

In the example we are using, a site of just 3 pages illustrates the important difference between static content items and dynamic content. In this site our home page would be empty. So far we have only 2 content items and they are both static. A static item cannot be “pulled” into other pages like a general content item. It has a 1 to 1 item to page correspondence. General content items however can appear on several pages.

Figure 4-8 Static and dynamic content

It is not a complete free for all in how you insert content into a page. You are limited by how you can manipulate the hierarchical content structure that Joomla uses to organize its content; sections and categories

The other components in the default installation of Joomla are:

Dynamic Content

How Joomla Organizes Content: Sections and Categories

LetÙs go back to the example we started with, our 7 page site. Now that we have a better idea of what dynamic content is we can think not in terms of pages but in terms of content items.

Figure 4-9 A Widget Site map again

We know that two of these pages will be special components, the home page and the contact us page. A component is basically a special page that does something unusual to the content in presenting it. That leaves us with 5 other pages. We can see that there are actually 7 content items here:

1. About Us
2. Services Description
3. Widget Blog Description
4. TodayÙs blog
5. YesterdayÙs blog
6. Green Widgets
7. Blue Widgets

Joomla gives us two organizational structures, first sections, and then inside that, categories.

Tip
In the Joomla roadmap are plans to change the hierarchical structure to be infinite categories.

At first glance, our structure might seem obvious, leaving out the two components, we have three sections:

• About Us
• Services
• Widget blog

Now, things start getting complicated.

You canÙt put content items in a section, they must go in a category. This means that each section needs at least one category.

A frequently used analogy is a filing cabinet. In the cabinet you have drop down folders, inside them you have manila folders and inside those sheets of paper with content on them.

Figure 4-10 How Joomla stores its content

The filing cabinet is the website, the dropdown folders are the sections, the manila folders are the categories and the paper is the content. To continue the example, static content would be loose sheets of paper in a stack at the bottom of the cabinet. ThatÙs why bigger sites need to use the section/category model, it organizes the information. I am not sure what a component would be, maybe a rolodex on top of the cabinet.

So one way to organize our content might be like this:

The services categories work fine and make sense, the other two seem to duplicate the content level. This is because the content hierarchy for that area is only one “level” deep. You end up with a redundant level.

There are two solutions to this.

First and perhaps the easiest is to make all single level items static content. We have already seen that this is easy to set up. The down side is that the site can quickly become difficult to maintain. I have found this to happen with many more than 10-15 static items, mainly because Joomla provides no organization for them, they are all lumped into one group.

The second solution is to be more creative with our sections/categories. For example, we could have just a single section, letÙs call it “AllContent”. Then we have all the sections inside it:

Or we might have something in between. This problem often occurs with smaller sites with not too much content. In those instances you have to get creative.

In our example it might be good to use both. A single static item for About Us and then two sections for Services and the blog. The Widget Blog is a good candidate for its own category and section because they tend to have lots of entries. Even though there is a redundant layer of structure, it will easier to keep organized in the site.

The Least You Need to Know
Content items must be in a category which must be in a section. This can lead to a redundant organizational level for small sites
There are many ways to organize the same set of content in a Joomla site

Module Content

The last type of content is a module. The content presented in a module is very different to static or dynamic content, or components. In all three of the first types, the content is presented in the main body of the web pages. The template designer actually has to give a snippet of code to set the “placeholder”. Modules however can be anywhere on page. Most commonly you will find them around the edges; the top, sides and bottom.

Having said that modules are a type of content, that is not strictly true. Some types of module take in data rather than output data. An example of this is the login module. The default modules on a default Joomla installation are:

We wonÙt go into too much detail about how modules work. There are a number of settings/parameters related to their function in the index.php, the template file that controls all the presentation on the site. A more detailed developers guide to dev.joomla.org/content/view/1136/79/

Guide Summary

• Joomla is a dynamic content management system. Web pages are generated by the server software at the very instant you visit them. One implication of this is that in Joomla, the menus actually determine the content and layout of a web page.
• Joomla has two main types of content, static and dynamic. Static content has a 1 to 1 relationship between content items and web pages. This is not true for dynamic content, a single page can hold many items and vice versa.
• Joomla has a 3 level content organizational hierarchy. Content items are held in Categories which are held in Sections. In the current versions of Joomla, all dynamic content must follow this organization. This can sometimes lead to a redundant level for small sites.
• Content is also presented by components and modules. Components are mini applications that run inside Joomla, like a forum. Modules even smaller functions relating to the site, for example a log in form or a poll. Components are always presented in the mainbody, modules are usually output in side columns or header/footers.