Home » Hooks » wp_head

The WordPress wp_head hook is one of the most commonly used hooks in the platform, and for good reason. It allows developers to add code to the header section of a WordPress site, just before the closing </head> tag. This means that any code added to this hook will load before anything else on the page, making it a great place to add stylesheets, scripts, meta tags, and other important elements that need to be loaded early in the page lifecycle.

The wp_head hook is typically used by developers to add custom CSS and JavaScript files, as well as other tags like meta descriptions and social media sharing tags. By using this hook, developers can ensure that their custom code is loaded before any other scripts or stylesheets, and can be sure that it will be available to all pages on the site.

Here is an example of how to use the wp_head hook to add a custom stylesheet to a WordPress site:

function my_custom_styles() {
    wp_enqueue_style( 'my-custom-style', get_template_directory_uri() . '/css/custom.css' );
add_action( 'wp_head', 'my_custom_styles' );

In this example, we are using the wp_enqueue_style() function to load a custom CSS file named custom.css. This function ensures that the file is only loaded once, and that it is loaded after any core WordPress stylesheets.

By adding this code to the wp_head hook, we can be sure that the custom stylesheet will be loaded before any other stylesheets on the page, ensuring that our custom styles are applied correctly.

Learn More on WordPress.org

Register an account to save your snippets or go Pro to get more features.