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 );

See also

Last updated: May 3, 2024