facetwp_shortcode_html
Overview
This filter lets you modify the placeholder/container HTML for any FacetWP shortcode (facet shortcodes, Listing Builder listing shortcodes and other shortcodes).
Parameters
- $output | string | The output HTML
- $atts | array | The array of shortcode attributes
Usage examples
Add an id and/or custom classes to a Listing Builder listing
This example adds an additional id and/or extra classes to the <div> with class facetwp-template, generated by a Listing Builder listing template. The extra classes could for example be used to set the column layout for different widths in a grid system, like Bootstrap:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_shortcode_html', function( $output, $atts ) { if ( isset( $atts['template'] ) && 'my_template_name' == $atts['template'] ) { // Change "my_template_name" to the name of your listing $output = str_replace( 'class="facetwp-template"', 'id="grid-container" class="facetwp-template col-sm-1 col-md-2 col-lg-3"', $output ); } return $output; }, 10, 2 );
Note that the facetwp-template class needs to remain present for FacetWP to work.
Add a custom attribute to a Listing Builder listing
The following example adds an aria-live=”polite” attribute to the <div> with class facetwp-template, generated by a Listing Builder listing template:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_shortcode_html', function( $output, $atts ) { if ( isset( $atts['template'] ) ) { $output = str_replace( 'class="facetwp-template"', 'class="facetwp-template" aria-live="polite"', $output ); } return $output; }, 10, 2 );
Set a custom listing template class based on a custom attribute
This hook has access to the shortcode’s attributes, with the $atts parameter. This makes it possible to set any custom attribute and use that attribute as a check to do something, or use the value of the attribute itself.
For example, you could add a custom type attribute, in this case with a value of products:
How to use shortcodes?
Shortcodes can be placed directly in post/page edit screens. You can also add them in text/HTML widgets. The WordPress Block Editor has a Shortcode block to place them in. And most Page builders have a dedicated shortcode module/widget. In PHP templates, shortcodes can be displayed with WP's do_shortcode() function:
echo do_shortcode('[my-shortcode]');. More info[facetwp template="my_listing_name" type="products"]
Then, within the hook, check if this attribute is set, and add the attribute’s value (products) as a custom class:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_shortcode_html', function( $output, $atts ) { if ( isset( $atts['template'] ) && 'my_template_name' == $atts['template'] ) { // Change "my_template_name" to the name of your listing if ( isset($atts['type']) ) { $extraclass = $atts['type']; $output = str_replace( 'class="facetwp-template"', 'class="facetwp-template ' . $extraclass . '"', $output ); } } return $output; }, 10, 2 );
Note that (custom) shortcode attributes, like in above example, can also be accessed with FWP()->display->shortcode_atts, which for example can be used within a facetwp_query_args hook, to make changes to the listing query based on a custom shortcode attribute.
Hide a template on page load
The following example adds an is_hidden class to the Listing Builder listing template <div>. This class will hide the listing on the initial page load. This can be useful in combination with a logic rule in the Conditional Logic add-on that hides the template on page load (with JavaScript). This snippet prevents a flash of content in this situation:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
Set a custom facet class
The following example adds a custom my-class class to a facet named my_facet_name:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_shortcode_html', function( $output, $atts ) { if ( isset( $atts['facet'] ) && 'my_facet_name' == $atts['facet'] ) { // Change "my_facet_name" to the name of your facet $output = str_replace( 'facetwp-facet-my_facet_name', 'facetwp-facet-my_facet_name my-class', $output ); // Change "my_facet_name" to the name of your facet and "my-class" to the name of your custom class. } return $output; }, 10, 2 );
Make sure to keep the existing class of the facet (that contains its name, after facetwp-facet-).
Add a custom attribute to a facet
The following example can be used to add a role="status" attribute to the HTML of a “Result counts” type Pager facet. This can be useful to provide an automatically updated status message to the page, to improve accessibility.
Make sure to change my_pager_facet_name to the name of your Pager facet:
How to use custom PHP code?
PHP code can be added to your (child) theme's functions.php file. Alternatively, you can use the Custom Hooks add-on, or a code snippets plugin. More info
add_filter( 'facetwp_shortcode_html', function( $output, $atts ) { if ( isset( $atts['facet'] ) && 'my_pager_facet_name' == $atts['facet'] ) { // Change "my_pager_facet_name" to the name of your Pager facet $output = str_replace( 'data-name', 'role="status" data-name', $output ); } return $output; }, 10, 2 );