Enqueuing styles and scripts in Wordpress - Mini Project: Build & Apply

Enqueuing Styles and Scripts in WordPress

📖 Scenario: You are building a WordPress theme. To make your theme look good and work well, you need to add CSS styles and JavaScript scripts properly.WordPress has a special way to add these files called enqueueing. This helps avoid conflicts and loads files in the right order.

🎯 Goal: Learn how to enqueue a CSS style and a JavaScript script in your WordPress theme using the correct WordPress functions.

📋 What You'll Learn

Create a function to enqueue styles and scripts

Use wp_enqueue_style to add a CSS file

Use wp_enqueue_script to add a JavaScript file

Hook the function to wp_enqueue_scripts action

💡 Why This Matters

🌍 Real World

Properly adding CSS and JavaScript files is essential for WordPress themes and plugins to work well and avoid conflicts.

💼 Career

WordPress developers must know how to enqueue assets correctly to build professional, maintainable themes and plugins.

1

Create the enqueue function

Create a function called mytheme_enqueue_assets that will hold the code to add styles and scripts.

Wordpress

# Create a function called mytheme_enqueue_assets
# Your code here

Need a hint?

Use the function keyword followed by the function name mytheme_enqueue_assets and parentheses.

2

Enqueue the main stylesheet

Inside the mytheme_enqueue_assets function, use wp_enqueue_style to add a CSS file named style.css located in your theme folder. Use the handle mytheme-style.

Wordpress

function mytheme_enqueue_assets() {
    # Use wp_enqueue_style to add style.css with handle mytheme-style
    # Your code here
}

Need a hint?

Use get_stylesheet_uri() to get the URL of style.css in your theme.

3

Enqueue a JavaScript file

Still inside the mytheme_enqueue_assets function, use wp_enqueue_script to add a JavaScript file named script.js located in the js folder of your theme. Use the handle mytheme-script. Make sure to load the script in the footer by setting the last parameter to true.

Wordpress

function mytheme_enqueue_assets() {
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());
    # Use wp_enqueue_script to add js/script.js with handle mytheme-script and load in footer
    # Your code here
}

Need a hint?

Use get_template_directory_uri() to get the theme folder URL and add /js/script.js to it.

Set dependencies to an empty array array(), version to false, and load in footer true.

4

Hook the function to enqueue scripts and styles

Add an action hook to call mytheme_enqueue_assets on the wp_enqueue_scripts action.

Wordpress

function mytheme_enqueue_assets() {
    wp_enqueue_style('mytheme-style', get_stylesheet_uri());
    wp_enqueue_script('mytheme-script', get_template_directory_uri() . '/js/script.js', array(), false, true);
}

# Hook the function to wp_enqueue_scripts
# Your code here

Need a hint?

Use add_action with the first argument 'wp_enqueue_scripts' and the second argument 'mytheme_enqueue_assets'.