Description
This filter allows you to add CSS classes to the outer #wpsl-wrap div of the store locator, or remove them. This div holds the whole store locator: the search form, the map and the search results.
It works with every template: Default, Horizontal and Vertical, the templates you add with wpsl_templates, and custom templates written for WP Store Locator 2 that run in legacy mode. If a custom template writes its own <div id="wpsl-wrap" class="...">, its own classes are kept and the classes from this filter are added to them.
You can use it to scope your CSS to one store locator page, or to give a copy of the Horizontal or Vertical template the styles of the original.
To add a class to the search form instead, use wpsl_template_css_classes. That filter only works with the Default and Horizontal templates.
Parameters
$classes - (array) The CSS classes for the outer div. Which classes it holds depends on the template and your settings:
| Class | When it's added |
|---|---|
wpsl-{id}-template | Always. {id} is the ID of the template that's used: wpsl-default-template, wpsl-horizontal-template or wpsl-vertical-template. For a custom template it's the id you registered, for example wpsl-my-custom-template-template. The template is the one from the template shortcode attribute, or else the one selected on Store Locator > Appearance. |
wpsl-flex and wpsl-has-panel | The Vertical template, and custom templates registered with 'has_panel' => true. |
wpsl-has-credits | The same templates, when "Show credits?" is enabled on Store Locator > Settings > Map. |
wpsl-static-hours | "Show the current open / closed status?" on Store Locator > Settings > User Experience is off. |
wpsl-gdpr-checkpoint | "GDPR consent handled by" on Store Locator > Settings > GDPR is set to WP Store Locator, or to Complianz while the Complianz plugin is active. |
wpsl-credits-gated | A GDPR option is active and "Show credits?" is enabled. The class is removed again when the map has loaded. |
wpsl-mapbox-autocomplete | Mapbox is the map provider and "Enable autocomplete?" on Store Locator > Settings > Search is enabled. |
wpsl-stadia-autocomplete | Stadia Maps is the map provider and "Enable autocomplete?" is enabled. |
wpsl-search-input-only | "Hide the map until the first search is made?" on Store Locator > Settings > Search is enabled. |
wpsl-has-icons | "Use icons?" on the Search Results tab of Store Locator > Appearance is enabled. |
wpsl-styled-cta | "Style action links as buttons?" on the Button Styles tab of Store Locator > Appearance is enabled. |
wpsl-cta-details | "More details link" on the Search Results tab of Store Locator > Appearance is enabled. |
wpsl-names | "Search method" on Store Locator > Settings > Search is set to "Name search (post / location name)". |
Usage
The code below adds a ‘wpsl-custom-css’ class to the outer div on the page with the ‘your-page-slug’ permalink.
| add_filter( 'wpsl_template_outer_classes', 'custom_template_outer_classes' ); | |
| function custom_template_outer_classes( $classes ) { | |
| // Only add the class on the page with the 'your-page-slug' permalink. | |
| if ( is_page( 'your-page-slug' ) ) { | |
| $classes[] = 'wpsl-custom-css'; | |
| } | |
| return $classes; | |
| } |
You can then scope your CSS to that page with #wpsl-wrap.wpsl-custom-css.
The styles for the Horizontal and Vertical templates only apply to the .wpsl-horizontal-template and .wpsl-vertical-template classes. A copy of one of these templates gets its own wpsl-{id}-template class instead. This example adds the original class back for a template registered with the id my-custom-template:
| add_filter( 'wpsl_template_outer_classes', 'my_wpsl_template_classes' ); | |
| function my_wpsl_template_classes( $classes ) { | |
| if ( in_array( 'wpsl-my-custom-template-template', $classes, true ) ) { | |
| $classes[] = 'wpsl-vertical-template'; // or wpsl-horizontal-template | |
| } | |
| return $classes; | |
| } |
Replace wpsl-my-custom-template-template with the class of your own template. How to add a custom template is explained in Load a Custom Store Locator Template.
Changelog
| Version | Description |
|---|---|
| 3.0 | Introduced. |
Source File
This filter is located in /includes/frontend/assets/class-manager.php.
Placement
The code needs to be placed in the functions.php file inside your active theme folder.