Hooks and Filters are a way to ‘interject’ in the processing of a WordPress Core or Plugin functionality in order for you to be able to customize said functionality.
Table of Contest:
- What are hooks and filters in WordPress?
- Why do we need hooks and filters?
- How to use hooks and filters
What are hooks and filters in WordPress?
A hook or filter are WordPress native functions that allow you to add your own functionality into the flow of WordPress’s own functionality as well as functionality provided by plugins and themes. WordPress is great out of the box but it inevitably needs some customizing.
Why do we need hooks and filters?
Much of the code we use in a WordPress site is not written by us and instead is written for the masses in the form of plugin and theme code and the WordPress software itself. As such it needs to be updated at various times as the developers who do write the above code.
It’s the update process which is difficult to do though if we need to customize the code they have given us while still giving them the ability to update it as they need (mostly security or functionality updates).
A hook or filter allows a balance between a WordPress user being able to add custom functionality and plugin developers being able to update their code.
From a technical point of view a plugin, theme or WordPress developer will write into their own code base a ‘hook’ or ‘filter’ function with a view to allowing us to customize various aspects of the code. A WordPress user can then utilize these to add whatever they like by custom coding whatever functionality they like within hook and filter functions.
How to use hooks and filters
The first step is understanding which hook or filter is appropriate for what you want to do. You can search all the hooks and filters from WordPress Core or consult the developer docs for the plugin or theme. Often times you also need to google ‘which hook to use when xyz’ if you are low on time.
Once you have found the correct hook or filter you will then need to add the hook or filter code as well as your alterations to your WordPress site. Usually this means editing your functions.php via a child theme.
Example:
Let’s say we want to add some custom Javascript or CSS to our WordPress site. In this case WordPress has a particular way to do this via the hook ‘wp_enqueue_scripts’.
Now we know this we can add the below code to our functions.php.
TIP: You can adda a functions.php to a block or a classic theme so ether way its the same process.
function bddScripts(){
wp_enqueue_script( 'hostPlanSelector', plugins_url( 'scripts/custom.js', __FILE__ ), array( 'custom' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'bddScripts', 10 );To explain what is happening here,
- The last line is our hook function. A hook function says ‘when WP is getting all the scripts for the page’ run the ‘bddScripts’ function.
- Inside of ‘bddScripts’ function you can then tell WordPress to add a Javascript file called custom.js.
- You can then create the custom.js file and add whatever Javascript you need to in that file.
TIP: the ’10’ parameter you see in the add_action hook is priority and if you have multiple customizations to this hook you can decrease this value to prioritize it over other functions running on the same hook.
