Hide the listing template on initial page load

To hide the listing template on initial page load until a facet is used, add the following CSS to your (child) theme’s style.css file:

How to use custom CSS?

CSS code can be placed in your (child) theme's style.css file. Alternatively, you can add it manually between <style> tags in the <head> section, in your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info

.facetwp-template { display: none; } .facetwp-template.visible { display: block; }

Then, add the following into your (child) theme’s functions.php, or into the Custom Hooks plugin:

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_action( 'wp_footer', function() { ?> <script> document.addEventListener('facetwp-loaded', function() { fUtil('.facetwp-template').addClass('visible'); }); </script> <?php }, 100 );

Hide the listing when no facets are selected

The above solution only hides the post listing on inital page load. When you de-select all facet choices, or use the Reset facet button/link, the listing will still show.

If you need to always hide the listing when no facet choices are selected, use the following code instead. It shows/hides the post listing based on whether there are facet query variables in the URL.

Make sure to not include the PHP/JavaScript snippet and the CSS of the above solution.

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_action( 'wp_footer', function() { ?> <script> document.addEventListener('facetwp-loaded', function() { var tpl = fUtil('.facetwp-template'); if ('' != FWP.buildQueryString()) { tpl.removeClass('facetwp-hidden'); } else { tpl.addClass('facetwp-hidden'); } }); </script> <?php }, 100 );

See also