Description
This filter allows you to modify the HTML of each location in the search results.
The plugin passes the default template to the filter. The example below doesn’t use it, because it builds the whole template itself. To make a small change instead, accept it as a parameter, change it and return it:
| add_filter( 'wpsl_listing_template', 'custom_listing_template_change' ); | |
| function custom_listing_template_change( $listing_template ) { | |
| // Change $listing_template here. | |
| return $listing_template; | |
| } |
If a custom List section is activated under Store Locator > Settings > Fields Manager > Section Editor, the plugin uses that saved code and this filter doesn’t run. Upgrading from v2? See Updating Your Template Filters for WP Store Locator 3.
Usage
In this example the data from a custom field called my_textinput is added below the address. Fields you create in Store Locator > Settings > Fields Manager are included in the template data automatically. For fields you register in code, first add them with the wpsl_frontend_meta_fields filter.
| add_filter( 'wpsl_listing_template', 'custom_listing_template' ); | |
| function custom_listing_template() { | |
| $sections = wpsl_get_service( 'template_sections' ); | |
| $settings = wpsl_get_service( 'wpsl_settings' ); | |
| $icons = $settings->get( 'appearance', 'icons', [] ); | |
| $icons_enabled = ! empty( $icons['enabled'] ); | |
| $cta = $settings->get( 'appearance', 'cta', [] ); | |
| $contact_details = (array) $settings->get( 'ux', 'contact_details', [] ); | |
| $hours = (array) $settings->get( 'ux', 'hours', [] ); | |
| $description = (array) $settings->get( 'ux', 'description', [] ); | |
| $is_name_search = $sections->is_name_search(); | |
| $listing_template = '<li data-store-id="<%= id %>">' . "\r\n"; | |
| $listing_template .= "\t" . '<div class="wpsl-store-location">' . "\r\n"; | |
| // The thumbnail, store name and address. | |
| if ( $icons_enabled ) { | |
| $address_icon = isset( $icons['address'] ) ? $icons['address'] : 'marker'; | |
| $listing_template .= "\t\t" . '<p class="wpsl-icon-address wpsl-icon-address-' . esc_attr( $address_icon ) . '"><%= typeof thumb !== "undefined" ? thumb : "" %>' . "\r\n"; | |
| $listing_template .= "\t\t\t" . '<span class="wpsl-location-content">' . "\r\n"; | |
| } else { | |
| $listing_template .= "\t\t" . '<p><%= typeof thumb !== "undefined" ? thumb : "" %>' . "\r\n"; | |
| } | |
| // Linked or plain store name | |
| $listing_template .= "\t\t\t" . $sections->store_header( 'listing' ) . "\r\n"; | |
| $listing_template .= "\t\t\t" . '<span class="wpsl-street"><%= address %></span>' . "\r\n"; | |
| $listing_template .= "\t\t\t" . '<% if ( address2 ) { %>' . "\r\n"; | |
| $listing_template .= "\t\t\t" . '<span class="wpsl-street"><%= address2 %></span>' . "\r\n"; | |
| $listing_template .= "\t\t\t" . '<% } %>' . "\r\n"; | |
| // Address format from the settings page | |
| $listing_template .= "\t\t\t" . '<span>' . $sections->format_address() . '</span>' . "\r\n"; | |
| if ( ! $settings->get( 'ux', 'hide_country' ) ) { | |
| $listing_template .= "\t\t\t" . '<span class="wpsl-country"><%= country %></span>' . "\r\n"; | |
| } | |
| if ( $icons_enabled ) { | |
| $listing_template .= "\t\t\t" . '</span>' . "\r\n"; | |
| } | |
| $listing_template .= "\t\t" . '</p>' . "\r\n"; | |
| /** | |
| * Include the data from a custom field called 'my_textinput'. | |
| * | |
| * Fields created in Store Locator > Settings > Fields Manager are included | |
| * automatically. For other custom fields, add them to the location data | |
| * with the wpsl_frontend_meta_fields filter. | |
| * | |
| * The typeof check keeps the template working for locations without the field. | |
| */ | |
| $listing_template .= "\t\t" . '<% if ( typeof my_textinput !== "undefined" && my_textinput ) { %>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<p><%= my_textinput %></p>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<% } %>' . "\r\n"; | |
| // The phone, fax and email, if "Below the address in the search results" | |
| // is selected for the contact details. | |
| if ( in_array( 'search_results', $contact_details, true ) ) { | |
| $listing_template .= $sections->contact_details(); | |
| } | |
| // The opening hours, if "Below the address in the search results" | |
| // is selected for the opening hours. | |
| if ( in_array( 'search_results', $hours, true ) ) { | |
| $listing_template .= "\t\t" . '<% if ( typeof hours !== "undefined" && hours ) { %>' . "\r\n"; | |
| if ( $icons_enabled ) { | |
| $listing_template .= "\t\t" . '<div class="wpsl-icon-hours"><%= hours %></div>' . "\r\n"; | |
| } else { | |
| $listing_template .= "\t\t" . '<%= hours %>' . "\r\n"; | |
| } | |
| $listing_template .= "\t\t" . '<% } %>' . "\r\n"; | |
| } | |
| // The "temporarily closed" or "permanently closed" notice. | |
| $status_class = ( $icons_enabled ) ? 'wpsl-location-status wpsl-icon-attention' : 'wpsl-location-status'; | |
| $listing_template .= "\t\t" . '<% if ( typeof location_status !== "undefined" && location_status ) { %>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<p class="' . esc_attr( $status_class ) . '"><%= location_status %></p>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<% } %>' . "\r\n"; | |
| // The post content, if "Below the address in the search results" | |
| // is selected for the post content. | |
| if ( in_array( 'search_results', $description, true ) ) { | |
| $listing_template .= "\t\t" . '<% if ( typeof description !== "undefined" && description ) { %>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<p><%= description %></p>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<% } %>' . "\r\n"; | |
| } | |
| // The "More info" link and content, if any of the | |
| // "Location(s) of ..." settings includes the "more info" section. | |
| if ( in_array( 'more_info', $contact_details, true ) || in_array( 'more_info', $hours, true ) || in_array( 'more_info', $description, true ) ) { | |
| $listing_template .= "\t\t" . $sections->more_info_template() . "\r\n"; | |
| } | |
| $listing_template .= "\t" . '</div>' . "\r\n"; | |
| // The directions link moves to its own section when the | |
| // links are styled as buttons, or the "More details" link is enabled. | |
| $cta_details = ! empty( $cta['details'] ); | |
| $has_cta_section = ! empty( $cta['enabled'] ) || $cta_details; | |
| // A search by store name has no distance or route, so the wrapper is left out. | |
| if ( ! $is_name_search ) { | |
| $listing_template .= "\t" . '<div class="wpsl-direction-wrap">' . "\r\n"; | |
| if ( ! $settings->get( 'ux', 'hide_distance' ) ) { | |
| $distance_class = ( $icons_enabled ) ? 'wpsl-distance wpsl-icon-road' : 'wpsl-distance'; | |
| $listing_template .= "\t\t" . '<% if ( typeof distance !== "undefined" ) { %>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<span class="' . esc_attr( $distance_class ) . '"><%= distance %> <% if ( typeof distance_unit !== "undefined" ) { %><%= distance_unit %><% } else { %>{{wpsl_get_distance_unit()}}<% } %></span>' . "\r\n"; | |
| $listing_template .= "\t\t" . '<% } %>' . "\r\n"; | |
| } | |
| if ( ! $has_cta_section ) { | |
| $listing_template .= "\t\t" . '<%= createDirectionUrl() %>' . "\r\n"; | |
| } | |
| $listing_template .= "\t" . '</div>' . "\r\n"; | |
| } | |
| if ( $has_cta_section && ( $cta_details || ! $is_name_search ) ) { | |
| $listing_template .= $sections->cta_section( $cta_details, ! $is_name_search ); | |
| } | |
| $listing_template .= '</li>'; | |
| return $listing_template; | |
| } |
<% ... %> and <%= ... %> code is used by the Underscore library to execute JS code, and to print the location data when the template is rendered. Always check custom fields with typeof: if a location doesn’t have the field, the template fails and the search results stay empty.wpsl_frontend_meta_fields, clear the cache under Store Locator > Settings > Tools > Autoload cache.To change the order of the phone, fax and email, or add your own fields to them, see Customize the Contact Details.
Change the Search Results Template Based on the Used Page
If you use the store locator on different pages, and you’d like to format the search results differently on some of them, use is_page in your callback.
| add_filter( 'wpsl_listing_template', 'custom_page_listing_template' ); | |
| function custom_page_listing_template( $listing_template ) { | |
| // Change the template on 'your-page' only. | |
| if ( is_page( 'your-page' ) ) { | |
| $listing_template = str_replace( '<li data-store-id="<%= id %>">', '<li class="wpsl-my-page" data-store-id="<%= id %>">', $listing_template ); | |
| } | |
| // All other pages keep the default template. | |
| return $listing_template; | |
| } |
Replace your-page with any of the accepted parameters for is_page. Always return $listing_template at the end; without it, the search results on all other pages stay empty.
Make Different Data Clickable
The code examples below make additional URL, phone or email data clickable in the template.
| $listing_template .= '<% if ( typeof extra_url !== "undefined" && extra_url ) { %>' . "\r\n"; | |
| $listing_template .= '<p><a href="<%= extra_url %>"><%= extra_url %></a></p>' . "\r\n"; | |
| $listing_template .= '<% } %>' . "\r\n"; |
| $listing_template .= '<% if ( typeof extra_phone !== "undefined" && extra_phone ) { %>' . "\r\n"; | |
| $listing_template .= '<p><a href="tel:<%= formatClickablePhoneNumber( extra_phone ) %>"><%= extra_phone %></a></p>' . "\r\n"; | |
| $listing_template .= '<% } %>' . "\r\n"; |
| $listing_template .= '<% if ( typeof extra_email !== "undefined" && extra_email ) { %>' . "\r\n"; | |
| $listing_template .= '<p><a href="mailto:<%= extra_email %>"><%= extra_email %></a></p>' . "\r\n"; | |
| $listing_template .= '<% } %>' . "\r\n"; |
These examples always create a link. To follow the plugin settings instead, use <%= formatPhoneNumber( extra_phone ) %> or <%= formatEmail( extra_email ) %>. formatPhoneNumber() only adds a link when “Make the phone number clickable on mobile devices?” or “Make the contact details always clickable?” is enabled, and formatEmail() only with “Make the contact details always clickable?”. For fields you create in the Fields Manager, choose the URL or Email type, so the value is cleaned up for the link.
Changelog
| Version | Description |
|---|---|
| 3.0 | Moved to includes/core/templates/class-sections.php. The default template now includes the opening hours, the closed notice, the post content, the icon classes and the button section, each following its settings. |
| 2.0 | Introduced. |
Source File
This filter is located in /includes/core/templates/class-sections.php.
Placement
The code needs to be placed in the functions.php file inside your active theme folder.