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.
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 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.
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 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.
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 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.
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!
- 7+ Best WordPress Crypto Plugins - April 24, 2024
- Taking Inspiration From One of the World’s Leading Eyewear Ecommerce Sites: Eyebuydirect - March 22, 2024
- Navigating Success: The Role of UX/UI Agencies in Business Growth - March 12, 2024
Recent Comments