The wp_head is an action hook that allows you to add custom functions to the <head> section of your theme’s header.php file.
Developers use wp_head to run various action scripts when the <head> tag is loaded. For example, if you want to add meta tags on your header manually, you need to hook a meta tag function into the wp_head.
Plugins using JavaScript or CSS to modify the frontend also rely on wp_head to run their scripts in the <head> section. Google Analytics, for instance, uses the hook to add its JavaSript to your website for it to track visitors.
Now, to activate the functions nested within wp_head, you need to use the wp_head() function. It is usually placed just before the closing </head> tag:
<html> <head> <?php wp_head(); ?> </head> <body> </body> </html>
How to Add Custom Functions to wp_head?
If you want to hook a custom feature into wp_head, you can do so in your theme’s functions.php file using the add_action() function.
However, be sure to use your child theme so your customizations won’t be overwritten by the theme’s future updates.
As an example, here’s how to display a pop-out alert when your page is loading:
- On you’re hPanel, navigate to the File Manager and go to public_htiml -> wp_content -> themes.
- Select your child theme folder and open its functions.php file.
- Insert the following code before the ?> command:
function hook_javascript() { ?> <script> alert('Press OK to continue...'); </script> <?php } add_action('wp_head', 'hook_javascript'); - Click Save & Close.
You will now see the alert box when you load your website.
Here is the breakdown of the code above:
- hook_javascript() {} — the name of the function.
- alert(‘Press OK to continue…’); — what the function does.
- add_action(‘wp_head’, ‘hook_javascript’); — is what hooks the function into the wp_head hook.
Wrapping Up
The wp_head is a WordPress action hook that lets you add and run custom action commands. It’s triggered by the wp_head() function, which is usually found in between the <head> and </head> tags of your theme file.
You’ve also learned how to use wp_head to run a JavaScript message box by inserting the code to a child theme’s functions.php file.
Feel free to try your own custom functions, and have fun.
Leave a Reply