Compass Designs

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.

Comments (40)

Show/Hide comments

Hummerbie said:

To bad the images are missing in this article :-) They are probely this on your machine, but for us there are no pictures !!

July 31, 2006

Barrie North said:

come to he that waits. It took me a bit to resize etc them all...

July 31, 2006

Mikea said:

Really great for us that need some insight into CMS and specifically Joomla.

August 02, 2006

Dirk Overlaet said:

Thanks for the clear explanation. It helped me a lot to better understand the principles of Joomla!

August 02, 2006

malou said:

this is very worth it to read!!!

August 04, 2006

tiago said:

Excelent workkkk really helpful and i really mean it i am creating an website with this awesome thanks again : : : :

August 08, 2006

sha said:

Thanks, it helped me understand a lot of thing about joomla.. I kind of wonder why we're limited to 3 hierarchical levels, though.

August 09, 2006

mtoo said:

Very useful, clearly written & a really helpful, practical approach. Similar treatment of content navigation issues (Menus & the use of Section & Category Lists & Tables etc)would be a great follow-on. Good work & thank you very much.

August 10, 2006

Janosch said:

Thanks for this nice article. I didn't quite get the idea of sections and categories before i read this article. I'll look forward to having all the hierachies needed instead of this with sections and categories which seems like a strange solution.

August 11, 2006

Pravin said:

i've been waddling around like a duck in an oil slick...thanks for the degreaser.

August 13, 2006

R Husband said:

Should be the first thing any Joomla newbie reads. Thanks!

August 22, 2006

jonas123 said:

Thanx for clarifying some notions related to Joomla! Very appreciated and good work!!! Thanx

September 13, 2006

brit said:

i really loved the article!

September 14, 2006

seb said:

thank you very much for this article , clarly and presisely wrtten to give you a good feel of what is going on

October 05, 2006

Soydemadera said:

I like the article very much

October 09, 2006

Christian Sweningsen said:

Excellent article, thank you so much. I still feel that a step is missing, in imagining actual pages. Most of us will be working with existing templates. How do we go from the steps you have so clearly delineated, and an acutal "page" with all of its typical attendent foofah; and how do we make pages that are different from one another. So it comes down to "pages"! You - necessarily - say there are no pages in Joomla -- and then you proceed to draw page diagrams and refer to pages. We all do - that's what we see on the screen! Probably it is me who has to just keep wrestling with what you have already offered! Many thanks again, Christian Sweningsen NewScience Alliance

October 13, 2006

CitizenZed said:

This thing is great so far.............. but where is this "Tips and Tricks Appendix" that's mentioned in the Static Content section??

October 13, 2006

CitizenZed said:

Mentioned early but I can't find it

October 13, 2006

XHerakleitos said:

It's nice to see something conceptual about Joomla. So many things appear to presuppose a frame of reference that's a bit alien to the idea of pages. Still not sure I understand the difference between static and dynamic content items though. I'm afraid I'll create a static content item and then end up not being able to use it correctly... or vice versa.

October 16, 2006

Christo4 said:

Great article but I was hoping for more on how to lay out pages to display the content, arranged in sections and categories, the way I'd like to see it. Perhaps a future tutorial??

October 26, 2006

Anil said:

This is a very good tutotial on joomla if any one have some other tutotial on joomla then pls send me link.

November 30, 2006

Morven Westfield said:

I created my first Joomla site months ago, but had no idea what I was doing. The only documentation I could find explained how to use the admin interface, which was already pretty obvious. I had no idea if something should be dynamic or static, and didn't realize how the menus worked. To me, a menu is just that -- a menu. "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." That explained so much!!! Excellent illustrations, too. I'm looking forward to your upcoming book about 1.5. Morven

December 03, 2006

AskMe said:

Nice article.... tought me so many things about joomla

December 21, 2006

Ron Crowe said:

I agree with the others that this is easy to read and presents important, useful information. One approach I've been using without thinking it through is to effectively create content at the section or category level since this is essentially allowed. That is, just type it in using the WYSIWYG editor that appears when I create a new section or cateogy, instead of actually going down to the official content item in Joomla speak. Possibly someone can comment on the pros and cons of doing that. Again, thanks for the clearly written, useful information!

January 08, 2007

jefferis said:

Good overview. That clarifies the organizational layout, but it isn't where I'm stuck. I'm creating pages in components, like forms, that have no static url and no component link to add them to a menu. Finding these created pages and trying to integrate them into ANYWHERE is becoming a real mess.

January 28, 2007

Brian D said:

Thank you, this isn't as thorough as it could be as some have suggested, however, it's much more than I have seen on most other websites and so far has been the most valuable information I have read about Joomla. So, Thank you!

February 01, 2007

John D said:

As I often do with new technology, I dove right in and mucked it right up. I appreciate the gentle and concise overview this provides. There is more specific stuff I need to research, but armed with this familiarization, I am better prepared to do so.

February 03, 2007

charina ong said:

i have created pages already using the static content manager. how do i link one static page to another static page? it is asking me for the url. what did was to right click on the file and i selected copy link location, it gave the link in editing mode. please take a look at these urls: http://www.adbstaffassociation...u=1&id=13 http://www.adbstaffassociation.org/index.php?option=com_content&task=view&id=13&Itemid=32 i underdtand that the first one is in editing mode. In the second url i think this is the published file. how do i get the published url where it contains itemid? please help cha

February 22, 2007

Question said:

You said, " . . . but on a Joomla web site, the page only exists once you visit it. Strange but true." I must be missing something. That's how all dynamic web pages are built and have been built for a couple decades. What is the magic I must be missing?

March 06, 2007

I guess I'm old said:

"Question" must be young. Let's see - two decades ago - 1986 - as a graduate student at the University of Texas we were still using AppleIIe's and just getting into the new Macs. No Internet for general public, no www, no hypertext, no windows (not until 1995, remember?) No email. No blogs. No dynamic content...

March 21, 2007

Marise D'Costa said:

Great article, thanks.

August 01, 2007

Martincc said:

'Question' Dynamic, database drive 'Dynamic" content pages are nothing new. My question is from a SEO perspective. Top SE sites like Google and Yahoo are adopting 'Latent Semantic Indexing (LSI) technology to index and rank websites. Spiders now crawl the tag as well as the tag to determine site theme relevance i.e content = keyword query %. My question: How does having dynamic site, where most of the content is essentially hidden in a database and generated on the fly/click, affect Search Engines spiders ability to 'crawl' indexing and Rank a website ?

September 14, 2007 | url

admin said:

Its my current understanding that a spider might "drop off" parameters if there are a bunch of them. For Joomla, where there is only 2 or 3, I don't believe there to be a problem...

September 14, 2007

madamep said:

You said: "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." I wonder if this metaphor is more useful to us newbies: "When you go to a restaurant(website) you don't get a dish served (page) unless you order something off the menu(menu module). If it's not on the menu(menu module or link set) you can't get a meal (page). If you order an item(link) off the menu, that gives implicit instructions to the chef(joomla) of how to construct the dish (page) because the menu item (link) references a recipe (admin settings for that link ??). Joomla references the recipe to cook the dish (page) and voila! Serves it up hot! Bon Appetit!" Does that work? I have a hard time using the magazine index as a mental model, because we don't require an index to browse a page within the magazine. my 2 cents!

November 21, 2007

The Last Saxon said:

Exactly what I wanted to know. Thanks!

November 22, 2007 | url

Plantagenet said:

Read through dozens of tutorials explaining how joomla organizes content and this was the first one that made any sense. Now I understand. Top job.

December 03, 2007 | url

Irenek said:

I've been killing myself working on a site that other people created in Joomla and now I see 1) why they had a hard time and 2) where they blew it. This was by far the best article after finally realizing that I had to stop trying to fix things and just learn. Thanks.

December 13, 2007

buspar2 said:

Great article, I respect author. I will be applying this methods to my site.

December 17, 2007 | url

Colin McNulty said:

I'm sure there's something fundamental I'm missing with Joomla. At the moment I'm stuck on how to display a simple banner! :- I was hoping a beginners guide would have set me straight.

January 03, 2008 | url

Patrick Macdonald said:

Hi. I have a .php file (it's a mortgage calculator) that I want to upload and use on my joomla website. Can anyone tell me how to do it please?

January 06, 2008 | url

Show/Hide comment form