Introducing Custom Fields
Ever wanted to show additional attributes on an article, user, or contact to your visitors? Through Custom Fields, you have many consistent ways 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 carrying this amazing feature forward, they have been re-introduced in an improved form, so users now 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 the Custom Fields feature, so you can easily create extra content for your articles with our templates.
In articles, Custom Fields appear in a separate tab and you can customize them there to show the attributes in your articles. 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 save you a lot of time by offering ready-made attributes or information at your 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.
Access the Articles: Fields page from the Home Dashboard
Click the New button at the top left.
Add a new custom field
Fill in the required information. Pay attention to the asterisk (mandatory).
Enter 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 field types in Joomla 4, such as Calendar, Lists, Checkboxes, SQL, URL, etc., which allow you to get more creative. And while the core Joomla settings limit custom fields to three components (Articles, User Profiles, and Contact Forms), various custom field plugins and extensions are also available for users to tailor their content. 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 an Existing Article in Joomla 4
Click Articles under the Site area, or under Content from the left-side panel.
Access the Articles page from the Dashboard
Click on a title to edit the existing article. Of course, you can also create a new one.
Edit an existing article
On the article editing page, click the Fields tab.
Select the created custom field
Fill in your value in the Fields area.
Enter 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:
Check 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:
Access Field Group Manager
To create a group for your custom fields, click the New button.
Add a custom field group
Fill in the required information. You have to provide a title (mandatory).
Enter new field group information
Click Save & Close to create your new custom field group.
New 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:
Fill in new custom field information
As you can see, this time I chose 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.
Choose 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.
New 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 going to show it in the same article I used above. You can add it to the other posts as well.
Go to Content > Articles, open the article you want to use with your custom field. You will see a new custom field added.
Select the new custom field
Fill in your custom field value:
Enter 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.
Check 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!
