→ How to use FacetWP Hooks

Hooks are a very powerful feature in WordPress. They allow for customizations without having to touch the original codebase. To learn more about WP Hooks, see the Treehouse guide.

Usage

Download plugin

  1. Download and active the “Custom Hooks” plugin
  2. Click “Edit” on the Plugins screen (/wp-admin/plugins.php)
  3. Paste relevant code into custom-hooks.php, then hit Update File

PHP

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

CSS

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

Javascript

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() {
?>
{JS}
<?php
}, 100 );

Here’s a finished example:

add_action( 'wp_head', function() {
?>
<script>
(function($) {
    $(document).on('facetwp-loaded', function() {
        $('html, body').animate({ scrollTop: 0 }, 500);
     });
})(jQuery);
</script>
<?php
}, 100 );

functions.php

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

  • If you mess up, your site will likely crash. With the other approach, WordPress will simply disable the plugin if it triggers a PHP fatal error.
  • If you ever decide to switch themes, your custom hooks will not be used.
  • If you upgrade your theme and aren’t using a Child Theme, all edits will be lost.