When customizing a WordPress theme, properly enqueuing scripts and styles is crucial for maintaining code organization and performance. This ensures that assets are loaded efficiently and only when needed.

Enqueuing Styles and Scripts in the Child Theme

To enqueue styles and scripts in a WordPress child theme, utilize the wp_enqueue_style() and wp_enqueue_script() functions within the functions.php file. Below is a snippet demonstrating how to enqueue custom styles and scripts:

function enqueue_child_theme_assets() {
    // Enqueue custom style
    wp_enqueue_style('child-custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css');
    
    // Enqueue custom script with jQuery dependency
    wp_enqueue_script('child-custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_assets', 99);

Enqueuing Styles and Scripts for Specific Pages

Sometimes, you may want to load assets only on specific pages. You can achieve this by adding conditional checks within the enqueue function. For instance, to enqueue assets only on the “Contact” and “About” pages:

function enqueue_child_theme_assets() {
    if (is_page(array('contact', 'about'))) {
        // Enqueue custom style
        wp_enqueue_style('child-custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css');
        
        // Enqueue custom script with jQuery dependency
        wp_enqueue_script('child-custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_assets', 99);

Avoid Enqueuing Assets for Specific Pages

Conversely, if you want to exclude assets from certain pages, adjust the conditional statement accordingly:

function enqueue_child_theme_assets() {
    if (!is_page(array('contact', 'about'))) {
        // Enqueue custom style
        wp_enqueue_style('child-custom-style', get_stylesheet_directory_uri() . '/css/custom-style.css');
        
        // Enqueue custom script with jQuery dependency
        wp_enqueue_script('child-custom-script', get_stylesheet_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_child_theme_assets', 99);

By following these practices, you ensure that your WordPress child theme remains well-structured, optimized, and SEO-friendly.

More Example

function enqueue_child_theme_assets() {
    // Check if it's not the admin area and not the login page
    if (!is_admin() && !is_login_page()) {
        
        // Check if it's a specific page template
        if (is_page_template('custom-template.php')) {
            // Enqueue custom style
            wp_enqueue_style('custom-template-style', get_stylesheet_directory_uri() . '/css/custom-template-style.css');
            
            // Enqueue custom script with jQuery dependency
            wp_enqueue_script('custom-template-script', get_stylesheet_directory_uri() . '/js/custom-template-script.js', array('jquery'), '1.0', true);
        }
        
        // Check if it's a specific page ID
        elseif (is_page(array(10, 20, 30))) { // Replace 10, 20, 30 with actual page IDs
            // Enqueue custom style
            wp_enqueue_style('specific-page-style', get_stylesheet_directory_uri() . '/css/specific-page-style.css');
            
            // Enqueue custom script with jQuery dependency
            wp_enqueue_script('specific-page-script', get_stylesheet_directory_uri() . '/js/specific-page-script.js', array('jquery'), '1.0', true);
        }
        
        // Check if it's not the home page
        elseif (!is_front_page()) {
            // Enqueue default custom style
            wp_enqueue_style('default-style', get_stylesheet_directory_uri() . '/css/default-style.css');
            
            // Enqueue default custom script with jQuery dependency
            wp_enqueue_script('default-script', get_stylesheet_directory_uri() . '/js/default-script.js', array('jquery'), '1.0', true);
        }
    }
}

add_action('wp_enqueue_scripts', 'enqueue_child_theme_assets', 99);

In this example:

  • We first ensure that we’re not in the admin area or on the login page.
  • Then, we have different conditions:
    • Enqueue assets if a specific page template is used (custom-template.php).
    • Enqueue assets if the current page matches certain IDs (e.g., 10, 20, 30).
    • Enqueue assets for all pages except the home page.

Replace the placeholders like 'custom-template.php', 10, 20, 30, with actual page template names or IDs as needed. This approach allows for precise control over which assets are loaded on different pages of your WordPress site, optimizing performance and user experience.