loader image

WordPress is the most popular content management system (CMS) in the world, with a market share of more than 60%.

A big support community and a number of available free plugins make building a website with WordPress (WP) affordable, and it plays a key role in why its market share is so big.

However, as you know, installing plugins comes at a cost.

They often may degrade your Core Web Vitals scores; For example, they may load unnecessary CSS or JS files on every page where they are not needed.

To fix that, you need to hire a programmer to do it for you, buy a premium plugin, or perhaps go down a small learning path and do it yourself.

You can also go hybrid and solve some parts of your issues by custom coding, and other parts using plugins.

This article aims to help you in your learning path, and we will cover the most needed WordPress hooks to help you improve your website’s technical SEO.

What Is A WordPress Hook?

WordPress hooks are key features in WP that allow developers to extend the functionality of the CMS without a need to modify core WP files – making it easier to update themes or plugins without breaking custom modifications.

They provide a powerful way for developers to extend the functionality of WordPress and make custom changes to their sites.

What Is A Filter Hook?

The hook filter function is used to modify the output of the function before it is returned. For example, you can suffix page titles with your blog name using the wp_title filter hook.

What Is An Action Hook?

Action hooks allow programmers to perform certain actions at a specific point in the execution of WP Core, plugins, or themes, such as when a post is published, or JS and CSS files are loaded.

By learning a few basic action hooks or filters, you can perform a wide range of tasks without the need to hire developers.

We will go through the following hooks:

  • wp_enqueue_scripts
  • wp_head
  • script_loader_tag
  • template_redirect
  • wp_headers


This is exactly the action hook you would use to exclude redundant CSS or JS files from loading on pages where they are not needed.

For example, the popular free Contact Form 7 plugin, which has over 5M installations, loads CSS and JS files on all pages – whereas one only needs it to load where the contact form exists.

To exclude CF7 CSS and JS files on pages other than the contact page, you can use the code snippet below.

function my_dequeue_script(){ //check if page slug isn’t our contact page, alternatively, you can use is_page(25) with page ID, or if it is a post page is_single(‘my-post’)    if ( !is_page(‘contact’) ) {      wp_dequeue_script(‘google-recaptcha’);      wp_dequeue_script(‘wpcf7-recaptcha’);      wp_dequeue_script(‘contact-form-7’);      wp_dequeue_style(‘contact-form-7’);   } } add_action(‘wp_enqueue_scripts’, ‘my_dequeue_script’, 99 );

There are a few key points; the action hook priority is set to 99 to ensure our modification runs last in the queue.

If you set it to, say, 10, it will not work because CF7 enqueue function uses priority 20. So to ensure yours run last and have an effect, set a priority large enough.

Also, in the code, we used as a function argument identifier “contact-form-7”; you may wonder how I found that.

It is pretty simple and intuitive. Just use inspect element tool of your browser and check for the id attribute of link or script tags.

Screenshot from author, February 2023

You can check your website source code using inspect element and start dequeuing any JS or CSS file where they are not needed.


This action hook is used to add any resource JS, CSS files, or meta tags in the section of the webpage.

Using this hook, you can load preload above-the-fold resources in the head section, which can improve your LCP scores.

For example, font preloading, which is one of Google’s recommendations, or logo and featured images on article pages, always load above the fold – and you need to preload them to improve LCP.

For that, use the code snippet below.

function my_preload() { ?>