Overview

Override the (placeholder) HTML for any FacetWP shortcode.

Parameters

  • $output | string | The output HTML
  • $atts | array | The array of shortcode attributes

Usage examples

Set a custom listing template id and/or classes

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.

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

More examples

See also