Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.6&sv=v0.0.1"></script>

<script>var 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.6&sv=v0.0.1', 
        '../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: [
        '../assets/components/library/bootstrap/js/bootstrap.min.js?v=v1.9.6&sv=v0.0.1', 
        '../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: [
        '../assets/components/plugins/nicescroll/jquery.nicescroll.min.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/plugins/breakpoints/breakpoints.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/plugins/ajaxify/davis.min.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/plugins/ajaxify/jquery.lazyjaxdavis.min.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/plugins/preload/pace/pace.min.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/plugins/owl-carousel/owl.carousel.min.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/common/forms/elements/bootstrap-select/assets/lib/js/bootstrap-select.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/plugins/less-js/less.min.js?v=v1.9.6&sv=v0.0.1', 
        '../assets/components/modules/admin/charts/flot/assets/lib/excanvas.js?v=v1.9.6&sv=v0.0.1', 
        '../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: [
        '../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.6&sv=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>
    <script>if (/*@cc_on!@*/false && document.documentMode === 10) { document.documentElement.className+=' ie ie10'; }</script>
share|improve this question

1 Answer 1

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.