How to hide the listing template until facets are selected
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 thefacetwp_scripts
hook. To load it on all pages, usewp_head
orwp_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. It shows/hides the post listing based on whether there are facet query variables in the URL.
Make sure to not include 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 );