YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar gerard.verheij asked

Joomla 3.7 Custom Fields in Grid Widget


In my website (Joomla 3.7.x, template Yoo_Joy) for a volleybalclub I display the players in a volleybal-team with YooTheme's widgetkit in a Grid widget. Each player has specific info, such as playernumber and position in the field, height, and age. Since Joomla 3.7 this info is now going to be stored in Joomla's Custom Fields. This is what I "developed", I'm not a experienced PHP-programmer:

1. First, add Joomla Custom Fields to your Joomla-articles
Add the Custom Fields in the Article manager (first a group, then the fields itself). This is new Joomla-functionality, there is a lot of good documentation about Custom Fields.
Very important (and not very beautifully programmed, who can improve that?), remember the field-id's (here, field "position" has ID 2):Image

2. Create a new WidgetKit Content Provider, based on Joomla Content Provider: "Joomla-Fields",
as documented here.
Copy the directory /administrator/components/com_widgetkit/plugins/content/joomla to /templates/yoo_joy/widgetkit/content and rename it the directory to "joomla-fields". Then, in that new direcory, make the required changes in plugin.php:

-- Change the value's of name, label and so on, to create the content-provider. (see documentation). And test it at the backend of your site (if you can save the widget with the new content-provider, and without errors, it works) -- All data to be displayed in the grid-widget is transfered from the content-provider to the widget using an array $data(). So somehow, we have to add the custom-field-values of all selected articles to that array, we add them at line 56 of plugin.php, with the FieldsHelper::getField():

            $data = array(  
                'title'   => $item->title,  
                'media'   => $images ? ($content['image'] == 'intro' ? $images->image_intro : $images->image_fulltext) : '',  
                'media2'   => $images ? ($content['image'] == 'full' ? $images->image_intro : $images->image_fulltext) : '',  
                'content' => $app['filter']->apply($content['content'] == 'intro' ? $item->introtext : $item->introtext . $item->fulltext, 'content'),  
                'link'    => html_entity_decode($app['joomla.article']->getUrl($item)),  
                'tags'    => array(),  
                'author'  => $content['author'] ? $item->author : '',  

                'categories' => $content['categories'] ? array($item->category_title => \JRoute::_(\ContentHelperRoute::getCategoryRoute($item->catid))) : '',  
                'fields' => FieldsHelper::getFields('com_content.article', $item, true)  

3. Add a new WidgetKit Grid-widget
as documented here.
Copy the directory /administrator/components/com_widgetkit/plugins/widgets/grid to /templates/yoo_joy/widgetkit/widgets/ and rename the directory to your new name for the grid, I choosed "players" as the grid is going yo be used to display volleybal-players.

-- Change the value's of name, label and so on, to create the content-provider. (see documentation). And test it at the backend of your site (if you can save the widget with the new content-provider, and without errors, it works)

4. Display the Joomla Custom Fields in the Grid-widget
In the newly created grid widget (I called my Grid-widget: "hlb-spelers") and retrieve the Custom Fields from the array $data() and display them.

Change the widget.php to your needs (located here: /templates/yoo_joy/widgetkit/widgets/hlb-spelers/views/widget.php), starting at line 474:

            <?php if ($meta) : ?>  
            <p class="{wk}-article-meta"><?php echo $meta; ?></p>  
            <?php endif; ?>  

            <?php if ($item['media'] && $settings['media'] && $settings['media_align'] == 'bottom') : ?>  
            <div class="{wk}-margin {wk}-text-center"><?php echo $media; ?></div>  
            <?php endif; ?>  

            Gerard Verheij, Applicura, 25jun17, for volleybalclub HLB Van Daal/DS, Den Dungen, Noord Brabant, The Netherlands.   
            Added Joomla Custom Fields to the Content of an item of the Grid Widget, with some (conditional) formatting  
            The Values of the Custom Field are loaded in the array $data from the plugin.php in the  
            -also customised- WidgetKit Content Provider 'Joomla-Field'  
            $item['fields'][0]->value is Field 1: "Number"   
            $item['fields'][1]->value is Field 2: "Positie"   
            $item['fields'][2]->value is Field 3: "Geboortedatum" (Date of Birth)  
            $item['fields'][3]->value is Field 4: "lengte"   
            $item['fields'][4]->value is Field 5: "anderteam"   
            $item['fields'][4]->value is Field 6: "team" (relative url to the other team-page)   

            <!-- It would be better, when you can retrieve the field-value by name of the field, and not the ID...  
            foreach($item->fields as $field) {  
                $item->jcfield_name_id_map[$field->name] = $field->id;  

            $jcfield_name_id_map = $item->jcfield_name_id_map;  

            echo $item->fields[$item->jcfield_name_id_map['Positie']]->value;  

            <!-- Calculate age from date of birth -->   
            $dob = new DateTime($item['fields'][2]->value);  
            $age = date_diff($dob, date_create('now')) ;  

            // When "Plays in another team is <Yes> then add a Star to the Number  
            if ($item['fields'][4]->value == 'Ja') {  
                $star='&nbsp;<a href="'.$item['fields'][5]->value.'" class="uk-icon-star"></a>';  
            else {  

            <!-- Below is the modified content with Joomla Custom Fields. -->  
            <?php if ($item['fields'][2]->value && $settings['content']) : ?>  
            <div class="{wk}-margin"><?php echo '<h3>'.$item['fields'][0]->value,$star.'</h3>' ; ?></div>  
            <div class="{wk}-margin"><?php echo $item['fields'][1]->value ; ?></div>  
            <div class="{wk}-margin"><?php echo $age->format('%y jaar'); ?><br/><?php echo $item['fields'][3]->value.' cm' ; ?></div>  
            <?php endif; ?>  

            <!-- Below is the original content from the Grid Widget. -->  
            <?php if ($item['content'] && !$item['fields'][2]->value && $settings['content']) : ?>  
            <div class="{wk}-margin"><?php echo $item['content']; ?></div>  
            <?php endif; ?>  

            <!-- End of changes, GVE-25jun17 -->  

            <?php if ($socials && ($settings['media_overlay'] != 'social-buttons')) : ?>  
            <div class="{wk}-grid {wk}-grid-small {wk}-flex-<?php echo $settings['text_align']; ?>" data-{wk}-grid-margin><?php echo $socials; ?></div>  
            <?php endif; ?>  

            <?php if ($item['link'] && $settings['link']) : ?>  
            <p><a<?php if($link_style) echo ' class="' . $link_style . '"'; ?> href="<?php echo $item->escape('link'); ?>"<?php echo $link_target; ?>><?php echo $app['translator']->trans($settings['link_text']); ?></a></p>  
            <?php endif; ?>

As you can see, I do some specific conditional formatting for my purpose, I calculate the age, from the date of birth, and add a star based on a custom-field-value. And also I check the data of birth-field, when it is empty, the info of this player is not yet migrated to the new Custom Fields and I display the old content of the article. Suit this to your needs.

The value of the custom fields is retrieved from the array data() with: $item['fields'][0]->value

So the ID of the field must be between the brackets [0] and it must correspond with the field-id's when you created the fields in Joomla article manager.

This is just a start, it works for my purpose. Now, when the new season has started and when most of the player-info is migrated to custom fields, we are going to improve the formatting of the players. Have a look here: http://www.hlbvandaal-ds.nl/teams/senioren/dames3

When you are a better PHP-programmer than I am, I look forward to your improvements of this code...

Thanks, have fun with Joomla Custom Fields and WidgetKit,


  • Widgetkit
  • Tutorial


1 Answer


Avatar quartus answered

Hi Gerard

Thanks for this awesome tutorial! Exactly what I'm looking for.

I could set up the content provider and the widget (at least I guess, I did it right, because there are no errors in the backend), but I don't achieve to display any content from my joomla custom fields.

Either I didn't "import" my custom fields correctly (is there a way to debug this step?) or I don't understand, how to display them in the widget.php.

Did I get this right, in the plugin.php, I only need to add

'fields' => FieldsHelper::getFields('com_content.article', $item, true) 

And then they should be "readable" from the widget.php?

I tried to adapt your example with my own fields (see below

            $item['fields'][0]->value is Field 1: "Funktion"     
            $item['fields'][1]->value is Field 2: "Telefon"     
            $item['fields'][2]->value is Field 3: "E-Mail"    
            $item['fields'][3]->value is Field 4: "Adresse"     

and then tried to address them with this code (one example "Funktion"):

            foreach($item->fields as $field) {    
                $item->jcfield_name_id_map[$field->name] = $field->id;    

            $jcfield_name_id_map = $item->jcfield_name_id_map;    

            echo $item->fields[$item->jcfield_name_id_map['Funktion']]->value;    

then I wanted to echo them with

<?php if ($item['Funktion'] && !$item['fields'][2]->value && $settings['content']) : ?>    
            <div class="{wk}-margin"><?php echo $item['Funktion']; ?></div>    
            <?php endif; ?>  

I get an error in my frontend

Warning: Invalid argument supplied for foreach() in ../j3x/site/templates/yoo_capture/widgetkit/widgets/grid-esv-team/views/widget.php on line 506  

So I think, I either didn't import the fields correctly or did not understand, how to address them correctly.

Do you have a hint for me?

thank you


Know someone who can answer? Share a link to this question via email or twitter.