How to hide the listing until facets are selected
Hide the listing 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 add it with awp_head
hook in your (child) theme's functions.php file or in the Custom Hooks add-on. 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 );