What Are WordPress Hooks?<\/h2>\n
WordPress hooks allow users to manipulate WordPress without modifying its core. Learning about hooks is essential for any WordPress user as it helps them edit the default settings of themes or plugins and, ultimately, create new functions.<\/p>\n <\/div>\n\n\n\n<\/p>
Purpose of Hooks<\/h3>
The primary purpose of hooks is to automatically run a function. In addition, this technique can add or modify features to WordPress without touching its core files.<\/p>
Hooks are divided into two categories:<\/p>
- \n
- Action <\/strong>– allows users to add data or change how their websites work. An action hook will run at a specific time when the WordPress core, plugins, and themes are executing.<\/li>\n\n\n\n
- Filter<\/strong> – can change data during WordPress core, plugins, and theme execution.<\/li>\n<\/ul>
In short, action hooks<\/strong> receive information, act according to it, and don’t return anything to the user. Conversely, the filter hooks<\/strong> get information, modify it, and return it to the user.<\/p>
Hooks are essential for incorporating custom code into websites. For example, you can use them to add JavaScript to WordPress<\/a>. <\/p>
\n\n\n
Important!<\/strong> To use any of the said hooks, a user needs to write a custom function known as a Callback<\/strong> and register it with a WordPress hook for a specific action or filter.<\/p><\/div>\n\n\n\n<\/p>
Below is an example of an action hook that connects the mytheme_script<\/strong> function with the wp_enqueue_scripts <\/strong>action.<\/p>
function mytheme_script() \n{wp_enqueue_script( 'my-custom-js', 'custom.js', false );}\nadd_action( 'wp_enqueue_scripts', 'mytheme_script' );<\/pre>How to Use WordPress Hooks<\/h2>
Using hooks requires a bit of HTML and PHP knowledge. Luckily, creating action and filter hooks is relatively easy, even for WordPress beginners<\/a>.<\/p>
Creating an Action Hook<\/h3>
To add an action hook, you must activate the add_action ()<\/strong> function in a WordPress plugin. To do so, add the following code to your WordPress functions.php file<\/a>:<\/p>
add_action( $target_hook, $the_name_of_function_you_want_to_use, $priority, $accepted_args );<\/pre>
Hooks use a priority scale to function properly. This scale is an automatic ordinal value based on a scale from 1 to 999. It defines the order of functions associated with that particular hook. A lower priority value means the function will run earlier, while the higher one will run later.<\/p>
The scale will show the output sequence of the functions when using the same target_hook<\/strong>. The default value of priority_scale<\/strong> is 10. You can arrange the scale according to the number of your target_hook<\/strong>.<\/p>
$accepted_args<\/strong> is responsible for defining the number of arguments the function accepts. By default, the system will set it as 1<\/strong>. Here is an example of an action hook for the Twenty Twenty-Three WordPress theme added to the end of the functions.php<\/strong> file:<\/p>
<?php\nfunction hook_javascript() {\n ?>\n <script>\n alert('Hello world...');\n <\/script>\n <?php\n}\nadd_action('wp_head', 'hook_javascript');\n?><\/pre>Note the pattern in the example above:<\/p>
- \n
- <?php<\/strong> – the place where you put the hook to function.<\/li>\n\n\n\n
- function hook_javascript()<\/strong> – a function that will affect the initial value, thus showing the alert for users.<\/li>\n\n\n\n
- <script><\/strong> – represents the text you want to display on the target_hook<\/strong>.<\/li>\n\n\n\n
- alert(‘Hello world…’);<\/strong> – will display an alert for users with the “Hello World” phrase.<\/li>\n\n\n\n
- add_action<\/strong> – the command for creating the action hook.<\/li>\n\n\n\n
- ‘wp_head<\/strong>‘ – the target hook<\/a> that the function will modify.<\/li>\n<\/ul>
In practice, it looks like this:<\/p>
\n![\"Action](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/04\/Action-hook-example-on-a-live-WordPress-website.-It-shows-an-alert-with-a-user-specified-message.jpg\/public\")
<\/a><\/figure><\/div>Creating a Filter Hook<\/h3>
You can create a filter hook by utilizing the add_filter()<\/strong> function. The filter hook modifies, filters, or replaces a value with a new one.<\/p>
Similar to an action hook, it filters a value with the associated filter hook functions like apply_filter<\/strong>.<\/p>
Here is an example of a filter hook that we will add to the functions.php<\/strong> file for the Twenty Twenty-Three WordPress theme:<\/p>
add_filter( 'the_content', 'change_content' );\nfunction change_content ( $content ) {\n $content = 'Filter hooks are amazing!';\n return $content;\n}<\/pre>Let’s analyze the code snippet in more detail:<\/p>
- \n
- ‘the_content<\/strong>‘<\/a> – the target hook that the function will modify.<\/li>\n\n\n\n
- ‘change_content<\/strong>‘ – affects the initial value, thus changing the actual content.<\/li>\n\n\n\n
- $content = ‘Filter hooks are amazing!’; <\/strong>– replaces the content of all your posts with the written phrase.<\/li>\n\n\n\n
- return $content;<\/strong> – returns the new value at the end.<\/li>\n<\/ul>
Now, if we open any post while using the Twenty Twenty-Three theme, we will see something like this:<\/p>
\n![\"Filter](\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2019\/04\/Filter-hook-example-on-a-live-WordPress-website.-It-replaces-content-for-all-posts-with-a-user-specified-phrase.png\/public\")
<\/a><\/figure><\/div>As seen from the example, the filter function replaced the entire content with the phrase “Filter hooks are amazing!”.<\/p>
Unhooking Actions and Filters<\/h3>
If you want to disable a command from add_action()<\/strong> or add_filter()<\/strong> in your WordPress code, use remove_action()<\/strong> and remove_filter()<\/strong>.<\/p>
These functions can exclude certain actions or filters. Using them allows users to modify a plugin with too many unnecessary hooks that might disrupt the site’s optimization.<\/p>
It’s also possible to delete such unnecessary code lines. However, we only recommend that if you work with your own plugin or theme. This is because such practice with someone else’s plugins or themes can throw a fatal error if you delete the incorrect lines.<\/p>
Here is an example of the remove_action()<\/a> in WordPress:<\/p>
remove_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts');\nadd_action( 'wp_print_footer_scripts', 'hostinger_custom_footer_scripts_theme');\nfunction hostinger_custom_footer_scripts_theme()\n{\n?>\n<script>\/\/example of output by theme<\/script>\n<?php\n}<\/pre>The example above shows that the remove_action() <\/strong>deletes the default WordPress footer scripts and replaces them with Hostinger’s custom footer scripts theme.<\/p>
This command applies to all kinds of action hooks in WordPress. Furthermore, here is an example of remove_filter()<\/a>:<\/p>
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );\nadd_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );\n}<\/pre>
The example above shows how to deactivate wp_staticize_emoji_for_email<\/strong>, which converts emojis to static images.<\/p>
Then it replaces them with disable_emojis_tinymce<\/strong>, which will deactivate the emoji feature in WordPress. This can help speed up your site, as emojis have to make an extra HTTP request.<\/p>
Moreover, you can use the remove_filter() <\/strong>command to disable multiple filters in a sequence. Here is an example:<\/p>
function disable_emojis() {\nremove_action( 'wp_head', 'print_emoji_detection_script', 7 );\nremove_action( 'admin_print_scripts', 'print_emoji_detection_script' );\nremove_action( 'wp_print_styles', 'print_emoji_styles' );\nremove_action( 'admin_print_styles', 'print_emoji_styles' );\nremove_filter( 'the_content_feed', 'wp_staticize_emoji' );\nremove_filter( 'comment_text_rss', 'wp_staticize_emoji' );\nremove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );\nadd_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );\nadd_action( 'init', 'disable_emojis' );\n}<\/pre>The code above aims to eliminate the emoji function in WordPress. It illustrates that there is no limit on how many remove_filter<\/strong> commands users can embed in a functions.php <\/strong>file.<\/p>
Practical WordPress Hooks Examples<\/h2>
There are a lot of hooks that users can use to create custom WordPress functions. Here are some of the most popular ones:<\/p>
admin_post_thumbnail_size<\/h3>
This filter hook displays a thumbnail image of your post in the Featured Image section. Three parameters connect the function: $size, $thumbnail_id, <\/strong>and $post<\/strong>.<\/p>
The hook should look like this:<\/p>
$size = apply_filters( 'admin_post_thumbnail_size', $size, $thumbnail_id, $post );<\/pre>
Remember that you can change the $size<\/strong> parameter as you wish. For instance, if you want to set the thumbnail size to 240 x 240 pixels, utilize this code:<\/p>
$size = apply_filters( 'admin_post_thumbnail_size', 240, $thumbnail_id, $post);<\/pre>
It is also possible to set a custom size for the thumbnail by adding the array ()<\/strong> function. The code will look like this:<\/p>
$size = apply_filters( 'admin_post_thumbnail_size', array(240, 400), $thumbnail_id, $post);<\/pre>
The array ()<\/strong> function above sets the thumbnail to be displayed in 240 x 400 pixels.<\/p>
after_password_reset<\/h3>
This action hook is activated when a user resets their password. The hook consists of two parameters, $user<\/strong> and $new_pass<\/strong>, and looks like this:<\/p>
do_action( 'after_password_reset', $user, $new_pass );<\/pre>
For example, WordPress uses this hook with the reset_password()<\/a> function.<\/p>
customize_loaded_components<\/h3>
This hook is a filter to exclude some WordPress components from the core process. These functions work on core files, such as wp-activate.php<\/strong>, wp-config-sample.php<\/strong>, or wp-settings.php<\/strong>.<\/p>
However, it is important to note that customize_loaded_components<\/strong> cannot be added to a theme since it only activates during the plugins_loaded<\/a> phase.<\/p>
The hook consists of two parameters: $components<\/strong> and $this, <\/strong>and looks like this:<\/p>
$components = apply_filters( 'customize_loaded_components', array( 'widgets', 'nav_menus' ), $this );<\/pre>
The $components<\/strong> parameter is a batch of core functions to load, while $this<\/strong> refers to the object in the existing class.<\/p>
It’s possible to customize the array ()<\/strong> function to determine which components to exclude. The example above shows that widgets and nav_menus<\/strong> get excluded from the core process.<\/p>
\n\n\n
\nPro Tip<\/h4>\n
Another way to enhance your website's functionality is to add PHP code to your WordPress page or post<\/a>.<\/p>\n <\/div>\n\n\n\n<\/p>
Conclusion<\/h2>
WordPress hooks can benefit any website owner. They allow you to add custom functions or disable processes without changing the WordPress core files. You can even create advanced customization in a WooCommerce store using hooks<\/a>.<\/p>
In this tutorial, we’ve created action and filter WordPress hooks and shown some practical examples.<\/p>
We hope that you find this tutorial useful. If you have any questions, leave us a comment down below.<\/p>
\n\n\n
\nLearn More WordPress Techniques to Broaden Your Knowledge<\/h4>\n
WordPress Multisite<\/a>
\nWordPress Text Editor<\/a>
\nHeadless WordPress<\/a>
\nWordPress .htaccess File<\/a>
\nWordPress Architecture: Website Structure, Common Files, and Directories<\/a>
\nWordPress REST API Tutorial<\/a>
\nHow to Use XAMPP<\/a><\/p>\n <\/div>\n\n\n\n<\/p>WordPress Hooks FAQ<\/h2>
If you are interested in learning more about WordPress hooks, here are some frequently asked questions.<\/p>
What Are the Basic Hooks for WordPress Plugins?<\/h3>
The basic hooks for WordPress plugin development include action hooks and filter hooks. Action hooks allow developers to execute custom code at specific points in the WordPress core code, while filter hooks allow developers to modify the data before it is displayed on the website.<\/p> <\/div>
Where Do I Add Hooks in WordPress?<\/h3>
Hooks in WordPress can be added in the plugin or theme’s functions.php<\/strong> file, or in a separate plugin file. Action hooks are added using the add_action()<\/strong> function, while filter hooks are added using the add_filter()<\/strong> function.<\/p> <\/div>
Are WordPress Hooks Important?<\/h3>
Yes, WordPress hooks are important as they allow developers to customize and extend the functionality of WordPress core, themes, and plugins without modifying the original code. They provide a structured and organized way to add custom code and modify data, making WordPress development more flexible and scalable.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"
WordPress hooks can help you reach your business goals by expanding your website’s capabilities. Hooks allow you to interact and […]<\/p>\n
- ‘change_content<\/strong>‘ – affects the initial value, thus changing the actual content.<\/li>\n\n\n\n
- function hook_javascript()<\/strong> – a function that will affect the initial value, thus showing the alert for users.<\/li>\n\n\n\n
- Filter<\/strong> – can change data during WordPress core, plugins, and theme execution.<\/li>\n<\/ul>