Common action hooks in Wordpress - Step-by-Step Execution

Concept Flow - Common action hooks

WordPress loads core

↓

Trigger action hook

↓

Run all functions hooked

↓

Continue WordPress process

WordPress runs its core, triggers action hooks at specific points, then runs all functions attached to those hooks before continuing.

Execution Sample

Wordpress

<?php
add_action('init', 'my_init_function');
function my_init_function() {
  error_log('Init hook fired');
}
?>

This code attaches a function to the 'init' action hook that logs a message when WordPress initializes.

Execution Table

Step	Action Hook Triggered	Hooked Function	Function Output	Next Step
1	init	my_init_function	Logs 'Init hook fired' to error log	Continue loading WordPress
2	wp_head	theme_custom_head	Adds custom CSS to page header	Render page head
3	wp_footer	theme_custom_footer	Adds custom scripts before </body>	Render page footer
4	shutdown	cleanup_function	Performs cleanup tasks	End WordPress process

💡 All hooked functions run at their action points; WordPress process continues normally.

Variable Tracker

Variable	Start	After init	After wp_head	After wp_footer	After shutdown
error_log	empty	'Init hook fired'	'Init hook fired'	'Init hook fired'	'Init hook fired'
page_head	empty	empty	custom CSS added	custom CSS added	custom CSS added
page_footer	empty	empty	empty	custom scripts added	custom scripts added
cleanup_done	false	false	false	false	true

Key Moments - 2 Insights

Why does my hooked function not run if I add it after WordPress loads?

Hooks run only when WordPress triggers them during its process. Adding functions after the hook triggers means they won't run. See execution_table step 1 where 'init' runs early.

Can multiple functions run on the same action hook?

Yes, WordPress runs all functions hooked to an action in the order they were added. The execution_table shows different hooks but multiple functions can attach to one hook.

Visual Quiz - 3 Questions

Look at the execution_table, what output does 'my_init_function' produce at step 1?

A Adds custom scripts before </body>

B Adds custom CSS to page header

C Logs 'Init hook fired' to error log

D Performs cleanup tasks

💡 Hint

Check the 'Function Output' column for step 1 in execution_table.

At which step does WordPress add custom scripts before the closing body tag?

A init

B wp_footer

C wp_head

D shutdown

💡 Hint

Look at the 'Action Hook Triggered' and 'Function Output' columns in execution_table.

If you add a function to 'shutdown' hook, when will it run?

A At the very end of WordPress process

B During page header rendering

C Before WordPress loads core

D Immediately after 'init' hook

💡 Hint

Refer to the last row in execution_table and variable_tracker for 'cleanup_done'.

Concept Snapshot

WordPress action hooks let you run your code at specific points.
Use add_action('hook_name', 'your_function') to attach.
WordPress triggers hooks during loading, rendering, and shutdown.
All hooked functions run in order when the hook fires.
Hooks help customize behavior without changing core files.

Full Transcript

WordPress uses action hooks to let developers add custom code at key points. When WordPress loads, it triggers hooks like 'init', 'wp_head', 'wp_footer', and 'shutdown'. Functions attached to these hooks run automatically. For example, a function hooked to 'init' runs early to set up things. Multiple functions can attach to the same hook and run in order. Hooks run only when WordPress triggers them, so adding functions too late means they won't run. This system helps customize WordPress safely and flexibly.

Practice

1. Which WordPress action hook is commonly used to run code after WordPress has finished loading but before any headers are sent?

easy

A. wp_footer

B. wp_head

C. save_post

D. init

Solution

1. Step 1: Understand the purpose of init hook

   The init hook runs after WordPress loads but before headers are sent, ideal for initialization tasks.

2. Step 2: Compare with other hooks

   wp_head and wp_footer run during page rendering, save_post runs on post save, so they don't fit the timing.

3. Final Answer:

   init -> Option D

4. Quick Check:

   Initialization hook = init [OK]

Hint: Remember: init runs early after loading [OK]

Common Mistakes:

• Confusing wp_head with init
• Thinking save_post runs on page load
• Mixing wp_footer timing with init

2. Which of the following is the correct syntax to add a function named my_custom_function to the wp_footer action hook?

easy

A. add_action('wp_footer', my_custom_function);

B. add_action(wp_footer, 'my_custom_function');

C. add_action('wp_footer', 'my_custom_function');

D. add_action('wp_footer', my_custom_function());

Solution

1. Step 1: Check the function name parameter

   The function name must be passed as a string, so quotes are required around 'my_custom_function'.

2. Step 2: Verify the hook name and function call

   The hook name must be a string, so 'wp_footer' is correct. The function should not be called (no parentheses).

3. Final Answer:

   add_action('wp_footer', 'my_custom_function'); -> Option C

4. Quick Check:

   Function name as string, no parentheses [OK]

Hint: Function names in add_action must be quoted strings [OK]

Common Mistakes:

• Passing function name without quotes
• Calling the function with parentheses inside add_action
• Not quoting the hook name string

3. What will be the output when the following code runs in a WordPress theme?

add_action('wp_head', function() { echo '<!-- Header comment -->'; });

medium

A. The code will cause a fatal error due to incorrect hook usage.

B. The comment <!-- Header comment --> will appear inside the HTML <head> section.

C. The comment will not appear because anonymous functions are not allowed.

D. The comment will appear at the bottom of the page before </body>.

Solution

1. Step 1: Understand the wp_head hook timing

   The wp_head hook runs inside the HTML <head> section of the page.

2. Step 2: Analyze the anonymous function output

   The function echoes an HTML comment, so it will be output exactly where the hook runs, inside <head>.

3. Final Answer:

   The comment <!-- Header comment --> will appear inside the HTML <head> section. -> Option B

4. Quick Check:

   wp_head outputs inside <head> [OK]

Hint: Remember wp_head outputs inside <head> tag [OK]

Common Mistakes:

• Thinking output appears in footer
• Believing anonymous functions are disallowed
• Assuming hook causes error

4. Identify the error in this code snippet that tries to save custom data when a post is saved:

add_action('save_post', 'save_custom_data');
function save_custom_data() {
  update_post_meta(get_the_ID(), 'custom_key', 'custom_value');
}

medium

A. The function save_custom_data should accept the post ID parameter.

B. The hook name should be 'save_post_data' instead of 'save_post'.

C. update_post_meta cannot be used inside save_post hook.

D. get_the_ID() returns the wrong post ID inside save_post.

Solution

1. Step 1: Check the save_post hook function signature

   The save_post hook passes the post ID as a parameter to the callback function, so the function must accept it.

2. Step 2: Analyze the function usage of get_the_ID()

   get_the_ID() may not return the correct post ID in this context; the passed post ID parameter should be used instead.

3. Final Answer:

   The function save_custom_data should accept the post ID parameter. -> Option A

4. Quick Check:

   save_post callback needs post ID parameter [OK]

Hint: save_post callback must accept post ID parameter [OK]

Common Mistakes:

• Ignoring the post ID parameter in callback
• Using wrong hook name
• Assuming get_the_ID() works inside save_post

5. You want to add a custom script only on the front page footer using WordPress hooks. Which combination of hooks and conditions is the best approach?

hard

A. Use add_action('wp_footer', 'my_script_function') and inside the function check is_front_page() before outputting the script.

B. Use add_action('init', 'my_script_function') and output the script directly.

C. Use add_action('wp_head', 'my_script_function') without any condition.

D. Use add_action('save_post', 'my_script_function') to add the script on front page.

Solution

1. Step 1: Identify the correct hook for footer scripts

   The wp_footer hook is the proper place to add scripts before the closing </body> tag.

2. Step 2: Use conditional check for front page

   Inside the callback, use is_front_page() to ensure the script runs only on the front page.

3. Final Answer:

   Use add_action('wp_footer', 'my_script_function') and inside the function check is_front_page() before outputting the script. -> Option A

4. Quick Check:

   Footer hook + front page check = Use add_action('wp_footer', 'my_script_function') and inside the function check is_front_page() before outputting the script. [OK]

Hint: Add scripts in wp_footer with is_front_page() check [OK]

Common Mistakes:

• Using init hook to output scripts directly
• Adding scripts in wp_head without condition
• Using save_post hook for front page scripts