how to create template path for external (include) .js file

Question

from my header file i can create template path easily for any .js file:

 <?php $templateDirPath = get_bloginfo( 'template_directory' ) . '/';    ?>
<script type="text/javascript" src="<?php echo $templateDirPath; ?>js/scripts.js"></script>

but inside the 'scripts.js' file has some include .js files (same directory) like below:

include('js/mathUtils.js');

include('js/superfish.js');

include('js/switcher.js');

include('js/jquery.mousewhe

i just want to know is there any way to make template path for those included .js files inside 'scripts.js' file ? im newbie in wordpress.

found idea for below code but dnt know how to implement:

<script type="text/javascript">
var templateUrl = '<?= get_bloginfo( 'template_directory' ) . '/'; ?>';
</script>

Answer 1

Use wp_enqueue_script(), hooked in via an appropriate action hook callback.

wp_enqueue_script(
    // Script handle
    'someScript',
    // URL
    get_template_directory_uri() . '/js/someScript.js',
    // Dependencies
    array( 'jquery' ),
    // Version
    '2.4',
    // Output in footer?
    false
);

For example:

function wpse72720_enqueue_scripts() {
    if ( ! is_admin() ) {

        wp_enqueue_script(
            'mathUtils',
            get_template_directory_uri() . '/js/mathUtils.js',
            array(),
            '',
            false
        );

        wp_enqueue_script(
            'superfish',
            get_template_directory_uri() . '/js/superfish.js',
            array( 'jquery' ),
            '',
            false
        );

        wp_enqueue_script(
            'switcher',
            get_template_directory_uri() . '/js/switcher.js',
            array(),
            '',
            false
        );

        wp_enqueue_script(
            'query.mousewhel',
            get_template_directory_uri() . '/js/query.mousewhel.js',
            array( 'jquery' ),
            '',
            false
        );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse72720_enqueue_scripts' );

Answer 2

You need to do a bit of research on the proper way to enqueue JS within WordPress. Your approach is totally outside the defined method.

Take a look at the WordPress codex for the wp_enqueue_script call.

Answer 3

The solution you found is almost correct but that ASP-like <?= may not be terribly reliable, especially pre-PHP.5.4.0.

function add_templateUrl_var() { ?>
    <script type="text/javascript">
        var templateUrl = '<?php bloginfo( 'template_directory' ); ?> /';
    </script><?php
}
add_action('wp_footer','add_templateUrl_var');

That will shove your script into the footer of your front-end page assuming your theme uses the wp_footer function. You can put that in your functions.php or in a plugin.

You could use wp_enqueue_script but as far as I am aware that requires you to load a file, which is overkill for this, and not just a string. If someone can demonstrate how to load a string with wp_enqueue_script and avoid the overhead of loading a whole file I would love to be proven wrong on this.

There are other ways to do this as well, like wp_localize_script ( http://pippinsplugins.com/use-wp_localize_script-it-is-awesome/ ), but that requires enqueue-ing which I consider overkill here.

Edit: If you are already enqueue-ing a script, any script, you can leverage that to print your variable.

function enqueue_my_scripts() {
    wp_enqueue_script('jquery');
    wp_localize_script( 'jquery' , 'my_js_vars' , array( 'templatepath' => get_bloginfo( 'template_directory' ) ) );
}
add_action('wp_enqueue_script','enqueue_my_scripts');