Intro image with Joomla logo and pencil icon

In the "previous tutorial", you learned how to make your Joomla articles look more exciting and more interesting. But what if your content needs more than a title and text?

This tutorial explains how you can add interesting and useful data to your Joomla articles with custom fields. Joomla provides custom fields which you can use to show dates, numbers, images, URLs and much more.

At the end of this tutorial, you'll be able to do the following:

  • Understand the different types of Joomla fields.
  • Display the fields on your Joomla articles.

Introducing Fields

Often you write content that is very straightforward. Simple content doesn't need more than a title, plus some main text. However, you may have some content that must be more detailed.

For example, imagine you want to list businesses on your Joomla site. Each business requires a title and text, plus also a phone number, logo, address, and website link.

Or imagine that you want to display your company's products. Each product needs a price, photos, weight, and SKU number.

Fields enable you to create rich and detailed content in Joomla. Let's see how fields work. You're going to use the same CASh workflow that we've recommended throughout our blog.

This example is taken from the Joomla 3 Explained book where you build a website for a city called "Joomlaville".

Step #1. Categorize

With Fields, the organization you use is called Field Groups, rather than Categories.

  • Go to "Content", then "Field Groups".
  • Click "New".
  • Title: Attraction Details
  • Description: These fields show information about Joomlaville attractions.
  • Click "Save & Close".

Enter title, description and click Save and Close

Step #2. Add

Now let's create fields for the attractions. The first field will be a date field, showing when the attraction first opened.

  • Go to "Content", "Fields", and click "New".
  • Title: Date Opened
  • Field: Calendar

The date field, showing when the attraction first opened

  • Description: This is when this attraction was first open to the public.
  • Required: Yes.

Enter description and select Yes for Required

You also need to categorize this field correctly. On the right-hand side, choose these options:

  • Field Group: Attraction Details
  • Category: Attractions

Categorize this field properly

  • Click "Save & Close" to complete the field.

The next field will be a list of amenities available for visitors to the attraction.

  • Go to "Content", "Fields", and click "New".
  • Title: Amenities
  • Field: List

The next field will be a list of amenities available for visitors to the attraction

  • Description: These are the resources available to visitors.
  • Required: Yes
  • Multiple: Yes

At the bottom of the screen, you'll see a "List Values" area:

At the bottom of the screen, you'll see a List Values area

  • Click the green + icon and enter "Restaurant" into the Text field. This is what visitors will see.
  • Also, fill in the "Value" field. This is the name Joomla will use to store the data so it doesn't have to be user-friendly.

Click the green + icon, enter Restaurant into the Text field

  • Repeat this process for "Gift Shop", "Picnic Areas", and "Restrooms".

Repeat this process for Gift Shop, Picnic Areas, and Restrooms

  • Field Group: Attraction Details
  • Category: Attractions
  • Click "Save & Close".

You've successfully added two fields. Let's see how you use them to show information to your website's visitors.

Step #3. Show

In this step, you'll enter data for one of your attractions:

  • Go to "Content", then "Articles".
  • Open the "Museum" article.
  • Click the "Attraction Details" tab:

In this step, we'll enter data for one of our attractions

You should now see both of your fields as in the image below. If you don't see both fields, retrace your steps and make sure you have chosen the correct Field Group and Category for both fields.

You should now see both of your fields

  • Click "Date Opened" and choose a date:

Click Date Opened and choose a date

  • Click "Amenities" and choose several of the options:

Click Amenities and choose several of the options

  • When you're finished, your fields will look like this:

When you're finished, your fields will look like this

  • Save this article and visit the front of your site. Click the "Attractions" tab and visit the Museum article. You'll see the fields on display:

Save this article and visit the front of your site

More Field Examples

Now that you've seen one example of fields, let's see some more advanced examples. The first example will be a logo for your attractions.

  • Go to "Content", "Fields", and click "New".
  • Title: Attraction Logo
  • Type: Media

The first example will be a logo for our attractions

  • Description: This field contains the logo for this particular attraction.
  • Required: Yes
  • Directory: attractions

Enter description, select Yes for Required, and select Attractionf or Directory

  • Field Group: Attraction Details
  • Category: Attractions
  • Click "Save & Close".

Let's try that again, but this time you'll show a series of photos from the attraction:

  • Title: Attraction Photos
  • Type: List of images
  • Description: This field contains several photos for the attraction.
  • Required: Yes
  • Directory: attractions
  • Multiple: Yes
  • Field Group: Attraction Details
  • Category: Attractions
  • Click "Save & Close".

Let's add the photos. You can download sample photos from https://ostraining.com/books/j3e/chapter7/.

  • Go to "Content", "Articles", and open "Zoo".
  • Add details for the Date Opened and Amenities fields.
  • Click "Select" next to the Attraction Logo field.
  • In the pop-up, click "Choose Files" and upload all the sample images you downloaded:

In the pop-up, click Choose Files and upload all the sample images you downloaded

  • After uploading, you'll see all four images have been added to the attractions folder:

You'll see all four images have been added to the attractions folder

  • Select the Zoo image and click "Insert".

Select the Zoo image and click Insert

  • Next, you can add the three animal images to the "Attraction Photos" field. However, you may need to click "Save" for your new images to show. Here is how your screen will look after choosing the three images:

Next, you can add the three animal images to the Attraction Photos field

Save the Zoo article, and visit the front of your site. Your Zoo article will look like the screenshot below:

Visit the front of your site

Great! Your fields are working. You've seen how many of Joomla's fields work. If you want a detailed explanation for all 15 fields, visit https://joomlashack.com/blog/tutorials/fields-joomla/.

However, it is time to do some cleaning up. The article display does not look as good as it should. The fields are not perfectly aligned, and there's too much clutter on the page.

Cleaning Up Our Display

First, let's make your fields look better. You don't need "Attraction Logo" or "Attraction Photos" to display on the page.

  • Go to "Content", "Fields" and edit the "Attraction Logo" field.
  • Click the "Options" tab.
  • Set "Show Label" to "Hide".
  • Set "Automatic Display" to "Before Title".

Let's make our fields look better

  • Save this field and open the "Attraction Photos" field.
  • Click "Options" again.
  • Set "Show Label" to "Hide".
  • Set "Automatic Display" to "After Display".

If you save this field and visit the front of your site, you'll see that your Zoo article looks considerably cleaner:

Your Zoo article looks considerably cleaner now

However, there is more data that you can remove. For example, the Published date and the number of hits are not really important.

There are three levels you can target for turning off these features:

  • The whole site
  • The Attractions category
  • The Zoo article

In this example, you're going to turn off these features for the whole site. In the next tutorial, you'll look at how to make these choices for categories and articles.

  • If you are anywhere under the "Content" menu, click the "Options" button in the top-right:

If you are anywhere under the Content menu, click the Options button in the top-right

This page has a large number of configuration options for your content. On the first tab called "Articles", you'll see the options you need. Make these changes:

  • Show Category: Hide
  • Show Author: Hide
  • Show Publish Date: Hide
  • Show Navigation: Hide

On the first tab called Articles, you'll see the options we need

And then further down the page, make these changes too:

  • Show Icons: Hide
  • Show Print: Hide
  • Show Email: Hide
  • Show Hits: Hide

And then further down the page, make these changes too

  • Click "Save" and visit your Zoo article on the front of the site. The content should now be clean and stylish:

Visit your Zoo article on the front of the site. The content should now look clean and stylish.

What’s Next?

You’ve added great articles to your site, but there’s a problem. As you add more and more articles, it becomes harder to find them all.

You need some better navigation so that people can easily find all of your wonderful articles.

In Joomla, navigation is created with menus. So that’s what you’re going to do next. In the next tutorial, you'll get a better understanding of menus and menu links so you can create really good navigation on your site.

Additional Reading

Would you like to learn more about how to create great website with Joomla? Join the Joomlashack Everything Club and instantly download the "Joomla 3 Explained" bestselling book by Steve Burge.


About the author

Born from a Ukrainian mother and Russian father, Alex lives in the United Kingdom. Alex is a self-taught Microsoft Certified Professional. He enjoys learning Joomla and helping web site administrators make the most of it.