Linking Javascript in functions.php file

Question

So this looks like you’re using a JS package manager, possibly Dustin Diaz’s ScriptJS? And I’m assuming you are storing all these files within your theme folder it would then be just a matter of linking to your script.min.js file via the wp_enqueue_script mechanism as follows:

function wpse143251_enqueue_theme_scripts() {
    wp_enqueue_script( 'dustindiaz-scriptjs', get_template_directory_uri() . '/assets/components/plugins/ajaxify/script.min.js?v=v1.9.6&sv=v0.0.1' );
}
add_action( 'wp_enqueue_scripts', 'wpse143251_enqueue_theme_scripts' );

The remaining scripts would then need to reference via the JS loader; however, since the paths seem relative if they are included in the template pieces a hierarchical structure would render the paths invalid. So using the wp_footer hook you can then print this with the proper paths to your theme assets:

function wpse143251_custom_theme_scripts(){
    $theme = get_template_directory_uri();
    ?>
    <script>var App = {};</script>
    <script data-id="App.Scripts">
    App.Scripts = {

        /* CORE scripts always load first; */
        core: [
            '<?php echo $theme; ?>/assets/components/library/jquery/jquery.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/library/modernizr/modernizr.js?v=v1.9.6&sv=v0.0.1'
        ],

        /* PLUGINS_DEPENDENCY always load after CORE but before PLUGINS; */
        plugins_dependency: [
            '<?php echo $theme; ?>/assets/components/library/bootstrap/js/bootstrap.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/library/jquery/jquery-migrate.min.js?v=v1.9.6&sv=v0.0.1'
        ],

        /* PLUGINS always load after CORE and PLUGINS_DEPENDENCY, but before the BUNDLE / initialization scripts; */
        plugins: [
            '<?php echo $theme; ?>/assets/components/plugins/nicescroll/jquery.nicescroll.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/plugins/breakpoints/breakpoints.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/plugins/ajaxify/davis.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/plugins/ajaxify/jquery.lazyjaxdavis.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/plugins/preload/pace/pace.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/plugins/owl-carousel/owl.carousel.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/common/forms/elements/bootstrap-select/assets/lib/js/bootstrap-select.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/plugins/less-js/less.min.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/modules/admin/charts/flot/assets/lib/excanvas.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/plugins/browser/ie/ie.prototype.polyfill.js?v=v1.9.6&sv=v0.0.1'
        ],

        /* The initialization scripts always load last and are automatically and dynamically loaded when AJAX navigation is enabled; */
        bundle: [
            '<?php echo $theme; ?>/assets/components/plugins/ajaxify/ajaxify.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/core/js/preload.pace.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/modules/admin/content/assets/news-featured-2.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/modules/admin/content/assets/news-featured-1.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/modules/admin/content/assets/news-featured-3.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/core/js/sidebar.main.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/core/js/sidebar.collapse.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/common/forms/elements/bootstrap-select/assets/custom/js/bootstrap-select.init.js?v=v1.9.6&sv=v0.0.1', 
            '<?php echo $theme; ?>/assets/components/core/js/sidebar.kis.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/core/js/core.init.js?v=v1.9.6', 
            '<?php echo $theme; ?>/assets/components/core/js/animations.init.js?v=v1.9.6'
        ]

    };
    </script>

    <script>
    $script(App.Scripts.core, 'core');

    $script.ready(['core'], function(){
        $script(App.Scripts.plugins_dependency, 'plugins_dependency');
    });
    $script.ready(['core', 'plugins_dependency'], function(){
        $script(App.Scripts.plugins, 'plugins');
    });
    $script.ready(['core', 'plugins_dependency', 'plugins'], function(){
        $script(App.Scripts.bundle, 'bundle');
    });
    </script>
    <script>if (/*@cc_on!@*/false && document.documentMode === 10) { document.documentElement.className+=' ie ie10'; }</script>
    <?php
}
add_action( 'wp_footer', 'wpse143251_custom_theme_scripts' );

As a side note I’d recommend removing the query string vars at the end of your JS assets since it will bust the cache on your visitor’s browsers and require them to download these assets repeatedly.

Related Posts: