Introducing Custom Fields

Ever wanted to show additional attributes on an article, user, or contact to your visitors? Through Custom Fields, you have a multitude of consistently coordinated approaches to display them on the front-end of your website. It also provides more possibilities without having to install special extensions. Custom fields were first introduced in Joomla 3.7, and with Joomla 4 keeping forward this amazing feature, it has re-introduced them in a more improved manner such that users now will have even more design possibilities. Thanks to Custom Fields, adding additional content to articles, whether manually or automatically, is now easier than ever. All Joomla 4 templates are fully compatible with Custom Field feature, you can create extra content for your articles with our template easily.

In articles, Custom Fields arrive at separate tabs and you can customize it there to show the attributes in your articles. And so, in this guide, I will show you how to create custom fields to add attributes to existing Joomla articles.

Now, let’s have a detailed look at Custom Fields!

Custom Fields can hugely save your time by offering ready-made attributes or information at the fingertips to use repeatedly and effortlessly.

How to use Custom Fields in Joomla 4

Create a Custom Field

From the admin panel (or Home Dashboard) in the backend of your Joomla site, navigate to Content > Fields from the side panel on the left.

Joomla 4 Custom Fields - Access The Articles: Fields PageAccess the Articles: Fields page from the Home Dashboard

Click the New button at the top left.

Joomla 4 Custom Fields - Add New Custom FieldAdd a new custom field

Fill in the required information. Pay attention to the asterisk (mandatory).

Joomla 4 - Custom Fields - New Custom Field - Fill In InformationEnter the required information

Note that you can assign a custom field to one or more field categories. However, the default All does not include Uncategorized articles.

Click Save & Close when you’re ready to create your new custom field.

Types of Custom Fields in Joomla

In the example above, I used the standard Text (text) type. This is the most basic type of custom field content that you can create for your articles. In fact, there are 16 different types of fields options in Joomla 4 like Calendar, Lists, Checkboxes, SQL, URL, etc., which allow you to get more creative. And even while the core Joomla settings are limited to custom fields on the three components (Articles, User Profiles, and Contact Forms), various custom field plugins and extensions are also available for users to tailor their content personally. That said, you can try out different fields and see how you can mix and match them to introduce different content into your articles.

Add Custom Fields to Existing Article in Joomla 4

Click Articles under the Site area, or under Content from the left-side panel.

Joomla 4 - Custom Fields - Home Dashboard - Access Article ManagerAccess the Articles page from the Dashboard

Click on a title to edit the existing article. Of course, you can also create a new one.

Joomla 4 - Custom Fields - Articles - Edit An ArticleEdit an existing article

On the article editing page, click the Fields tab.

Joomla 4 - Custom Fields - Articles - Select Custom FieldsSelect the created custom field

Fill in your value in the Fields area.

Joomla 4 - Custom Fields - Articles - Enter Custom Field ValueEnter your custom field value

Click Save & Close to apply your changes.

Now, with the standard Text type used for the custom field, this is the result you will see on the article’s frontend:

Joomla 4 - Custom Fields - Review Article On FrontendCheck how the custom field looks on the site’s frontend

Okay, that’s a few basic steps to create a custom field to add content to an article. Next, you’ll learn how to manage and organize custom fields in Joomla 4.

Create a Custom Field Group

Go to Content > Field Groups:

Add New Custom Field GroupAccess Field Group Manager

To create a group for your custom fields, click the New button.

Add New Custom Field Group In Joomla 4Add a custom field group

Fill in the required information. You have to provide a title (mandatory).

Joomla 4 - New Custom Field Group - Fill In InformationEnter new field group information

Click Save & Close to create your new custom field group.

Joomla 4 - New Field Group SavedNew field group saved

Now that you have created a custom field and a field group. You can add that custom field to the group above. For illustration purposes, however, I will create another field and add it to this group to display it as author information below an article.

Alright, let’s move on!

Create another Custom Field

Again, go to Content > Fields > click New, then enter the custom field information:

Joomla 4 - New Custom Field - General Tab - Fill In InformationFill in new custom field information

As you can see, this time I choose Text Area (textarea) instead of Text (text) as the field type for my new custom field. This brings two more options: Rows and Columns. Besides, I will also add this field to the field group I just created above, which is The Author in my case.

In the Options tab, under Render Options, you can choose whether to allow the field label to be shown as well as the position of the custom field on your articles. Since it is for author information, I will put it at the bottom of the article, which is After Display.

Joomla 4 - New Custom Field - Options Tab - Choose Desired OptionsChoose your desired options

Once you are ready with your settings, click Save & Close to create the new custom field and assign it to the field group.

Joomla 4 - New Custom Field SavedNew custom field saved and organized into a field group

Display Custom Field as Author Info in an Article

Now that I have everything set up correctly, I’m gonna show it in the same article that I did above. You can add it to the other posts as well.

Go to Content > Articles, open an article you want to work with with your custom field. You will see a new custom field added.

Joomla 4 - Articles - Select New Custom FieldSelect the new custom field

Fill in your custom field value:

Joomla 4 - Articles - Enter Custom Field ValueEnter your field value

Once that’s done, click Save & Close to apply your changes.

Now, go back to the article’s front-end and refresh the page. You should see your custom field at the position you selected.

Joomla 4 - Check Custom Fields On FrontendCheck the look of custom fields on the site’s front-end

Congrats! You now know how to create custom fields and add them to articles on your Joomla website.

Watch Video Tutorial

Conclusion

Custom Fields are one of the most amazing features of Joomla. They really give the CMS a new level of freedom, especially in terms of content creation. If you’re not using Custom Fields in your Joomla website right now, take some time to have a look at how useful, flexible and powerful they can be. And feel free to leave us your comments should you have any questions regarding this topic.

Now, enjoy and stay tuned for more tutorials!

4/5 - (8 votes)
Lt Digital Team (Content &Amp; Marketing)
Latest posts by LT Digital Team (Content & Marketing) (see all)

The Big Summer Sale! Get 50% Off for everything on today, don't miss it. Coupon code: SUMMER50 Redeem Now
The Big Summer Sale! Get 50% Off for everything on today, don't miss it. Coupon code: SUMMER50 Redeem Now