Enqueueing Custom Scripts in wp_head

To add custom scripts to the wp_head section in your DigiFusion child theme, you’ll need to properly enqueue them using WordPress’s built-in functions. This ensures scripts load in the correct order and prevents conflicts.

Adding Scripts to functions.php

Open your child theme’s functions.php file and add the following function:

function digifusion_child_enqueue_head_scripts() {
    // Enqueue external script file
    wp_enqueue_script(
        'digifusion-custom-head-script',
        get_stylesheet_directory_uri() . '/js/custom-head.js',
        array(), // dependencies
        '1.0.0', // version
        false // load in head (not footer)
    );
}
add_action('wp_enqueue_scripts', 'digifusion_child_enqueue_head_scripts');

Creating the JavaScript File

Create a new file called custom-head.js in your child theme’s js folder:

// Custom head scripts for DigiFusion child theme
document.addEventListener('DOMContentLoaded', function() {
    // Your custom JavaScript code here
    console.log('DigiFusion child theme head script loaded');
    
    // Example: Add custom meta tag
    const meta = document.createElement('meta');
    meta.setAttribute('name', 'custom-property');
    meta.setAttribute('content', 'custom-value');
    document.head.appendChild(meta);
});

Adding Inline Scripts to Head

If you need to add inline scripts directly to the head section, use this approach:

function digifusion_child_inline_head_script() {
    ?>
    <script>
        // Your inline JavaScript code
        window.customConfig = {
            siteUrl: '<?php echo esc_url(home_url()); ?>',
            ajaxUrl: '<?php echo esc_url(admin_url('admin-ajax.php')); ?>'
        };
    </script>
    <?php
}
add_action('wp_head', 'digifusion_child_inline_head_script');

Conditional Script Loading

To load scripts only on specific pages or post types:

function digifusion_child_conditional_head_scripts() {
    // Load only on homepage
    if (is_front_page()) {
        wp_enqueue_script(
            'digifusion-homepage-script',
            get_stylesheet_directory_uri() . '/js/homepage.js',
            array(),
            '1.0.0',
            false
        );
    }
    
    // Load only on single posts
    if (is_single()) {
        wp_enqueue_script(
            'digifusion-single-post-script',
            get_stylesheet_directory_uri() . '/js/single-post.js',
            array(),
            '1.0.0',
            false
        );
    }
}
add_action('wp_enqueue_scripts', 'digifusion_child_conditional_head_scripts');

External CDN Scripts

To enqueue external scripts from CDNs:

function digifusion_child_external_head_scripts() {
    wp_enqueue_script(
        'analytics-script',
        'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID',
        array(),
        null, // no version for external scripts
        false
    );
    
    // Add inline script after external script
    wp_add_inline_script(
        'analytics-script',
        "
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'GA_MEASUREMENT_ID');
        "
    );
}
add_action('wp_enqueue_scripts', 'digifusion_child_external_head_scripts');

Script Dependencies

When your script depends on other scripts, specify them in the dependencies array:

function digifusion_child_dependent_scripts() {
    // This script requires jQuery (though we prefer vanilla JS)
    wp_enqueue_script(
        'digifusion-dependent-script',
        get_stylesheet_directory_uri() . '/js/dependent-script.js',
        array('jquery'), // dependencies
        '1.0.0',
        false
    );
}
add_action('wp_enqueue_scripts', 'digifusion_child_dependent_scripts');

The false parameter in the wp_enqueue_script function ensures scripts load in the head section rather than before the closing </body> tag. This is important for scripts that need to run before the page content loads.