Special Offer for Full Website Development Package More Info

joomla custom fields tutorial

Custom Fields were firstly introduced in Joomla in 2017 with the release of Joomla 3.7. Many of us are aware of their existence, but not everybody has already realised how powerful these are or had the opportunity to exploit them. The idea of this article is to present a few recent projects which have used Custom Fields. Hopefully this will stimulate many of us to give it a try and to start to play with them. And I think it is really worth it : Custom Fields bring Joomla to another level.

In this article, we will show you how to manage and display your own Custom Fields.

What are Joomla Custom Fields ?

For now, custom fields are supported for three components of Joomla and 15 field types:

Joomla custom fields supports:

  • Articles
  • User profiles
  • Contact

Joomla 15 types of fields:

  1. Calendar Field: Provides a text box for entry of a date. An icon next to the text box provides a link to a pop-up calendar, which can also be used to enter the date value.
  2. Checkboxes Field: Provides a single checkbox to be checked or unchecked.
  3. Color Field: Provides a color picker when clicking the input box.
  4. Editor Field: Provides a drop down list of the available WYSIWYG editors.
  5. Usergroup Field: Field to load a drop down list of available user groups.
  6. List Field: The list form field type provides a drop down list or a list box of custom-defined entries. If the field has a saved value this is selected when the page is first loaded. If not, the default value (if any) is selected.
  7. List of Images Field: Provides a drop down list of image files.
  8. Textarea Field: Provides a text area for entry of multi-line text.
  9. Text Field: Provides a text box for data entry.
  10. Media Field: Provides modal access to the media manager for insertion of images with upload for users with appropriate permissions.
  11. Integer Field: Provides a drop down list of integers between a minimum (first) and maximum (last) value.
  12. Radio Field: Provides radio buttons to select different options.
  13. Sql Field: Provides a drop down list of entries obtained by running a query on the Joomlaǃ Database. The first results column returned by the query provides the values for the drop down box.
  14. Url Field: Provides a URL text input field.
  15. User Field: Provides a field to select a user from a modal list. This field displays the User Name and stores the User ID.

Obviously, the most frequent reaction on this series of examples of real websites implementing Custom Fields was "OK, great. Now that I see what can be achieved, I also want to play with Custom Fields. But how does it work in the backend... and how do I display my own in the frontend ?"

This article will indeed explain the basics to manage and display your own Custom Fields.

Manage your Custom Fields

Custom Fields can be natively added to Articles, Contacts and Users. So the backend now has new submenus allowing you to manage them:

In the Article Manager (in the backend, menu "Content > Articles"), there are two new submenus on the left :

  • Fields : allowing management of your Custom Fields
  • Fields Groups : allowing grouping of those fields so that they will appear on different Tabs when you edit, for example an Article

In this article, we will first show how to add a Text field showing the Director for all articles of the Category Movies.

When you click on the Fields submenu item, you access the Custom Fields Manager. There you can create a new Custom Field:

  1. click on New
  2. type a Title
  3. select a Type of field according to your need : text, calendar, list, ...
  4. give a Name to that field (optional : if empty the system will just use the Title as Name, just like an alias is derived from a Title)
  5. give a Label which will be displayed before the Field when editing
  6. type a Description which will appear in the label Tooltip
  7. choose whether the field is mandatory or not with the option Required
  8. fill in a Default Value if you want the field to be prefilled
  9. For certain types of field, a Filter option is available. In the case of a Text field, you can choose between raw, safe html, text, alpha numeric, integer, ...
  10. Maximum Length : the maximum number of characters that can be entered

Please note : some options can vary according to the selected Field Type. In this example, the Options are those of the Text Field

Joomla custom field form of a new custom field

 On the right, you can also choose

  1. the Field State : Published, Unpublished, ...
  2. the Field Group (this option will be explained in more details in Episode 3)
  3. the Category, allowing you to limit the use of that particular Field to the Articles (/Contacts/Users) of certain Categories
  4. the Access, allowing you to limit that field to certain groups of visitors
  5. the Language, allowing you to limit the use of that field to a given language (useful for multilingual websites)
  6. a Note, being a memo for yourself about that field

The tab Options will be explained in more details in Episode 3. Only the last 3 options are detailed in the Present episode :

  • Show label : Yes/No
  • Show on : should the Field be shown only in the backend, only in the frontend or in both
  • Automatic display : defines how the Custom Fields should be integrated in your content (Article / User / Contact) 
    • After Title: obviously after the Title (but before the informations such as Date / Author / ...)
    • Before Display: just before the Article content (and after the informations such as Date / Author / ...)
    • After Display: after the Article content
    • Do not automatically display: the field will not be displayed. This is what you want to choose
      • if you want to use the shortcode like in order to insert your Field manually somewhere in your Content (xxx being the ID of the field)
      • if you make a Layout Override in order to have your own layout for example for all Articles or for all Articles of a given Category (this technique will be detailed in Episode 6)

Joomla custom fields Options for a Custom Field

 Once this is done, you can Save your new Field. From now on, that field will be available for the Articles (/ Contact / Users).

What if your Joomla instance doesn't offer Custom Fields ?

Custom Fields were introduced in 2017 with Joomla 3.7. The first thing to do is of course check that your Joomla instance is up to date.

By default, Custom Fields are enabled. So if you still don't see them (or if you want to disable them), you can play with Joomla's options.

In order to enable / disable Custom Fields for Articles / Contacts / Users, go respectively to the Articles / Contacts / Users Manager and click on the button Options (in the top-right corner of the interface).

Enabling Joomla Custom Field

Note : if you don't see this Options button in the Articles / Contacts / Users Manager then it means that you probably don't have enough Administration rights. In that case, please contact your website Administrator.

In these Options, go to tab Integration > Enable Custom Fields and select Yes: 

enable joomla Custom Field

Note : Joomla is very powerful. Just like Joomla's native system of Categories can be used by third-party extensions, Custom Fields can also be easily integrated by third-party extensions. Some extensions already support Custom Fields so that you can customise further. This topic will be tackled in an another Episode.

As soon as Custom Fields are enabled for Articles / Contacts / Users, the two above-mentioned submenus do appear in the Articles / Contacts / Users Manager, namely :

  • Fields
  • Fields Groups

Editing a Custom Field in an Article

In our example we have created a Field Director which will only be available for the articles of the Category Movies.

Note : when you first create a new article, no Custom Field is shown ! That is normal : unless a Field is assigned to All Categories, Joomla waits for you to select the article Category in order to display the Custom Fields which are assigned to that very Category!

Once you have selected the Category, a new tab "Fields" does appear. It contains all fields assigned to the selected Category.

Each field is displayed :

  • with its Label
  • followed by the field itself
  • if you have mentioned a Default Value when creating the Field, that Value will prefilled
  • if you have set Required to Yes then of course you cannot Save the Article until you have typed a value for that field

update joomla custom field for article

When hovering the Label, a tooltip shows the Description of that field

Joomla custom field tooltip

Display the content and the fields on the frontend

On the frontend, the Custom Fields will be displayed in the position that you selected for each field, namely (see above for details):

  • after title
  • before display
  • after display

Positions of Joomla Custom Fields in frontend

If you want to have a specific display (for example your Content on the left and the Custom Fields on the right), then you will need to make a Layout Override (this will be explained in Episode 6).

Displaying fields in the text of an Article

Next to the 3 predefined positions, it is also possible to insert any field anywhere in the body of the Article by using the Field Content Plugin. In practice, there is a new button in your Editor called Field. When clicking on that Field button, the list of available Fields appears in a modal window. Just select the desired field. The modal window closes and the following tag is automatically inserted in your text : where xxx is the Field ID.

add a Custom Field within an Joomla article

The tags are automatically replaced by their respective values in the frontend:

View of a Joomla Custom Field in an article

The label before the value of the Field can be displayed or not according to the corresponding Field option.

Searching on the content of the fields

By default, the Search does also cover Custom Fields. For example, if you search for the word "Spielberg" in the Joomla Search Engine, you will find any Article or Contact having that word in their Custom Fields (you will not find Users because they are not in the scope of search results).

Search Joomla Custom Fields

Note : if the word is found in the body of an article, it is typically highlighted but if the word is found in a Custom Field, there will be no highlighting as (for now) the Custom Fields are not displayed on the Search Engine Result Page.

New section : other examples of websites using Custom Fields ?

The present Episode is finished, but following the feedback of the first Episode we wanted to share new examples of interesting websites making use of Custom Fields. So every month we will try to showcase one of them.

Start implementing custom fields for your Joomla website

Hopefully you now have the basics in order to start using Custom Fields.