Linking Javascript in functions.php file

Below is my raw javascript embeds from my html template. But I cannnot figure out exactly how to add it to my functions.php file. It seems pretty difficult. Can you please assist with the correct syntax using the wp_enqueue_script function.

script src="../assets/components/plugins/ajaxify/script.min.js?v=v1.9.6sv=v0.0.1"/script

scriptvar App = {};/script

script data-id="App.Scripts"
App.Scripts = {

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

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

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

    /* The initialization scripts always load last and are automatically and dynamically loaded when AJAX navigation is enabled; */
    bundle: [
        '../assets/components/plugins/ajaxify/ajaxify.init.js?v=v1.9.6', 
        '../assets/components/core/js/preload.pace.init.js?v=v1.9.6', 
        '../assets/components/modules/admin/content/assets/news-featured-2.init.js?v=v1.9.6', 
        '../assets/components/modules/admin/content/assets/news-featured-1.init.js?v=v1.9.6', 
        '../assets/components/modules/admin/content/assets/news-featured-3.init.js?v=v1.9.6', 
        '../assets/components/core/js/sidebar.main.init.js?v=v1.9.6', 
        '../assets/components/core/js/sidebar.collapse.init.js?v=v1.9.6', 
        '../assets/components/common/forms/elements/bootstrap-select/assets/custom/js/bootstrap-select.init.js?v=v1.9.6sv=v0.0.1', 
        '../assets/components/core/js/sidebar.kis.init.js?v=v1.9.6', 
        '../assets/components/core/js/core.init.js?v=v1.9.6', 
        '../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
    scriptif (/*@cc_on!@*/false  document.documentMode === 10) { document.documentElement.className+=' ie ie10'; }/script

Topic functions linking customization Wordpress javascript

Category Web


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.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.