Hide the listing template on the initial page load

To hide the listing template on the initial page load until a facet is used, add the following two snippets to your (child) theme’s functions.php, or into the Custom Hooks plugin.

The following CSS hides the listing until the class visible has been set:

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_head', function() {
  ?>
  <style>
    .facetwp-template { 
      display: none;
    }
    .facetwp-template.visible { 
      display: block; 
    }
  </style>
  <?php
}, 100 );

The following JavaScript adds the class visible to the listing after refresh (after the page has finished loading), but not on the initial page load:

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( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-loaded', function() {    
      // Add class 'visible' after refresh, but not on the first page load
      if ( FWP.loaded ) {
        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( 'facetwp_scripts', 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 );

Hide the listing until all facets have a selection

The following snippet hides the listing template until all facets on the page have a selection.

Be aware that this only works if all facets always have remaining choices when other facets are used. In other words, this snippet will not work if any of the facets can become empty.

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( 'facetwp_scripts', function() {
  ?>
  <script>
    document.addEventListener('facetwp-loaded', function() {

      // Check if all facets on the page have a value
      var allFacetsHaveValues = Object.values(FWP.facets).every(function(val) {
        if (Array.isArray(val)) {
          return val.length > 0; // Array must have items
        }
        return val !== '' && val !== null && val !== undefined; // String/other must not be empty
      });

      var tpl = fUtil('.facetwp-template');

      if (allFacetsHaveValues) {
        tpl.removeClass('facetwp-hidden');
      }
      else {
        tpl.addClass('facetwp-hidden');
      }

    });
  </script>
  <?php
}, 100 );

An alternative approach could be to disable auto-refresh and add an “Apply” button to let the user refresh at any time after using facets.

See also

Last updated: December 11, 2025