Overview

This filter lets you modify the (placeholder) HTML for any FacetWP shortcode.

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 can be used in several other hooks. For example 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

add_filter( 'facetwp_shortcode_html', function( $output, $atts ) { if ( isset( $atts['template'] ) && 'my_listing_name' == $atts['template'] ) { // Change "my_template_name" to the name of your listing $output = str_replace( 'class="facetwp-template"', 'class="facetwp-template is-hidden"', $output ); } return $output; }, 10, 2 );

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 );

More examples

See also