Do you have a project idea where Custom Fields would be useful ? Excellent, in this second article (Episode) in a series on Joomla Custom Fields, we show you how to manage and display your own Custom Fields. 

The article "How far can we go with Joomla! and Custom Fields", published in the last edition of the Joomla Community Magazine had many views, illustrating the interest around this. The topic was also presented at JoomlaDay Netherlands in mid-April.

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 ?"

Actually, the good news is that Marc Studer has taken the initiative to coordinate a series of articles about Custom Fields to be published on the French Joomla! Portal, namely www.joomla.fr/actualites.

So our goal is to translate all these articles into English for the JCM so that everybody can enjoy.

Hopefully this can also create some sort of emulation. Please, send us your website making use of Custom Fields in the Comments below. And even better : be proud and publish them on showcase.joomla.org :)

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

 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 {field xxx} 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)

 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).

 

 

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

 

 

 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.

 

 

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

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

 

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

 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 : {field xxx} where xxx is the Field ID.

 

 The tags {field xxx} are automatically replaced by their respective values in the frontend:

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).

 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.

This month, we will quickly show what has been achieved on a Hiking website made by Pascal Conreaux.

Hiking website

This multilingual website (FR, DE, EN) promotes hiking in Norwegian islands.

https://www.rando-lofoten.net/fr/randonnees-lofoten

Each Hike Sheet is built with Custom Fields:

• duration
• distance
• island
• difficulty
• type
• …

Certain information is represented by icons.

The specificity of this website is the use of an extension allowing multiple filters being also compatible with Custom Fields

NDLR : there is also another extension out there allowing you to not only add Filters but also to customize the Layout with a visual interface.
And no doubt even more extensions are coming! Regularly check extensions.joomla.org/tags/custom-fields and in particular the new section dedicated to Custom Fields extensions.joomla.org/category/authoring-a-content/custom-fields).
[ edit Sept 2021 ] : soon after the release of Joomla 4, a new promising J!4 extension has been published allowing powerful and yet easy filters. 

Those filtering possibilities of course allow us to go "one step further".

 

For the Detailed View of a Hike, a Layout Override has been made in order to get the following result  :

Those techniques of Layout Override will be discussed here in a future Episode but also at JoomlaDay Paris on 18-19 May 2018.

 

On his Blog (in French) Pascal gives some tips & tricks about the implementation of Custom Fields on this project.

 

 

And now ?

So that is it for the second Episode. Hopefully you now have the basics in order to start using Custom Fields. But here is the program for the coming months :)

• Episode 3 : Custom Fields Options in more details
• Episode 4 : using Fields Groups
• Episode 5 : Tips & Tricks for Custom Fields
• Episode 6 : Layout Override for Custom Fields
• Episode 7 : Going further with Custom Fields
• ...