Common action hooks in Wordpress - Mini Project: Build & Apply

Using Common Action Hooks in WordPress

📖 Scenario: You are customizing a WordPress site to add extra content and functionality without changing core files. WordPress uses action hooks to let you run your code at specific points.In this project, you will learn how to use common action hooks to add a message to the site header, enqueue a custom stylesheet, and add a footer note.

🎯 Goal: Build a simple WordPress plugin that uses common action hooks: wp_head, wp_enqueue_scripts, and wp_footer. Your plugin will add a header message, load a CSS file, and show a footer note.

📋 What You'll Learn

Create a function to add a header message using the wp_head action hook

Create a function to enqueue a custom CSS file using the wp_enqueue_scripts action hook

Create a function to add a footer note using the wp_footer action hook

Hook each function to the correct WordPress action

💡 Why This Matters

🌍 Real World

WordPress developers often use action hooks to add or change site features without editing core files. This keeps sites safe and easy to update.

💼 Career

Knowing how to use WordPress action hooks is essential for plugin development and theme customization roles.

1

Create a header message function and hook it to wp_head

Create a function called add_header_message that echoes the HTML <p>Welcome to my WordPress site!</p>. Then hook this function to the wp_head action using add_action.

Wordpress

# Your code here

Need a hint?

Use add_action('wp_head', 'add_header_message') to run your function in the header.

2

Create a function to enqueue a CSS file and hook it to wp_enqueue_scripts

Create a function called enqueue_custom_styles that uses wp_enqueue_style to load a CSS file named custom-style.css located in your plugin folder. Hook this function to the wp_enqueue_scripts action.

Wordpress

Welcome to my WordPress site!';
}
add_action('wp_head', 'add_header_message');

# Your code here

Need a hint?

Use plugin_dir_url(__FILE__) to get the plugin folder URL for your CSS file.

3

Create a footer note function and hook it to wp_footer

Create a function called add_footer_note that echoes the HTML <p>Thank you for visiting!</p>. Hook this function to the wp_footer action.

Wordpress

Welcome to my WordPress site!';
}
add_action('wp_head', 'add_header_message');

function enqueue_custom_styles() {
    wp_enqueue_style('custom-style', plugin_dir_url(__FILE__) . 'custom-style.css');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

# Your code here

Need a hint?

Hook your footer note function to wp_footer to show it at the bottom of the page.

4

Complete the plugin file with opening PHP tag and comments

Add the opening PHP tag <?php at the top of the file if missing. Add a comment line // Plugin to add header message, enqueue styles, and footer note at the top.

Wordpress

# Your code here

Need a hint?

Start your plugin file with <?php and a comment describing the plugin.