How far can you go with Custom Fields

by Marc Dechèvre: https://www.woluweb.be — all presentations: https://slides.woluweb.be

Woluweb

Marc Dechèvre

This presentation was made at

1 History

  • Custom Fields introduced in Joomla 3.7 (on 25 April 2017) txs to Allon Moritz (CH)
  • Probably the best feature of the last 10 years!
  • Very interesting & powerful because
    • it is transversal because it can be used
      • in core for
        • Articles (most common usecase)
        • Categories
        • Users (so you can enrich user profiles)
        • Contacts
      • in any third-party, which has simply to “trigger” the Custom Fields. Example:
        • DPCalendar
        • J2Commerce (ex J2Store)
    • they are simple & tiny plugins
      • so beyond the 16 native Custom Fields
      • there are already plenty of third-party Custom Fields out there
      • it is easy to create yours by duplicating an existing one and tweaking it

Having Custom Fields in core is a competitive advantage of Joomla (see for example the drama around WordPress and WPEngine and its impact for the ACF plugin…)

2 Resources

3 List of available Custom Fields

4 Tips

  • add a Description to the Field Group to give clear instructions to your users field-group-description1 field-group-description2
  • for a Custom Field of type Calendar, you can type “now + 1 year” or “today - 7 days” as Default value default-date1 default-date2
  • Custom Field of Type SQL can be used for very advanced things
    • we could fetch a list of Articles of a given Category (to make links between Articles) to avoid using a third-party extension
    • in the following example there is an Article Custom Field fetching the list of Contacts… and each Contact has itself 3 Custom Fields (txs to Adam Melcher for this example taken from his Coding demo site at #jd25usa)
    select id as value, name as text from #__contact_details where published = '1' order by ordering
    sql1 sql2 sql3 sql4
  • different ways to “filter” past/future Events (typically Articles for Events having of course an Event Date)
    • simply by using Start Featured and End Featured! featured
    • https://alexrevo.pw/product/revo-lockpick-plugin.html was a solution to have “now” and “today” in YOOtheme, but
      • not compatible any more with YTP 4.x
      • no new version by Alex and no equivalent elsewhere
    • but good news for YOOtheme users: hopefully in YTP4.6 which will be released at autumn 2025 there will be a native possibility to filter dynamically on [date] > or < NOW… and that Date can be a Calendar Custom Field of course
    • CCC Timewarp by Elisa (Scheduled Task to move Articles from a Category to another, like Future to Past)
    • with ZOOlanders Essentials => Timestamp : https://docs.zoolanders.com/essentials-for-yootheme-pro/datetime
      • one precision though: if you set a limit of 20 items on which you put a Timestamp condition, it means that in the end one might end up with anything between 0 and 20 items which are really displayed in order to have a “real” filter playing “before” the first 20 items are fetched then YOOtheme needs to add that feature (maybe coming for YTP 4.6 in Autumn 2025)
    • [ using a Custom Field with “now” as Default. Note that this solution also requires ZOOlanders Essentials ]
      • in order to create an Access Condition for each Item, checking if “CF Event Date” > “CF NOW” (both being of course in same format, like Ymd for example)
      • can create a Custom Field of Type Calendar and put “now” as Default
        • drawback is that if some concerned Article is Saved after that, the “now” is no more dynamic but is the Date of Saving
        • workaround: if Articles are only edited in the Backend, in the Options Tab, select “Editable only in Frontend” (or the other way round). Then the Custom Field always reflects “now”
      • can create a Custom Field of Type Text and set Default content as {shortcode} and with a little Content Plugin (published by @SMACKit on 2025.03.16), which replaces the shortcode by “now” in Ymd format. Sources:
  • alternate layout for Custom Field itself
  • in classical overrides (for Article views for example) we can call Custom Fields
    • the classical way (in PHP calling by ID or by Name)
    • or even put simply {field ID} (just like you can put directly this shortcode in Article)
    • for views where Custom Fields are not even available (like the Smart Search), you can add the following code to make them available
use \Joomla\Component\Fields\Administrator\Helper\FieldsHelper; // makes the FieldsHelper available in our override
$myCustomFields = FieldsHelper::getFields('com_content.article', $this->result, true); // creates a variable which will contain all CF of the current article. The True will allow us to render the value instead of the rawvalue
$myCustomFieldsById = \Joomla\Utilities\ArrayHelper::pivot($myCustomFields, 'id'); // we use a pivot on id so that we can easily use the id to access every CF by its ID
<p><?php echo $myCustomFieldsById[10]->rawvalue; ?></p>
  • web services
    • to make your content (including Custom Fields) available thanks to web services web-services
    • to import Custom Fields via web services (see links to the presentations above)
  • front-end editing
  • custom user.css to have icon + background-color color on the Custom Fields Tab when editing tabs
    • back-end
:root {
  --cf: hsl(357 60% calc(var(--lightness) - 10%));
  --cf-hover: hsl(357 60% calc(var(--lightness) - 5%));
  --cf-selected: hsl(357, 60%, var(--lightness));
}
#myTab button[aria-controls*="fields"] {
  background: var(--cf);
  color: white; /* in Dark Mode the color is white by default. But in Light Mode, if the background-color is dark, white is better for text */
}

#myTab button[aria-controls*="fields"]:hover {
  background: var(--cf-hover);
}

#myTab button[aria-controls*="fields"][aria-expanded="true"] {
  background: var(--cf-selected);
}

#myTab button[aria-controls*="fields"]:before {
  content: url(/images/assets/cubes.svg);
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}

@media (prefers-color-scheme: dark) {
  #myTab button[aria-controls*="fields"]:before {
    filter: invert(100%);
  }
}
  • front-end
:root {
  --cf: hsl(357 60% calc(var(--lightness) - 10%));
  --cf-hover: hsl(357 60% calc(var(--lightness) - 5%));
  --cf-selected: hsl(357, 60%, var(--lightness));
}
joomla-tab button[aria-controls*="fields"] {
  color: white;
  background: var(--cf);
}

joomla-tab button[aria-controls*="fields"]:hover {
  color: white;
  background: var(--cf-hover);
}

joomla-tab button[aria-controls*="fields"][aria-expanded="true"] {
  color: white;
  background: var(--cf-selected);
}

joomla-tab button[aria-controls*="fields"]:before {
  content: url(/images/assets/cubes.svg);
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 5px;
  filter: invert(100%);
}
  • in the YOOtheme context using “after display title” or “before display content” for example
    • in order to have the Joomla “rendering” of the Custom Field (and not YOOtheme rendering the raw value of the Custom Field)
    • in order to be able to display several Custom Fields in a single Dynamic Fied (typically Meta) after-display-title1 after-display-title2
  • use of Custom Fields in Acymailing
    • simple usecase like on https://www.festivalmusiq3.be (additional tip: we added some CSS to our newsletter so that the text in bold and in italic in the newsletter would have a different background) acymailing1 acymailing2
    • advanced usecase by Laura Gordon where she needed to combine several Custom Fields in a certain format. There the solution was to simply create a new ad hoc Custom Field which is filled automatically when Saving the Article thanks to a little custom-made plugin (onContentAfterSave)
  • YOOtheme has a core version of the related articles that’s based on tags / categories. ZOOlander Essentials extends it if you have Regular Labs related articles custom field plugin active on your site
  • Tanja from webman.de suggested me this
  • since Joomla 5.2 “inception” is possible. With other words, you can have natively Subforms within Subforms (also: YOOtheme manages it). Good to know: Phoca Collapse System Plugin is a Joomla! CMS Plugin. It adds the ability to hide Joomla subform content. So that subforms can be better sorted. It can be even used for menu links and articles: https://www.phoca.cz/phoca-collapse-system-plugin
  • automation
    • there is currently a group of Joomlers working on the integration of Joomla with Zapier… which will include Custom Fields
    • during his session today about Automation, Eoin Oliver showed that Joomla is already integrated with Make.com… which includes Custom Fields. So you can for example have Make read Airtable and add/update Articles in Joomla using the web services

5 laplateforme.be, a website exploiting Custom Fields to the max

See https://www.laplateforme.be where I exploit Custom Fields to the max. :)

5.1 Context

  • ~1000 Articles with 72 Custom Fields for 8 Field Groups + Filters on 13 Custom Fields
  • but still super performant (see Lighthouse score hereafter)

lighthouse

5.3 Exploiting Joomla’s native features

  • colored Tabs for edition in the back-end and front-end (see screenshot above)
  • alternate layout for
    • video player (based on Custom Fields containing the video ID)
    • for the DIV containing the CF like for Filmography (1 Card for each film… but needed to wrap that with a <div> with some grid classes) alternate-layout

6 Potential improvements for the future

7 Get in touch

Marc Dechèvre

Woluweb

Marc Dechèvre | @woluweb
+32 474 37 13 12 | +32 2 772 58 69
https://www.woluweb.be/contact

Other presentations