The following execution flow clearly explains the link between the wp_head
action hook and the wp_enqueue_scripts
action hook.
Also, This following execution flow applies to every single page on our WordPress website. The only thing that might change from one webpage to another webpage is the template file that WordPress chooses to render a particular webpage. Nothing else will change.
1) The user tries to visit a page on our WordPress website. It could be any page, let’s just say home page.
2) WordPress loads the core files. Next, WordPress loads the plugins.
3) And once the plugins are loaded, it loads the active theme’s functions.php
file, it goes it through line-by-line and figures out that there is an add_action()
function call belonging to the wp_enqueue_scripts
action hook.
So, it memorizes that “Oh! the theme developer is trying to enqueue a stylesheet inside the <head>
element and I need to execute this action as soon as I execute the do_action( 'wp_enqueue_scripts' )
function…”.
4) Next, WordPress figures out that the user is trying to access the Homepage. So, WordPress looks for the front-page.php
file inside the active theme. In our case, it indeed finds this file.
5) It starts processing the contents of the front-page.php
file and the first line it finds is the get_header()
function and executes it.
6) The Primary purpose of the get_header()
function is to load up header.php
file from the active theme.
So, once the WordPress loads up the header.php
file and starts processing it, it comes across the wp_head()
function and executes it.
As soon as WordPress executes the wp_head()
function, it will run into the do_action('wp_head')
function and realizes that
“Oh! This is an action hook. I now should execute all the actions that are tied to it.”
Remember? I previously mentioned that WordPress internally attaches it’s own core actions to the 'wp_head'
action hook.
And One of those core actions is wp_enqueue_scripts
. You can see this if you take a peek into the default-filters.php
file from the WordPress core.
You also know that an action is nothing but a custom PHP function with a single purpose. And the purpose of the wp_enqueue_scripts
action is to trigger wp_enqueue_scripts
action hook. Just like wp_head()
function triggers the wp_head
function action hook. Here is source of wp_enqueue_scripts
action.
As you can see, it is just a custom PHP function which triggers wp_enqueue_scripts
action hook.
7) Anyway, As soon as WordPress executes the wp_enqueue_scripts
action, it will run into the do_action('wp_enqueue_scripts')
function and realizes that
“Oh! There we go. I finally came across the wp_enqueue_scripts
action hook and now its time to execute all the actions that are hooked into it. ”
WordPress stores all the actions ( functions ) that must be executed at this action hook in an array and it goes through it one by one and executes all of them based on their priority.
In our case, from the functions.php
file perspective, nd_dosth_enqueue_styles()
action will get executed and as soon as it gets executed, the link tag code will be outputted to the inside of the <head>
element.
8) Execution of all the actions that belong to wp_head
action hook will mark the end of the wp_head()
function call and WordPress comes back to header.php
file to process the rest of the file and once it reaches the end of it, it comes back to the to the front-page.php
file, it will process the rest of the file and sends the final markup to the browser.
9) Finally, the browser renders the markup to the user.