How To Create Custom Hook In Wordpress

Nov 04, 2021

Andrew V.

5min Read

What Are WordPress Hooks? – Beginner's Guide

WordPress hook is a feature that allows you to manipulate a procedure without modifying the file on WordPress core. A hook can be applied both to action (action hook) and filter (filter hook).

Learning about hooks is essential for any WP user. It can help you to create some functions or edit the default settings of themes or plugins.

Purpose of Hooks

The primary purpose of hooks is to automatically run a function. In addition, this technique also has the ability to modify, extend, or limit the functionality of a theme or plugin.

Here is an example of a hook in WordPress:

function mytheme_enqueue_script()  {wp_enqueue_script( 'my-custom-js', 'custom.js', false );} add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_script' );

The example above shows that the hook is created to connect the mytheme_enqueue_script function with the wp_enqueue_scripts action. This hook triggers a new action on your site, therefore, it is called an action hook.

Hooks are often used in making plugin components of an application. It is not only used in content management systems (CMS) like WordPress but is also commonly used in e-commerce and intranet sites within an enterprise.

Furthermore, as we mentioned above, hooks are divided into two categories: action and filter. Action hook is used to add a process, while filter hook functions to change or modify the value of a process.

How to Use WordPress Hooks?

Using hooks in WordPress does require a bit of knowledge about HTML and PHP. However, even if you are a complete beginner, creating both action and filter hooks might not be as difficult as you think.

You only need to go to your post page, then switch to the text editor. When you are there, you can paste the hooks that you have copied from other sites or created yourself.

Creating an Action Hook

To add an action hook, you must activate the add_action () function in the WordPress plugin. This function can be activated by writing the patterns below in your functions.php file :

add_action('function name of target_hook', 'The_name_of_function_you_want_to_use' ,'priority_scale')

As we see above, hooks use priority scale to function properly. This scale is an automatic ordinal value based on a scale from 1 to 999. It defines the order precedence for functions associated with that particular hook.

A lower value of priority means that the function will be run earlier, while the higher one will be run later. The scale will show the output sequence of the functions installed when using the same target_hooks.

The default value of priority_scale is 10. You can arrange the scale according to the number of your target_hooks.

Here is an example of an action hook:

<?php add_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts' ); function webhost_custom_footer_scripts(){ ?> <script>//fill the footer scripts right here</script> <?php } ?>

Note the pattern in the example above:

<?php is the place where you put the hook to function
add_action is the command for creating the action hook
wp_print_footer_scripts is the target_hook that you link to a new function
Hostinger_custom_footer_scripts is the function installed and linked to the target_hook
<script> represents the text you want to show on the target_hook (in this case, it is the wp_print_footer_scripts)

Creating a Filter Hook

You can create a filter hook by utilizing apply_filters() function. The hook filter is used to modify, filter, or replace a value with a new one.

Just like using an action hook, it also has a function that filters a value with the associated filter hook functions (apply_filter).

What is more, it has the function to add a hook filter to be associated with another function (add_filter).

Here is an example of a filter hook:

$score = 100; echo "Current score is : ". apply_filters( 'change_score', $score );

$score = 100 is the initial score value
echo "Current score is: " represents the script that you're showing
apply_filters is the command to create a filter hook
'change_score', $score is the function to be filtered

This is the filter:

add_filter( 'change_score', 'function_change_score' ); function function_change_score( $score ){ ? $score+=100; ? return $score; }

Add_filter is created to connect the filter hook with a new function
'Change_score' is the target hook that will be modified
'Function_change_score' is a new function that will affect the initial value
? $score+=100; is the code to add more value to the initial value ($score)
? return $score; is the code to show the new value at the end

The result should look like this:

Current score: 200

Unhooking Actions and Filters

If you want to disable the command from add_action() or add_filter() in your WordPress code, you can use remove_action() and remove_filter().

These codes are basically a way to exclude certain actions or filter functions. It allows you to modify a plugin that has too many unnecessary hooks which might disrupt your site's optimization.

Right now, you might ask this; "why not just delete these unnecessary codes?"

Well, it certainly is a viable option if you use your own codes.

However, in WordPress, you often work with someone else's plugins or themes. It means that you risk making a fatal error if you delete the incorrect lines.

Here is an example of the remove_action()in WordPress:

remove_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts', 11 ); add_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts_theme', 11 ); function hostinger_custom_footer_scripts_theme() { ?> <script>//example of output by theme</script> <?php }

The example above shows that the remove_action is used to delete default WordPress footer scripts the replace it with Hostinger custom footer scripts theme.

This command is applicable to all kinds of action hooks in WordPress.

Furthermore, here is an example of remove_filter:

remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); }

The example above shows how to deactivate wp_staticize_emoji_for_email which converts emojis to static images.

Then it replaces them with disable_emojis_tinymce which will deactivate the emoji feature in WordPress (emoji is known to slow down the site because it makes an extra HTTP request).

Moreover, you can also use the remove_filtercommand to disable multiple filters in a sequence. Here is an example:

function disable_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_action( 'init', 'disable_emojis' ); }

The code above aims to eliminate emoji function completely in WordPress. It clearly illustrates that there is no limit on how many remove_filter commands you can embed in functions.php.

Practical Examples

As we previously mentioned, there are a lot of hooks that you can use to create a custom WordPress functions. Here are some of them:

admin_post_thumbnail_size

This filter hook displays a thumbnail image of your post in 'Featured Image'. There are three parameters that are connected with the functions: $size, $thumbnail_id, and $post.

The hook should look like this:

$size = apply_filters( 'admin_post_thumbnail_size', $size, $thumbnail_id, $post );

Keep in mind that $size parameter can be changed according to your needs. For instance, if you would like to set the thumbnail size to 240 x 240 pixels, you can write this code:

$size = apply_filters( 'admin_post_thumbnail_size', 240, $thumbnail_id, $post);

You can also set a custom size for your thumbnail by adding array () function. The code will look like this:

$size = apply_filters( 'admin_post_thumbnail_size', array(240, 400), $thumbnail_id, $post);

The array () function above sets your thumbnail to be displayed in 240 x 400 pixels. You should find the best size that fits your page perfectly.

after_password_reset

This action hook is activated when a user resets their password. The hook consists of two parameters; $user and $new_pass.

The hook should look like this:

do_action( 'after_password_reset', $user, $new_pass );

customize_loaded_components

This hook acts as a filter to exclude some WordPress components from its core process. Those are the functions that work on core files, such as wp-activate.php, wp-config-sample.php, or wp-settings.php. While the component is a collection of features on WordPress that represents one particular function in the widget.

However, it is important to note that customize_loaded_components cannot be added in a theme since it is only activated during 'plugins loaded' phase.

The hook consists of two parameters: $components and $this. It should be written like this:

$components = apply_filters( 'customize_loaded_components', array( 'widgets', 'nav_menus' ), $this );

The $components parameter is a batch of core functions to load, while $this refers to the object in the existing class.

You can customize array () function to determine which components to exclude. The example above shows that widgets and nav_menus are the components excluded from the core process.

Conclusion

To summarize it all, hooks are the features to change the default configuration of your WordPress site. It allows you to add custom functions or disable processes without changing the core file.

Hooks can be divided into two categories: action and filter.

Although the methods of using these two are almost the same, both have completely different functions.

The action hook is used to create new functions, while the filter hook is used to modify the existing code in the function.php file.

Furthermore, there are tons of hooks that you can embed in WordPress. Try to experiment using various types of hooks to manipulate the functions as you wish.

When you become proficient, you can even create your own plugins with this feature. Good luck!

Andrew is a passionate WordPress developer. He loves picking apart source code and learning new things. When he's not working, Andrew likes to hike and play video games.