Page 1

Using The Joomla! Contact Component as a Business Directory

Note: This tutorial assumes that you
have administrative access when
logging into the Joomla! back end.

Log Into Joomla!'s back end:

Go to your Joomla! website and log into the back end by typing in your user details.
(Figure 1)

Create a New Category in the Contacts Component:

In Joomla!'s back end menu, go to the components
menu. In the list of sub menu's that drop down you will
see the contacts manager. The contacts manager also
has sub menus that pop out to the right. Select the
categories menu. (Figure 2)

Click new to create a new contacts category. (Figure 3)

 Page 2

In the contacts category editor you will have to create a title for the contact category, and then
optionally an alias. (Figure 4)

Note: Category Aliases are totally optional, but

strongly recommended for Joomla! 1.5 default
Search Engine Optimized URLs. (SEO URLs)

While it isn't required, you might want to go ahead and put in a description of the contact
category you've created. (Figure 5)

Once you have a title, alias and description

you can save the contact category. Saving the
category will take you back to the contact
category manager. (Figure 6)
 Page 3

Create a Contact Entry:

Now that you have a contacts category, you can
add to it with entries, such as businesses,
organizations, etc... Go back to the contacts menu,
and rather than clicking categories, click contacts.
(Figure 7)

Once you are in the contacts manager, click new to

create a new contacts entry. (Figure 8)

The next screen will display a title, which is

required, and optionally an alias. The last area
we need to check is the category. This is going to
be the category we just created. Click the drop
box and select the appropriate category.
(Figure 9)

Once you've finished adding all the information

you want, you can also change parameters on the right to suit. Save the contact, you will be
taken back to the Contacts Manager. (Figure 10)

Create a Contact Category Layout:

Go to the menus menu, for the purpose of this
demonstration, we will be creating a menu item
(specifically a contact category layout item) in
the main menu menu. (Figure 11)
 Page 4

Once you reach the menu manager for the main menu, on the right there are several icons,
click new to create a new menu. (Figure 12)

On the next screen you need to choose why type of menu to create.
Select the Contacts type. (Figure 13)

The next screen shows the two different types of contact menu items
you can create. For the purpose of a 'business directory',
you should should select the contact category layout type.
(Figure 14)

The menu Item Editor will give you the opportunity to

insert a menu Item title, as well as an alias, and then
select which menu you want the item to be displayed
on. (Figure 15)

There is one last step before you can save the menu item and return to the menu manager,
and that is to select the category of contacts you want this menu item to be driven to. This is
done through the parameter tab on the
right. Select the same category that we
created and entered a contact item into.
(Figure 16)

The final step will be to save the menu item. (Figure 17)

This method of using the Joomla! Contact Component gives Joomla! 1.5 a nice 'business
directory' like function. A nice addition to any business directory is showing all the 'categories'
in once place, so that people can see them all. So, keep reading if you'd like to find out how to
do this little extra 'trick' to spice up your Joomla! directory.
 Page 5
Additional Trick: Create An Article Displaying All Your Contact Categories

Note: This part of the document will assume that you

have already created multiple contact categories and
contact category layout . If you have not done this,
you should do so now. You can refer back to Steps 2
and 3 to find out how to do this.

Create a New Article:

Note: I will again be assuming that you know

enough about Joomla! 1.5 to navigate the back end
without word-for-word instructions. What I did not
mention here is that I created a content section,
and category, for the article that I am building.

What you will be doing here is creating an article with text that simply links to the menu items
you created earlier. In my demonstration I simply display text in an unordered list. (Figure 18)

Once you have created an unordered list that displays a nice directory tree, you will have to
go to the front end of your Joomla! site and copy the URL from each Contact Category Layout
menu item. (Figure 19)

At once you have copied the URL you will need to

paste it in the new link dialog box.
(Figure 20)

What this accomplishes is that you now have a

'directory tree' that drives to each directory. This
will allow visitors to see all the contact categories
in one place.
 Page 6
Once you have created all the links to
the contact categories, save the
article. You will automatically be
returned to the article manager.
(Figure 21)

Create a New Article Layout Menu:

Now that you have an article with a directory tree you need to provide a way for your users to
get to it. This is going to be done by going to the main menu item manager and creating an
article layout menu item that drives directly to this new article.

On the administrator menu, there is a menu called

menu manager. When you hover your mouse over it
sub menus drop down. Those are all the menu
modules that are on your site. We will be putting the
article layout menu into the main menu. (Figure 22)

Once you are in the main menu item manager, on the

right there are icons for basic menu functions, click
new to create a new menu item. (Figure 23)

The following window will give you all the different

types of menu items that you can create. You want
to chose the article type, and then an article layout.
(Figure 24)

In the menu item editor give the to-be menu item a

name and an alias. (Figure 25)
 Page 7
Before you can save the article and exit back to the
menu manager, you need to do one last thing, and
that is select the article that the menu item will drive
to.
On the right, under the Parameters – Basic tab, click
select. A window pops up and displays all the articles that are published on your site. Select
the article with the business directory that was previously created. (Figure 26)

Once you click on the article the window that

popped up automatically closes and you are
take back to the menu item editor. There are
no other parameters that must be changed,
so save the menu item. (Figure 27)

The “plumbing” of the directory is now complete. Now, when you click the menu item that
goes to the directory tree article, it will display all the contact categories. There is one last
thing that you can do that will make your business directory look and work even better. That
is, to set all the menu items that go directly to the contact category as “child” items to the
menu item to the article menu.

Set The Article Menu To “Parent”:

This is easily done and only takes a few minutes. Simply
open up the menu item which is going to be the “child”
item, and from the list of “parent items” select the article
menu item that was created. (Figure 28)

Now that you've selected a “parent item”, you can save the
menu item. (Figure 29)

There you have it. A nice little business directory, complete

with categories, a directory tree, and no additional
components.

Figure 30 shows what the menu

structure will look like in the menu
manager (back end) and in the front
end (user) of your Joomla! site.