Joomla! Sites Explained

By Stephen Burge

Date: Aug 31, 2011

Sample Chapter is provided courtesy of Addison-Wesley Professional.

Return to the article

This chapter explains the basic concepts of your Joomla site. After you've finished this chapter, you'll understand how users see your site and how administrators manage your site.

Things You Can Do After Reading This Chapter

Understand the two areas of your Joomla site

Understand the visitor area of your Joomla site

Understand the administrator area of your Joomla site

Make your first Joomla site changes

Know the following words:

Article

Extension

Component

Template

Module

Plug-in

Understand the Two Areas of a Joomla Site

Every Joomla Web site has two areas: a public area for visitors and a private area for administrators.

Visitor Area

Absolutely everything you want visitors to see on your site can be accessed from here.

You can always access the visitor area simply by visiting the Web address where you installed Joomla. You should see the same Web site as in Figure 3.1.

Figure 3.1 The visitor area of your Joomla site

Administrator Area

The other half of your Joomla site is the private area for administrators. Absolutely everything you want to change about your site can be changed from here. It is the Control Panel of your site, where you go to add content, create navigation, or modify your site layout.

This area is always accessible by adding /administrator/ to your site's home page. So if your site was http://joomlaexplained.com/joomlaville, you'd add /administrator to visit http://joomlaexplained.com/joomlaville/administrator.

You see a login screen like the one in Figure 3.2. Enter the username and password you created in Chapter 2, "Joomla Installations Explained," during the final stages of installing your site.

Figure 3.2 The administrator login for your Joomla site

If you've lost those details already (pay more attention at the back), you can click Go to Site Home Page and then click either Forgot Your Password? or Forgot Your Username? on the left-hand side.

Once you've logged in, you are taken to the screen in Figure 3.3. This is your top secret headquarters. This is the main Control Panel for your entire site. Absolutely everything you want to change about your site can be changed from here.

Figure 3.3 The administrator area of your Joomla site

In this chapter you get an overview of both areas of your Joomla site, and we start right here in the administrator area.

Understand the Administrator Area of Your Joomla Site

In the administrator area of your Joomla site you see four distinct sections outlined in Figure 3.4:

1: Drop-down menu. This has all the key links you need to manage your site.

This has all the key links you need to manage your site. 2: Quick links. This allows you to easily logout or click View Site to see the public area of your site.

This allows you to easily logout or click View Site to see the public area of your site. 3: Latest updates. This area includes information about what's currently happening on your site.

This area includes information about what's currently happening on your site. 4: Short-cuts. These buttons give you quick access to really common administrator tasks like adding a new article.

Figure 3.4 The four sections of your Joomla administrator area

I recommend that, as a beginner, you focus all your attention on the drop-down menu.

We use that drop-down menu to manage every aspect of our Joomla site. The quick links, short-cuts, and latest updates are all just other ways of getting to the same place.

Hover your mouse over the drop-down menu, and you see the same options as in Figure 3.5.

Because the drop-down menu is so important, we base this entire book on it. Every time we ask you to visit a page in the administrator area, we go via this drop-down menu. The drop-down menu contains the following options:

Site (Chapter 16). Contains all the main configuration options for your site. The good news is that most of these configuration options will be set up correctly when you first install your site.

(Chapter 16). Contains all the main configuration options for your site. The good news is that most of these configuration options will be set up correctly when you first install your site. Users (Chapter 14). Contains one of the major new features in Joomla 1.6. Here you can give different permissions to different users and groups of users. For example, if you are running a school Web site, you could decide that the history teacher could only write articles about history, the science teacher could only write about science, and the sports teacher could only enter game results.

(Chapter 14). Contains one of the major new features in Joomla 1.6. Here you can give different permissions to different users and groups of users. For example, if you are running a school Web site, you could decide that the history teacher could only write articles about history, the science teacher could only write about science, and the sports teacher could only enter game results. Menus (Chapter 6). Contains the navigation for your visitors. Remember the menu links you were clicking on in the visitor area of the site? We can control and create these from this area.

(Chapter 6). Contains the navigation for your visitors. Remember the menu links you were clicking on in the visitor area of the site? We can control and create these from this area. Content (Chapters 4 and 5). Contains all of your text articles. Any text you write goes here, from news and blog posts to essays and book chapters.

(Chapters 4 and 5). Contains all of your text articles. Any text you write goes here, from news and blog posts to essays and book chapters. Components (Chapter 7). The powerful extra features you can add to your site. Social networking, photo galleries, shopping carts, event calendars, and much more are all called components.

(Chapter 7). The powerful extra features you can add to your site. Social networking, photo galleries, shopping carts, event calendars, and much more are all called components. Extensions. The extra features you can add to your site. The Extensions drop-down menu includes links to the following types of extensions: Module Manager (Chapter 8). Modules are the small boxes around the outside of your site. They show visitors little snippets of information such as the latest or most popular five articles. Plug-in Manager (Chapter 9). Plug-ins are tiny scripts that make small improvements to your site. One example of a plug-in adds a small row of stars to the top of articles so that visitors can vote for articles. Another example loads a small piece of code to protect e-mail addresses from spammers. Template Manger (Chapter 10). Templates are the design of your site. If you want a red, blue, pink, green, yellow, white, or orange site, you need to find a template of the right color. Language Manager (Chapter 15). Joomla has been translated into more than 40 languages. You can upload Spanish, French, German, Japanese, Arabic, and many other languages. All Joomla's site functions will be automatically translated. However, you still need to manually translate any articles you write—Joomla isn't that clever unfortunately.

The extra features you can add to your site. The Extensions drop-down menu includes links to the following types of extensions: Help. Provides answers to your questions. I hope this book is useful, but you're certain to have more questions that we can't answer here. The Joomla Help link leads to documentation you can view inside your site. The other links take you to the most important parts of the official Joomla site, http://joomla.org.

Things You'll See All the Time in Joomla

It's confusing when things change. The good news is that Joomla is good at keeping things consistent. There are many things you'll see all the time in Joomla. The following sections discuss some examples.

Language

Joomla uses similar language on each page. For example, you see the phrase "... Manager" ten times in just those seven drop-down links. This makes it easy for you to navigate your way around. If you want to manage anything on your Joomla site, you know where to go:

If you want to manage your articles, go to the Article Manager.

If you want to manage your users, go to the User Manager.

If you want to manage your menus, go to the Menu Manager.

If you want to manage your languages, go the Language Manager

I could go on, but you get the picture.

Page Layouts

Joomla also uses similar layouts for every page you visit from the drop-down menu. For example, take a look at Joomla's Article Manager by clicking on Content and then on Article Manager as in Figure 3.6.

You see the following:

1: Page title. This tells you where you are in your administrator area.

This tells you where you are in your administrator area. 2: Action buttons. These buttons allow you to modify any of the items you see.

These buttons allow you to modify any of the items you see. 3: Submenu. These links give you access to important, related parts of your administrator area.

These links give you access to important, related parts of your administrator area. 4: Search box. This searches for the title of something and allows you to quickly find what you're looking for.

This searches for the title of something and allows you to quickly find what you're looking for. 5: Filters. These are preset searches. They filter out the content, allowing you to focus your search.

These are preset searches. They filter out the content, allowing you to focus your search. 6: Column titles. These are clickable titles you can use to sort the items you are looking at. For example, click on Title to search alphabetically or Date to search chronologically.

These are clickable titles you can use to sort the items you are looking at. For example, click on Title to search alphabetically or Date to search chronologically. 7: Items. These vary throughout the site and can be many different things, depending on what part of the site you are currently using. For example, if you are in the User Manager, the items show the users. If you are in the Menu Manager, this shows the menus, and if you are in the Article Manager, this shows the articles as in Figure 3.6.

Next, visit Joomla's Template Manager by clicking on Extensions and then Template Manager. You see a screen like the one in Figure 3.7.

Let's take a look at one more example. Go to Joomla's User Manager by clicking on Users and then User Manager. The screen you see looks like Figure 3.8 and should be increasingly familiar.

Go ahead and click on some other links, especially those under Components and Extensions. You see the same layout almost everywhere you go. Hopefully this makes your life easier in several ways:

Not sure where you are? Look at the title and submenu.

Look at the title and submenu. Can't find an item? Just use the search box or the filters.

Just use the search box or the filters. Need to modify or create an item? Look for all the action buttons in the top-left corner.

Individual Page Layouts

It's not only the pages from the drop-down menu that nearly always look the same. When you click through to an individual page, the layout is also consistent.

Let's go back to Joomla's Article Manager by clicking on Content, then Article Manager, and finally Administrator Components. When you open it, the page looks like Figure 3.9.

You see the following:

1: Page title. This tells you where you are in your administrator area.

This tells you where you are in your administrator area. 2: Action buttons. These buttons allow you to modify any of the items you see.

These buttons allow you to modify any of the items you see. 3: Most important content. This is why you're visiting this part of the site. For example, if you're in an article, this will be the main article text. If you're in a user's profile, this will be the user's name, e-mail, and password. If you're in a menu link, this will be the text people click on and the URL the link will send them to.

This is why you're visiting this part of the site. For example, if you're in an article, this will be the main article text. If you're in a user's profile, this will be the user's name, e-mail, and password. If you're in a menu link, this will be the text people click on and the URL the link will send them to. 4: Extra options. These are extra settings, but they're not as important as those on the left-hand side. For example, one option in an article may allow you to turn voting on or off. Another example is an option in a contact form to show or hide the e-mail address that the e-mail will be sent to.

Let's also go back to Joomla's Template Manager by clicking on Extensions, then Template Manager, and finally Beez2 – Default. You see a screen like the one in Figure 3.10.

Let's take a look at a final example. Go back Joomla's User Manager by clicking on Users, then User Manager, and finally Super User. The screen you see looks like Figure 3.11.

Joomla is easy to use because it's consistent:

Not sure where you are? Look at the title.

Look at the title. Need to modify this page? Look for all the action buttons in the top-right corner.

Look for all the action buttons in the top-right corner. Need to edit the important parts of the page? Look to the left-hand side.

Look to the left-hand side. Need to make a small tweak to the page? Look to the right-hand side.

Now that we've seen the administrator area in more detail, let's look at the visitor area.

Understand the Visitor Area of Your Joomla Site

This visitor area is why you build your site. It shows all the information that you want to share with people.

Your visitor area looks similar to Figure 3.12.

Figure 3.12 The visitor area of your Joomla site

Every Joomla page is put together using several types of extensions. Currently you're able to see two types of extensions, modules and templates:

Template: Beez2. You're currently using this blue and white design.

You're currently using this blue and white design. Module: Breadcrumbs. Remember the Hansel and Gretel fairy tale? They used a trail of breadcrumbs to find their way home. The small You are here: Home text shows where you are on the site.

Remember the Hansel and Gretel fairy tale? They used a trail of breadcrumbs to find their way home. The small You are here: Home text shows where you are on the site. Module: Main Menu. This menu links to information about your site.

This menu links to information about your site. Module: Login Form. This allows people to log in and to also register and recover lost account details.

All these items in your visitor area can be modified, moved, or replaced from your administrator area.

Earlier in this chapter we saw that the administrator area is where you change your site. Now that we've seen that the visitor area is what you change on your site, let's go and actually make our first changes.

To make changes, we need to go the administrator area. To do this, add /administrator to your site's URL or click on your bookmark for the Joomla administrator area.

Make Your First Joomla Site Changes

Now that you know a little about navigating through the Joomla administrator area, let's see how easy it is to make some changes to your site.

Changing Your First Article

Let's add a welcome article on the visitor page so that people can find out about your city.

In the drop-down menu, click on Content, then Article Manager, and then click on New. You see a screen like in Figure 3.13. This is where you will write all your articles in Joomla. Figure 3.13 Creating a new Joomla article There are only three settings that we need to use for this article: 1: Title. A good choice would be "Welcome to Joomlaville."

A good choice would be "Welcome to Joomlaville." 2: Featured. Select Yes so that this will appear on the front page.

Select Yes so that this will appear on the front page. 3: Article Text. http://www.joomlaexplained.com/chapter3 has some text that you can use for this article. You can copy and paste the text from that site into your new article. Before you do so, I have a note of caution: Copying and pasting text is always somewhat tricky. Some programs such as Microsoft Word are notorious for creating a lot of bad formatting with their articles. My suggestion would always be to type directly into Joomla. However, if you do copy-and-paste, always start by copying from the article and pasting into a text editor like WordPad or Notepad. That clears away the formatting. You can then copy the code out of the editor and paste into Joomla. Figure 3.14 shows you how your screen looks once these three settings are applied. Figure 3.14 Writing your first Joomla article When you're happy with the article, click Save & Close in the top-right corner. This saves all the changes you made. Then in very top-right corner, above the Save & Close button, click on View Site. This sends you to the visitor area of your site. You can see both the Save & Close and the View Site buttons in Figure 3.15. Figure 3.15 Saving your first Joomla article

In the visitor area, you now can see your first Joomla article live on your site. Figure 3.16 shows how it will appear.

Figure 3.16 Your first Joomla article is now published.

Great! You now know how to welcome people to your new Joomlaville site. However, the heading across the top of the site still reads "Joomla! Open Source Content Management." Let's go ahead and change that to reflect our new content.

Changing Your First Template

Now let's change the design of the site so that visitors can clearly see the word Joomlaville.

Go back to the administrator area of your site. In the drop-down menu, click on Extensions and then Template Manager. Either click on the Beez2-Default name or select the box next to Beez2-Default and click Edit in the top-right corner. You see a screen like Figure 3.17. Figure 3.17 Editing a Joomla template On the right-hand side under Advanced Options there are several things you can change. Here are some first steps: Logo. Click Clear to remove the Joomla logo from the header.

Click Clear to remove the Joomla logo from the header. Site Title. Enter Joomlaville .

Enter . Site Description. Enter A great place to live! Figure 3.18 shows how your screen looks once these three settings are saved. Figure 3.18 Editing a Joomla template When you're happy with the changes, click Save & Close in the top-right corner. This saves all the changes you made. In the very top-right corner, above the Save & Close button, click on View Site. This sends you to the visitors area of your site.

You can see both the Save & Close and the View Site buttons in Figure 3.19.

Figure 3.19 Saving your Joomla template

In the visitors area you now can see your template changes live on your site. Figure 3.20 shows how it will appear.

Figure 3.20 Your Joomla template changes are live.

Your whole site at the end of Chapter 3 should now look like Figure 3.21.

Figure 3.21 Your Joomla site at the end of Chapter 3

Great! You made your first Joomla site changes. You published an article and modified the template. You're ready for the next step—to start building your first Joomla site.

What's Next?

There is one indispensable workflow for building Joomla sites. If you understand the workflow and follow it, you'll find Joomla much easier than if you try to do things in any other way. This book is dedicated to teaching you that workflow.

Turn the page, and let's learn how.