The Ultimate Guide To Joomla Custom Fields

Through 16 different types of Joomla custom fields, developers have the flexibility to integrate additional fields into Articles, User Profiles or Contact forms and show them on the front-end. 

It's a convenient medium to add more information to your page or customize your article layout.

While the core Joomla settings are limited to custom fields on the three above components, various custom field plugins and extensions are available for users to tailor their content personally. 

Table of Content

How to create custom fields in Joomla

Step 1: Create custom field groups & custom fields.

Step 2: Set custom field directory

Step 3: Display custom fields in the desired item

16 Joomla custom field types

The example of Joomla custom fields

Joomla custom field plugins & extensions

Final Thoughts

How to create custom fields in Joomla

To create Joomla custom fields, you will need to go through three steps:

• Step 1: Create custom field groups & custom fields.
• Step 2: Set custom field directory
• Step 3: Display custom fields in the desired item

Step 1: Create custom field groups & custom fields

1. Create a custom field group

Go to Content -> Field Groups:To create a group for your custom fields, click the ‘New’ button. Then, you will see the screen as shown in the picture below:For illustration purposes, we created a ‘Class gallery’ field group. 

After filling in new field group information, don't forget to click ‘Save & Close’. Then, you can see a new group in a list with the message below:2. Create a custom field

Go to Content -> FieldsClick ‘New’ to create a custom field and fill in the required information. In this part, we created the ‘English classes’ and ‘French classes’ fields. Two new custom fields are List of images and belong to the ‘Class gallery’ field group.’ 

Step 2: Set custom field directory

Once you create a new custom field, you will need to set a directory for your field. There are several things that you need to pay attention to. 

• Once the custom field type is selected, it cannot be changed
• Directory: Select the media folder for this custom field
• Multiple: Choose to allow showing multiple items from the custom field or not.

If you want to show more than one picture from English classes, you need to choose the ‘Englishclasses’ directory from media folders and select ‘Yes’ in Multiple options.

Similarly, we choose the ‘Frenchclasses’ directory for French classes and select ‘No’ in Multiple option. Here, you can decide where to display fields by going to the Options tab and changing the Automatic Display option:Then click Save & Close, you will see the new custom field in the list with the message shown below.

Step 3:  Displaying custom fields in the desired item

As mentioned above, Joomla 3.x allows users to add and display the custom field with three options.

Option 1: Add custom field to article

Open the article that you want to add a custom field to and select the Custom field group (all custom field groups will be added to this control panel). From this screen, you will see all of the custom fields in that group.For English Classes, you will be able to select multiple items from the selected directory while with French classes, you only can choose one item from the selected directory (based on the above-selected options).

Now, the new custom field will appear in the front-end article as in the below picture.

Option 2: Add custom field to Contact

Go to Components -> Contacts -> Contacts: From the ‘Contacts: Fields’ screen, you can add Custom Fields and Field groups to the Contact component by going through similar steps as above. 

Option 3: Add custom fields to user profile

In the same way, you can add a custom field to Profile Users. The only difference is that you need to create Custom Fields and Field Groups under Users. Note: You will need to go to Extensions -> Plugins to enable the custom fields before adding them on your sites.

16 Joomla custom field types

From version 3.7.1, Joomla has integrated its abilities to add an additional custom field to its core sections including:

• Articles
• User profiles
• Contact forms

Using Joomla custom fields, you can add 16 different types of fields:

• Calendar
• Checkboxes
• Colour
• Editor
• Integer
• List
• List of images
• Media
• Radio
• Repeatable 
• SQL
• Text
• Text Area
• URL
• User
• User Groups

To get more detailed information about these above custom fields, you can read this Joomla tutorial. 

An example of Joomla custom fields

With 16 custom field types, Joomla users can create many customized elements to build attractive websites. Here is an example to show how people often use custom fields on their Joomla site.

According to the instruction, we had created the ‘Custom fields’ field group with the following fields:

1. Logo (Media type) 2. Features (Checkboxes)3. Colour (Colour)4. Public date (Calendar)5. Number of the niche(s) (Integer)6. The website link (URL)To edit the setting for each custom field, open the ‘Custom fields’ tab in your article:Then, the result in front-end is shown as below:

Joomla custom field plugins & extensions

Joomla custom fields are a powerful tool to build engaging content, however, the design and layout might not be flexible enough to meet user’s demands. 

Therefore, we recommend that you make use of the impressive selection of Joomla custom field plugins and extensions are available for Joomla users in case they do not have technical knowledge of CSS or PHP.  

1. Article Field - Free & Pro Edition

With great capabilities, the Article Field extension allows you to link one article from a list and then link to other articles, which you can not do with the native Joomla custom field. Moreover, you can determine which articles show up in the custom field by optionally filtering them by categories. 

Advantages: 

• Detailed documentation
• Straight-forward to use
• Quick support

Features:

• Choose an article from a list and display in a custom field
• Create links between articles
• Show a list of titles from selected articles
• Generate hyperlinks to the respective articles 
• Display with a custom layout (title, custom fields, and other article data)

2. CFI

CFI supports users to import and export custom fields in Joomla articles. With this extension, you can easily import your catalogue with thousands of products from Excel to your Joomla sites or update their prices quickly without paying for expensive import extensions. Advantages:

• Easy to use
• Clear documentation

Features:

• Import and synchronize custom fields from Excel
• Export data from your sites with one click
• Update content quickly

3. EasyLayouts

With a drag & drop interface, EasyLayouts enables users to generate highly customized contact forms and content layouts. 

It’s easy to manage custom field presentation as well as insert a filter module to your Joomla site with this amazing extension.Advantages: 

• Reasonable price
• Easy to use
• Good support

Features:

• Extra custom fields to enhance site performance 
• Easily design custom contact form
• Filter your menus and modules
• Sort your menu items and modules
• Responsive template supporting Bootstrap 2,3 &4, Ulkit 2&3
• Templates override with no coding
• Integration with 3rd Party addons

4. Fields - Location

The Fields- Location plugin integrates the map location selector as a custom field type in your Joomla site. You can easily add any number of map fields to your articles, categories, contacts or users with this plugin.Advantages:

• Easy to use

Features:

• The configuration provides two options: Google Maps API key and Google Maps Static API Key
• Customize size, default location, map type, zoom level 
• Display either a Google map, a static map or a latitude/ longitude textual display
• Enable to add Google Places Search to speed up the process

5. Fields - Terms of Service

The Fields- Terms of Service plugin allows users to add a custom field and term field to a registration form. Besides, the administrator will be able to insert necessary extra fields such as acceptance filed into the registration form.Features:

• Custom display styles for Registration, Profile View and Administrator
• Create unlimited terms fields
• Store date/time and IP address of acceptance
• Link new terms to any document 

6. CMSE Custom Fields 

Are you looking for extensions to add audio playlists, polls, Google Maps, social media feeds, and more into your articles? CMSE Custom fields come in handy to solve this problem. Features:

• Easily maximize or optimize any article page 
• Add social network feeds or embed social network posts
• Add a Google map
• Insert video anywhere on your articles
• Add images, slideshow into articles
• Insert contact form anywhere
• Block guests from viewing different parts of an article

Final Thoughts

To show additional attributes on an article, user profile or contact, Joomla users can customize and show content from 16 types of Joomla custom fields.

For more specific purposes, users can consider using custom field plugins & extensions from third parties to create more engaging and informative content. 

If you are looking for impressive design and layout to present your amazing content, have a look at our customized Joomla templates.

TRY THE JOOMLASHINE TEMPLATE FOR FREE