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