fUtil is a small JavaScript helper library that comes built-in with FacetWP.

Its functionality is similar to jQuery, with the difference that fUtil relies entirely on modern, vanilla JavaScript. fUtil is less than 2KB minified, very small compared to jQuery + Migrate which adds up to ~35KB.

fUtil can be used as a lightweight substitute on websites that don’t need or load jQuery. FacetWP itself does not need jQuery to function (since v3.8), and you can disable loading it in FacetWP’s settings if your theme or other plugins don’t need it.

fUtil methods

How to use custom JavaScript code?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info
* fUtil library
* 
* Unless stated, methods return the fUtil instance
*/

// document.ready handler
$(function() { ... })

// select the document
$()

// get an element
$(selector)

// create a new fUtil instance
$(selector).clone()

// get the number of matching elements (returns int)
$(selector).len()

// add CSS class
$(selector).addClass(val)

// remove CSS class
$(selector).removeClass(val)

// has CSS class
$(selector).hasClass(val)

// toggle CSS class
$(selector).toggleClass(val)

// check for a match (returns bool)
$(selector).is(selector)

// check for a match
$(selector).find(selector)

// get first matching element
$(selector).first()

// get last matching element
$(selector).last()

// get previous matching element
$(selector).prev(selector)

// get next matching element
$(selector).next(selector)

// prepends selected element(s) with a value
$(selector).prepend(val)

// appends selected element(s) with a value
$(selector).append(val)

// get selected element(s) parents
$(selector).parents(selector)

// get selected element(s) closest parents
$(selector).closest(selector)

// remove current element(s)
$(selector).remove()

// adds event listener
$(selector).on('action', callback)

// removes event listener
$(selector).off('action', callback)

// trigger an event
$(selector).trigger('action', callback, extraData)

// set an attribute
$(selector).attr(name, val)

// set data values
$(selector).data(key, val)

// set HTML
$(selector).html(val)

// set text value
$(selector).text(val)

// set input value
$(selector).val(val)

// get all matching DOM nodes (returns array of DOM nodes)
$(selector).nodes

// get first matching DOM node (returns DOM node)
$(selector).nodes[0]

// make an ajax POST
$.post(url, data, settings)

// check if a value or variable exists
$.isset(var)

// loop through an iterable
$.each(items, callback)

Usage examples

Do something on document ready:

How to use custom JavaScript code?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info
(function($) {
  $(function() {
    console.log('document ready');
  });
})(fUtil);

Remove the is-loading class from all “facet-wrap” elements:

How to use custom JavaScript code?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info
$('.facet-wrap').removeClass('is-loading');

Prepend “Name: ” to all elements with class “the-name”:

How to use custom JavaScript code?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info
$('.the-name').prepend('Name: ');

Loop through text inputs (class my-input) and, if empty, remove the closest .item parent:

How to use custom JavaScript code?
JavaScript code can be placed in your (child) theme's main JavaScript file. Alternatively, you can add it manually between <script> tags in the <head> section of your (child) theme's header.php file. You can also load it with a hook in your (child) theme's functions.php file, or in the Custom Hooks add-on. To load the code only on pages with facets, use the facetwp_scripts hook. To load it on all pages, use wp_head or wp_footer. Or you can use a code snippets plugin. More info
$('.my-input').each(function() {
  if ('' == $(this).val()) {
    $(this).closest('.item').remove(); // adios!
  }
});

Other custom JS libraries included with FacetWP

Besides fUtil, FacetWP includes the following other custom lightweight helper libraries that you can use for your custom code:

  • fSelect – used in fSelect facets.
  • fDate – our date-picker library, used in the Date Range facet.
  • fTip – our tooltip library to replace jquery-powertip.
  • fComplete – our autocomplete library to replacejquery-autocomplete. It is used in the Autocomplete facet.
  • nummy – our number formatting library.

More examples

See also