Show Field in Bullets or List points

Since version 4.8.25 (published on 2 Feb 2023), users can display their comma-separated fields data in a list format by the newly provided list tag, for example, you have data in your description field something like below.

Apples are green,Mangoes are yellow,Grapes are purple

To show the above field data in the list format, we can add such a tag through the Template Customizer.

<div class="sl-row sl-desc">
 <div class="pol-12">{{list description}}{{/list}}</div>
</div>

Adding the above code will render the description in a list format based on ul and li tags of the HTML.

How to add more custom tags? #

Our store locator plugin uses the JSRender which is a very handy and powerful templating engine. Through JSREnder many functionalities can be achieved by creating new custom script template tags.

In this guide article, we will show how you can make use of a custom script. For the demo, we are considering a comma-separated field which we will modify into UL LI tags by using commas as the separator. Furthermore, each item will list in a new HTML LI element.

We are considering that we have a custom field named “food”. Moreover, this field has multiple items comma-separated which we will render into the list, such as this.

[{"id":"1","title":"Amanda Food Court","description":"not available","street":"45 North Street","city":"Uitenhage","state":"Eastern Cape","postal_code":"5043","country":"South Africa","lat":"-33.749771","lng":"25.405823","phone":"041 111 3964","fax":"","email":"support@agilelogix.com","website":"https:\/\/google.com","logo_id":"1","path":"default.png","marker_id":"1","description_2":"","open_hours":"{\"mon\":\"1\",\"tue\":\"1\",\"wed\":\"1\",\"thu\":\"1\",\"fri\":\"1\",\"sat\":\"1\",\"sun\":\"1\"}","ordr":"0","brand":"","product":"","slug":"amanda-food-court-uitenhage","categories":null,"days_str":"Mon, Tues, Wed, Thur, Fri, Sat, Sun","foods":"Cakes, Beverages, BBQ, Steak"}]

First of all, we have to register a new js file, which we will name sl-tmpl-script.js. Furthermore, this file will be placed under the theme js directory with the script content as follows.

//  Validate if the jquery views are initialized to be used?
if(window['asl_jQuery'] && asl_jQuery.views) {
  
  //  list Template
  asl_jQuery.views.tags("list", function(_field) {
    
    var list_html  = '';
    
    if(_field) {

      var list_items = _field.split(',');

      if(list_items.length) {
        
        list_html  = list_items.forEach(function(item){
          return '<li>' + item + '</li>';
        });
        list_html  = '<ul class="sl-list-props">' + list_html.join('') + '</ul>';
      }
    }
    return list_html;
  });
}

Once we have saved the js file, under the theme js directory, now we need to add these lines to our theme functions.php file. These lines can be placed anywhere but it is preferred to be at the top of the file.

/**
 * [asl_tmpl_update description]
 * @return [type] [description]
 */
function asl_tmpl_update() {
    
  wp_enqueue_script( 'asl-template-update', get_template_directory_uri() . '/js/sl-tmpl-script.js', array('agile-store-locator-lib'), '1.0.0'  );
}

add_action( 'wp_enqueue_scripts', 'asl_tmpl_update' );

As of now, our customization is complete. Therefore, we can simply use this newly created custom tag named like the list in our template file, as in the code below.

Once we have saved the template file, the custom field should appear in the list format, as in the screenshot below.