How to Use WordPress Action Hooks in Theme Customizer / WordPress

WordPress child themes provide a relatively easy way to customize the look and feel of a theme. If the theme’s options don’t give you full design choices, you can add a new rule to the child theme’s default stylesheet file called style.css. But what happens when you want too modify the theme’s functionality? That is one of those cases when WordPress actions come to your aid.

WordPress has gained popularity in part because of its high customizability. WordPress Core is loaded with different hooks that allow developers to modify or enhance the default functionality. Furthermore, we are allowed to include custom hook in our themes and plugins to make it easy for other developers to adapt our code to their needs.

Introduction to WordPress hooks

WordPress hooks work a bit like actual hooks in the sense that you can catch the fish you want in the right spot if you use it correctly.

You can remove a captured function (for example, you can remove the WordPress admin bar for low-level users), you can keep stable and raise it with your own functionality (for example you can add multiple menus or widget areas to a theme) or you can overwrite it (e.g. you can modify the core function’s behavior).

There are two different types of hooks in WordPress: act and filter. In this article we will look at how we can use action hooks in theme customizer.

How WordPress Works

Using a very simple language, act pointed out that something happened in the lifecycle of the WordPress site: some part of the site has been loaded, some options or settings have been set, plugin or widget has been initialized, etc.

Filter other than act in their nature. They are used to transmit data throughand modify, manage or intercept it before displaying it to the screen or saving user data to the database.

At every milestone of the WordPress site lifecycle there is a work or one filter hook that we can add our custom code to modify default behavior according to our needs.

Certain actions and filters run in the request depending on which page is requested by the user agent: for example, in a post request hook related to available posts, but related hook other parts of the site (e.g. admin area) don’t.

Find action hooks

The WordPress Codex Action Reference provides a detailed overview of the actions that run through the different requests. The important thing is that if we want to complete a quest, we need to hook in the right placenot before or after it, otherwise the action will not be completed.

So for example if we want add our Google Analytics code to a website we need to our action hook just before the footer is loaded.

If we talk about theme customization, action hooks can come from two different places: from WordPress Core and main topic. There are themes that don’t hook up at all, but others offer developers some or more – it’s always the theme author’s choice. The default Twenty F Ten theme has only one action hook to customize the footer under the name ‘twenty-five_credits’.

If you like browsing the source code, you can also find action hooks easily. Action hooks are added to the code using the do_action() WordPress function.

If you run a quick search for the expression ‘do_action’ in the more advanced code editor – as I did in Eclipse below – you can see a list of points where you can hook custom functions its to the core. I searched in /wp-includes/ directory, but you can also run a search /wp-admin/ folder containing action hooks related to WordPress dashboard (admin area).

The good thing is that the names of action hooks are usually pretty self-explanatory, but yes usually a nice comment inside the code that can give you more knowledge whether the given action hook is good for the reason you want to use it for.

For example, the code comment before the ‘widget_init’ action hook says that it “fires after all default WordPress widgets have been registered”. If you go through the code before this hook you can find all the default initializations of the WP widgets before it – so you can be sure the comment isn’t lying and if you want to register the custom widget own correction, this would be the correct point.

In many cases, the source code gives us more information than the Codex, so it can be a good idea to learn how to quickly navigate there.

Add your own actions

When you want to add your own actions, you need to create a custom function and bind this function to a specific action hook using the WordPress add_action() function. Custom actions added using the add_action() function are usually on-site activation when core calls the appropriate do_action() function.

Let’s see a simple example.

How to find the action hook you need

Let’s say you want to add a custom favicon to your website. First you need to find the right action hook that you can bind your own function to.

Think try it. If you wanted to add a favicon to a simple HTML page, where would you put it? Of course, you need to put it inside

section of the HTML file with the following markup:

So the action hook you need is regarding the download part.

(first) Open the Action Reference and see what it has to offer. We’re lucky, as if we were browsing through the actions we could only find one, wp_head, based on its name potentially related to loading

part.

(2) To be sure, please check documentation in WordPress Codex. The Codex advises that “you use this hook by having your echo function output to the browser”, so right now it looks perfect for us. But check it out in the source code.

(3) Since this hook is not related to the admin area, we will need to run our search in /wp-includes/ folder. If we search for the word ‘wp-head’ we get many results because this particular action is used many times by WP Core.

We need to find the location where it is defined, so let’s find the expression do_action(‘wp_head’. Note that we didn’t complete the parentheses, because we can’t be sure yet if this action takes parameters.

Eclipse only returns one result that can be found inside /wp-includes/general-template.php file. The comment before the action hook definition says that it “prints the script or data in the head tag in the frontend”, so now we can die for sure that wp_head is the action hook we need.

Check the parameters

When you add your own actions, you also need to be sure whether the hook you want to use has parameters. You can easily figure this out by looking at the do_action() function.

The syntax of the do_action() function is as follows:

 do_action ('name_of_action' [, $ tham số1, $ tham số2, '] 

Only the name of the action is needed, the parameters are optional. If you find the arguments in the relevant call of the do_action() function, you need to include them in the custom function declaration you create.

If you don’t find any, then your custom function must work with no arguments. In the do_action() definition of the wp_head action hook, there are no parameters.

Compare it to an action hook with parameters. The action hook named ‘wp_register_sidebar_widget’ takes a parameter that you must always pass to the custom function you bind to the hook.

Let’s see the difference in the do_action() syntax of the two cases:

 do_action ('wp_head'); do_action ('wp_register_sidebar_widget', $ widget);

In the first case there are no parameters, so the custom function will use the following syntax:

 chức năng my_feft_without_parameter () ' 

In the second case, there is a parameter that you must always pass as an argument to your custom function declaration:

 chức năng my_feft_with_parameter ($ widget) Khác 

How to connect your custom function in

Now we know everything we need. Let’s create our custom function that will display the avatar on our website.

First, create a new function without any arguments, then bind it to the wp_head action hook with the help of the WordPress add_action() function.

 chức năng custom_add_favicon () echo '';  add_action ('wp_head', 'custom_add_favicon');

You need to pass the name of the action hook to the add_action() function as a first argumentthen you need to add the name of your custom function.

These are two required parameters of add_action(). It also has two optional parameters, priority and argument is accepted. Let’s see how to use them.

Prioritize

It happens in many cases where more than one action is bound to the same hook. Therefore which one will be executed first? This is where we can use $ preference optional parameter of the add_action() function.

We add the priority as a positive integer, default value is 10. If we want an action to be performed early, we give it a lower value, if we want it to be performed later, we give it a higher value.

So if we think the favicon needs to be present soon, we can augment the previous add_action() call in the following way:

 add_action ('wp_head', 'custom_add_favicon', 5); 

Please note that priorities are always required set relative for other custom functions use the same action hook.

Add the number of accepted arguments

You are required to add the number of accepted arguments in case you use action hooks with parameters. Let’s see the example we used before.

Action hook ‘wp_register_sidebar_widget’ takes one parameter, so when we bind our custom function to this hook we also need to give it as argument when we call add_action() function.

Our code in this case would look like this:

 chức năng my_sidebar_widget_function ($ widget) // Mã của bạn add_action ('wp_register_sidebar_widget', 'my_sidebar_widget_feft', 10, 1); 

Note that we must also add priority (we chose 10 defaults here) to ensure that WordPress knows what each parameter means. If we omit the priority, WordPress might assume 1 is the priority This is not true, as it indicates the number of accepted arguments.

Conclusion

You can do a lot of testing with action hooks in the theme customizer. For example, you can add custom scripts (JS) and styles (CSS) with the wp_enqueue_scripts action hook or your Google Analytics code with the wp_footer action hook.

Not only can you add your own actionsbut you can also completely removed function from WordPress core with the use of remove_action() function which uses the same logic as add_action().

If you are a theme author and you want to create an extended theme, it might be a good idea to add your own custom action hooks to the appropriate template files with the do_action() function.

If you want to do so, think carefully about the parameters that other developers who will use your theme will have to pass as argument when they want to hook into their custom functions.

While designing the placement of your theme’s custom action hooks, don’t forget that it it makes no sense to put custom theme hooks in the same place where WordPress Core has its own hooks.