Your Guide to All the Default Components in Joomla

Your Guide to All the Default Components in Joomla

If you want to add an exciting extra feature to your site, there’s a good chance it’s a component. Do you want to show an advertising banner? That’s a component.

Want a contact form? That’s a component too. How about an events calendar or a discussion forum? Both are components.

Joomla arrives with eleven default components such as advertising banners and contact forms. In this blog post, we show you how they work.

In this blog post, we'll go over the eleven default Joomla components:

  1. Banners: Shows advertising banners.
  2. Contacts: Creates contact forms.
  3. Joomla Update: This allows you to update your site.
  4. Messaging: Sends private messages to other site administrators.
  5. Multi-lingual Associations: This feature helps if you're building a multi-lingual site.
  6. News Feeds: Shows news from other websites.
  7. Post-installation Messages: Shows information about what's included in new Joomla versions.
  8. Redirect: Tracks when people try to visit pages that don’t exist on your site and allows you to redirect them to the correct pages.
  9. Search: Allows people to search your site.
  10. Smart Search: Allows people to search your site in more advanced ways.
  11. Tags: Allows you to organize your content in a more flexible way than categories.

Banners Component

The Banners component has two main tasks:

  • It shows advertising banners.
  • It collects all the data about those banners, such as the number of times each one has been shown and the number of times each one has been clicked on.

Banners uses the CASh workflow of Categorize, Add, Show. Let’s use that workflow to add an advertising banner on our site.

Let’s walk you through the process of setting up an advertising banner. Here’s how we do it.

Step #1. Categorize

Just as with our articles, our banners are organized into categories. So we need to create a category for them:

  • Go to "Components", then "Banners", and then "Categories":

Go to Components, then Banners and then Categories

The Banners categories will each be used for different areas of the site, so naming them according to their position (Leaderboard, Left Column, Right Column) is a good idea.

  • Click "New".
  • Let’s create a banner for the right-hand side of our site, so enter Right Column into the Title field, as in the image below.
  • Click "Save & Close" when you’re finished.

Click Save and Close

With the Banners, there’s also a second method of organization called “Clients”. This allows you to organize banners by advertising client. Why is this useful?

You might want to sell banner space to several different clients and have an easy way to track all their banners.

If you want to do this, the process of setting up a client is exactly the same as for a category.

Step #2. Add

Now let’s create the banner that visitors will see:

  • Go to "Components, then "Banners".
  • Click "New", and you see the banner setup page.
  • Name: Give the banner a descriptive title. In this case, enter Right Column Joomla.org Banner.
  • Image: Click "Select", and you see a pop-up. This takes you to the banners folder in Media Manager. You can upload a new advertising banner here or even browse to other folders. In this case, click on the image called "white.png", and then click "Insert".
  • Click URL: This is the Web address to send people to when they click the banner. Let’s put https://www.joomla.org in here.
  • Category: Choose the Right Column category you created earlier.

Choose the right column category

Step #3. Show

Now we just need to tell Joomla where to show the banner:

  • Go to "Extensions", then "Modules", and click New.
  • You see a screen where you can decide which type of module to create. Click "Banners".

You see a screen where you can decide which type of module to create. Click Banners

You see a screen like the one below. There are four key options to choose:

  • Title: Right Column Banner
  • Category: Right Column
  • Show Title: Hide
  • Position: Right

There are four key options to choose

  • Click "Save & Close" and visit your site. You can see the "SUPPORT Joomla" banner in the right column, as in the image below. Go ahead and click on the banner to test that it works. It should send you to https://joomla.org.

It should send you to https://joomla.org

Banner Data

Joomla can collect basic data about how often the banner is shown (Impressions) or how often it’s clicked on (Clicks). Here’s how you can start collecting that information:

  • Go to "Components", then "Banners".
  • You'll see that Joomla has started to track both the impressions and the click for this banner:

You'll see that Joomla has started to track both the impressions and the click for this banner

Please note that the data recorded for impressions and clicks is not accurate enough to replace any professional advertising systems. However, it does work well enough for the average user’s needs.


Contacts Component

The Contacts component has one main task: It allows visitors to contact you. You probably guessed that already!

Contacts allows you to easily set up forms. If you just want one contact form for the whole site, that’s easily done. You can also set up a whole directory of contact forms for different people or different departments.

You can also create more advanced forms using the fields that we saw earlier in "Joomla Fields Explained".

The CASh workflow applies to contacts, just as much as for content, menus, and banners. We’re going to Categorize, Add, and then Show.

However, now that you understand the CASh workflow, we're going to show how to skip the first step.

Step #1. Categorize

This time, we're going to combine Step 1 and Step 2. So we'll do the "Categorize" step in the instructions below.

Step #2. Add

  • Go to "Components", then "Contacts".
  • Click "New".
  • Name: Joomlaville Mayor
  • Email: Enter your e-mail address into the Email field. This e-mail won’t be made public, but whenever anyone uses the contact form, an e-mail gets sent to this address.
  • Category: Type Joomlaville Contacts and then press "Enter" or "Return" on your keyboard. This is a faster way to complete Step #1.

This is a faster way to complete Step #1

When all three fields are filled in, your screen should look like the one below:

When all three fields are filled in, your screen should look like the one below

We’re also going to make a small option change. This is a design change because I personally think another layout is easier to read than the default Contacts layout:

  • Click the "Display" tab.
  • Set the "Display Format" option to "Plain", as shown in the figure below:

Set the Display Format option to Plain

Step #3. Show

Now that you have your contact form ready, the final step is to make it publicly visible via a menu link.

Because we already have a Contact Us menu link, we’re going to edit that instead of adding a new link.

  • Go to "Menus, "Main Menu", then "Add New Menu Item".
  • Title: Contact
  • Menu Item Type: Single Contact
  • Select Contact: Joomlaville Mayor

Select Contact: Joomlaville Mayor

Now visit the front of your site, and your contact form will look like the image below:

Now visit the front of your site to check how your contact form will look like

If anyone uses this form, you will now get an email that looks like this:

If anyone uses this form, you will now get an email

Advanced Contact Options

There are some useful features you can use to improve your form. For example, you can add more data about your organization:

  • Go to "Components", then "Contacts" and edit "Joomlaville Mayor".You will see a variety of contact fields, including Address, City or Suburb, State or Province, Telephone, and Website. The image below shows some sample data from OSTraining:

The image below shows some sample data from OSTraining

Here's how that data will appear on the front of the site:

Here's how that data will appear on the front of the site

You can also create custom fields to improve this contact form. This process will be similar to the process we used in "The Absolute Beginners Guide to Joomla's Custom Fields", but there will be some small differences.

  • Go to "Components" and "Contacts".
  • Click "Field Groups" in the left-hand sidebar.
  • This is the important new task: choose "Mail" from the dropdown menu. This means your fields will be attached to contact forms that users can rely on to send an email. If we choose "Contact" or "Category", our fields will only be available to site administrators.

If we choose Contact or Category, our fields will only be available to site administrators

  • Click "New".
  • Title: Extra Contact Details
  • Save the field group and make sure your next screen looks like this:

Save the field group and make sure your next screen looks like this

  • Click "Fields" in the left-hand sidebar.
  • Again, choose "Mail" in the dropdown menu:

Again, choose Mail in the dropdown menu

  • Click "New".
  • Title: What is Your Question About?
  • Type: Checkboxes

Type: Checkboxes

  • Field Group: Extra Contact Details
  • Checkbox Values: Enter topics that people might be contacting you about.

Checkbox Values: Enter topics that people might be contacting you about

  • Click the "Permissions" tab.
  • Set "Edit Custom Field Value" to "Allowed". This will allow anyone to enter data into this field.

Set Edit Custom Field Value to Allowed

  • Visit the front of your site, and your contact form will now have a custom field:

Visit the front of your site, and your contact form will now have a custom field

  • Any fields you add using this method will get added to emails you receive:

Any fields you add using this method will get added to emails you receive


Joomla! Update, Messaging, Multi-lingual Associations and Post-Installation Messages

There are four components that we'll skip over in this blog post:

  • Joomla! Update: This is where you go to update your Joomla site.
  • Messaging: This is one of the simplest components. It allows you to send private messages to other members of your site. However, it really does have very limited features and in many years of using Joomla, I've never seen it used on a real site. Click here for more on Messaging.
  • Multilingual Associations: Check out this guide to multilingual associations.
  • Post-Installation Messages: This shows messages about new features in Joomla.

News Feeds Component

The News Feeds component allows you to automatically show news from other websites.

News Feeds uses a technology called RSS or Real Simple Syndication to pull in the feeds from other sites.

Let’s walk you through the process of setting up feeds on your site. We'll use our CASh workflow again.

Step #1. Categorize

Just as with our articles, banners, and contacts, our news feeds are organized into categories:

  • Go to "Components", "News feeds", and then "Categories".
  • Click "New" and enter a general title for our category, such as Joomla News. Your screen looks like the one below:

Click New and enter a general title for our category

Step #2. Add

Next, we need to find the feeds that we’re going to import. The normal way to do this is to browse to the sites you’re interested in and look for a little RSS icon.

The common design for an RSS icon is a square image with a dot in the bottom-left corner and two waves coming out of it toward the top-right corner.

Next, we need to find the feeds that we’re going to import

When looking for RSS feeds on other sites, you may need to hunt around a little as different sites put the feed in different places.

Some put their RSS icon in the browser bar, some in the sidebar, and some in the site footer.

In this example, we’re going to list the latest tutorials from Joomlashack.

  • Go to "Components", "News Feeds", and then "Feeds".
  • Click "New".
  • Title: Latest Joomlashack News
  • Link: https://feeds.feedburner.com/jshack
  • Category: Joomla News

In this example, we’re going to list the latest tutorials from Joomlashack

Step #3. Show

All we need now is to make a menu link to our news feed:

  • Go to "Menus", "Main Menu", then "Add New "Menu Item".
  • Menu Title: News
  • Menu Item Type: Click "Newsfeeds", then choose Single News Feed.
  • Feed: Latest Joomlashack News

When you’re finished, the front of your site will look like the image below:

When you’re finished, the front of your site will look like the image below


Redirects Component

The Redirects component records broken links that people try to visit on your site and allows you to safely redirect them to a working page.

Why would there be broken URLs on your site? There are two likely reasons:

  • Mistyped URL: Someone may have mistyped the URL to one of your pages - it may even have been you. If this is the case, the location of the broken URL shows in the Referring Page column so you know where to go to fix the link.
  • Old URL: If you moved your site to Joomla from another type of Web site, it’s possible that your URLs have changed. People may still be trying to visit those old URLs.

The Redirects component is here to fix those links for you. It can automatically redirect broken URLs to a working URL of your choice.

Because the Redirects component isn’t needed for every site, it isn’t enabled by default. Here’s how to enable Redirects:

  • Go to "Extensions", then "Plugins".
  • Type "Redirect" into the Search box, and you’ll see the "System - Redirect" plugin:

Type Redirect into the Search box, and you’ll see the System - Redirect plugin

  • Click the red X button. It will turn to a green check mark, and that will mean the plugin is enabled.

Click the red X button. It will turn to a green check mark, and that will mean the plugin is enabled

Now, let’s generate some broken links so we can see how they are recorded by the Redirects component.

  • Go to the front of your site.
  • Try to access a broken URL. For example, click the "Contact" link. In the browser bar, delete the “act” from the end of the URL and try to access that URL. You know that you’ve found a broken link when you get a message saying “The requested page cannot be found", as in the image below:

Try to access a broken URL

Now let’s see how Redirects recorded that broken link.

  • Go to "Components", then "Redirects". You should see at least one recorded link, as in the image below:

Go to Components, then Redirects

  • Click on the broken URL.
  • Destination URL: Enter the URL of the page you want people to be redirected to, as in the image below.
  • Status: Enabled

Status: Enabled

Now you can test to see whether the redirect is working.

  • Copy the Expired URL and paste it into the address bar of your browser. That broken URL should automatically redirect to the New URL. In this example, I could type in https://ostraining.com/joomlaville/index.php/cont and be automatically redirected to https://ostraining.com/joomlaville/index.php/contact.

The Search and Smart Search Components

The Search component allows people to search for keywords on your site.

Of all the components introduced in this blog post, this is the one that is guaranteed to be used on almost every Joomla site.

Everything you need to use Search is already set up. There is a search form available on your site, as shown in the image below:

There is a search form available on your site, as shown in the image

  • Type "Joomlaville" into the search box and press Enter or Return on your keyboard. You see search results returned, as in the image below:

You see search results returned, as in the image

There aren’t many settings you can configure for the Search component, but one is particularly useful. The "Gather Search Statistics" option allows you to track all the searches that people have made on your site.

Those search results give you a good idea about what is popular or even what is hard to find on your site.

Here’s how to set it up:

  • Go to "Components", then "Search".
  • Click "Options" and set "Gather Search Statistics" to "Yes".

Click Options and set Gather Search Statistics to Yes

Now whenever someone uses your site’s search, it is recorded here inside the Search component, as in the image below.

I’ve used the search box several times to show you how it works.

Now whenever someone uses your site’s search, it is recorded here inside the Search component, as in the image

The Smart Search component is a more sophisticated alternative to the Search component. It does allow you to search with more accuracy.

But it has another useful feature if you’re a Joomla beginner: it allows you to show your content in more advanced ways.

Here’s how we set it up:

  • Go to "Extensions", then "Plugins".
  • Search for and enable the "Content - Smart Search" plugin.

Search for and enable the Content - Smart Search plugin

  • Go to "Components", then "Smart Search".
  • Click the "Index" button in the top-left corner, as shown in the image below.

Click the Index button in the top-left corner, as shown in the image

  • You’ll now see a pop-up box, and shortly afterwards you’ll see a message saying “Indexing Complete”.
  • Close the window, and you’ll see that Smart Search now has a list of all your content, as in the image below. In the future, every time you add content, Smart Search will automatically add it to this index.

Close the window, and you’ll see that Smart Search now has a list of all your content, as in the image

Now that Smart Search is ready, let’s make it available to our site’s users.

  • Go to "Extensions", then "Modules".
  • Click the green check mark next to Search, so that it turns to a red cross, as in the figure below. This will unpublish the default Search box.

Click the green check mark next to Search, so that it turns to a red cross, as in the image

Now we’re going to replace the Search box with a new Smart Search box:

  • Click "New".
  • Click "Smart Search".
  • Title: Smart Search
  • Search Field Label: Hide
  • Show Title: Hide
  • Position: Search [position-0]

Now we’re going to replace the Search box with a new Smart Search box

  • Visit the front of your site. You’ll see what seems to be an unchanged search box. However, if you start typing, this new Smart Search feature will automatically recommend results, as in the image below.

If you start typing, this new Smart Search feature will automatically recommend results, as in the image below

  • Choose one of the search options. You’ll find that the results are different than with the basic search. The Smart Search results are shown in the image below.

The Smart Search results are shown in the image

  • Also, if you click on the "Advanced Search" button at the top of the search results, you’ll see many more ways to find content. As shown in the image below, you’ll see that you can search by Author, by Category, and by multiple other filters.

As shown in the image, you’ll see that you can search by Author, by Category, and by multiple other filters

Smart Search looks wonderful, right? Why on earth would you not rush out and make it the default on your site? 

There’s only one real reason why you might avoid it: Smart Search doesn’t support every Joomla extension. It does support all of the default extensions in this blog post, but in one of the future posts you will see how to add hundreds of new extensions. Smart Search doesn’t support all of those extra extensions.


Tags Component

The Tags component is a flexible and useful alternative to categories.

Throughout this blog, we’ve used categories to organize our content. I still recommend that you continue to use categories, but there’s no denying that Tags will allow you to do things that categories will not.

Let’s go to the front of our site, and you'll see a "Popular Tags" module in the right-sidebar. If you click "Joomla" in the menu, you’ll see all articles with that tag:

If you click Joomla in the menu, you’ll see all articles with that tag

At the moment, only one article has the Joomla tag: About Joomlaville. If you look closely at that article, you'll see the Joomla tag in the top-left corner:

If you look closely at that article, you'll see the Joomla tag in the top-left corner

What if we wanted to create a list of places in Joomlaville that were suitable for young children?

Joomla only allows us to place articles in one category. If we wanted to create a list of places that are suitable for kids, we couldn’t use it for both Parks or Attractions.

That is the problem that Tags can solve. It allows us to organize content in more sophisticated ways than categories. Do as follows:

  • Go to "Content", then "Articles".
  • Open the "Museum" article.
  • In the Tags box, type in "Child Friendly" and press Return or Enter on your keyboard. You know that the Tag has been successfully created when it appears as it does in the screen below:

You know that the Tag has been successfully created when it appears as it does in the image

  • Save the Zoo article, then add the Child Friendly tag to these articles: Lake Park and City Park. As you add the tags to those other articles, you’ll notice that Joomla automatically completes the tag for you.

Now let’s allow visitors to find our Child Friendly content:

  • Go to "Menus", "Main Menu" and then "Add New Menu Item".
  • Menu Title: Child Friendly
  • Menu Item Type: choose "Tags", then Tagged Items
  • Tag: Child Friendly
  • Parent Item: Attractions
  • Visit the front of your site and under Attractions, you’ll find the Child Friendly page, which looks like the image below. On this page, you’ll see that you’ve included content from two different categories.

You’ll find the Child Friendly page, which looks like the image

So Tags are more flexible than categories because an article can have multiple tags, but only one category.

Tags are also more flexible because they apply to articles, but also to Banners, Contacts, News Feeds, Users and more.

With tags, you can organize almost anything on your site and place it on the same page.

As you’ve seen, you can create tags from inside your articles. The area inside Components, then Tags, is to provide one central place to control all of the tags on your site.

Here you can edit, delete, rename and reorder all of your tags.

Here you can edit, delete, rename and reorder all of your tags

At the end of this blog post, your Joomlaville site will look similar to the image below. Don’t worry if your site is not 100% identical to the image.

The goal I have for you is to not perfectly re-create this site about Joomlaville. The goal is for you to understand the concepts and the processes that will help you to master Joomla.

If you now feel comfortable creating banners, contact forms, search boxes, tags, and more, that’s great: You’re ready to move on to the next blog post.

If you now feel comfortable creating banners, contact forms, search boxes, tags, and more, that’s great: You’re ready to move on to the next post