Enqueuing styles and scripts in Wordpress - Step-by-Step Execution

Concept Flow - Enqueuing styles and scripts

Start WordPress Load

↓

Hook into wp_enqueue_scripts

↓

Call enqueue_style()

↓

Call enqueue_script()

↓

Add styles/scripts to queue

↓

WordPress outputs <link> and <script> tags

↓

Browser loads styles and scripts

↓

Page Ready

WordPress loads and runs your enqueue functions hooked to wp_enqueue_scripts, adding styles and scripts to the page output queue, which the browser then loads.

Execution Sample

Wordpress

<?php
function theme_assets() {
  wp_enqueue_style('main-style', get_stylesheet_uri());
  wp_enqueue_script('main-js', get_template_directory_uri() . '/js/main.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'theme_assets');

This code adds a CSS file and a JavaScript file to the WordPress page load using the enqueue system.

Execution Table

Step	Action	Function Called	Parameters	Effect
1	WordPress starts loading theme	N/A	N/A	Waiting for hooks
2	Hook wp_enqueue_scripts triggers	theme_assets	N/A	Calls theme_assets function
3	Enqueue style	wp_enqueue_style	handle='main-style', src=get_stylesheet_uri()	Adds main-style CSS to queue
4	Enqueue script	wp_enqueue_script	handle='main-js', src=get_template_directory_uri() . '/js/main.js', deps=[], version=null, in_footer=true	Adds main-js JS to queue
5	WordPress outputs HTML	N/A	N/A	Outputs <link> and <script> tags in page
6	Browser loads resources	N/A	N/A	Styles and scripts load and run
7	Page ready	N/A	N/A	Page fully styled and interactive

💡 All styles and scripts enqueued and output, page load completes

Variable Tracker

Variable	Start	After wp_enqueue_style	After wp_enqueue_script	Final
style_queue	empty	['main-style']	['main-style']	['main-style']
script_queue	empty	[]	['main-js']	['main-js']

Key Moments - 2 Insights

Why do we use wp_enqueue_style() instead of directly adding <link> tags?

wp_enqueue_style() lets WordPress manage styles properly, avoid duplicates, handle dependencies, and load them in the right place, as shown in steps 3 and 5 of the execution_table.

What does the 'in_footer' parameter in wp_enqueue_script() do?

Setting 'in_footer' to true (step 4) tells WordPress to load the script just before </body>, improving page speed and avoiding blocking rendering.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of style_queue after step 3?

A []

B ['main-style']

C ['main-js']

D ['main-style', 'main-js']

💡 Hint

Check the variable_tracker row for style_queue after wp_enqueue_style

At which step does WordPress output the HTML tags for styles and scripts?

A Step 5

B Step 4

C Step 2

D Step 6

💡 Hint

Look at the 'Effect' column in execution_table for when and