X Features Cars Demo Power Plants Demo State Parks Demo Site Showcase Docs Tutorials Add-ons Buy

How to use FacetWP Hooks

Hooks allow us to customize functionality without touching the original codebase. This prevents any code changes from getting lost whenever a plugin and/or theme gets updated.


  1. Download the Custom Hooks plugin
  2. In your site dashboard, browse to Plugins > Plugin Editor
  3. Select “Custom Hooks” from the plugin dropdown (above the code editor)
  4. Paste relevant code into custom-hooks.php, then hit Update


Most code in our documentation is PHP. Simply paste it into the Custom Hooks plugin.


CSS code looks like the following, and goes into your (child) theme’s style.css:

.facetwp-counter {
    font-size: 14px;
    font-style: italic;
    color: #888;


If the code starts with <script>, then it’s javascript code. Paste the following code into the Custom Hooks plugin, then replace {JS} with the actual javascript:

add_action( 'wp_head', function() {
}, 100 );

Here’s a finished example:

add_action( 'wp_head', function() {
(function($) {
    $(document).on('facetwp-loaded', function() {
        $('html, body').animate({ scrollTop: 0 }, 500);
}, 100 );


Hooks could also go into your theme’s functions.php, but we don’t recommend it: