Using wp_localize_script to store the template url into a variable to use in JS

You are not enqueueing your custom JavaScript file. And calling the var (templateUrl) in JS file without the handle. Follow the following:

I’m enqueueing my custom JavaScripts file (script.js) under the dependency of jQuery, so it will enqueue jQuery library from core. And I’m using the same handle my-custom-js for both my script and localize_script to pass the variables to the JavaScripts page.

functions.php

<?php
function project_scripts() {
    wp_enqueue_script( "my-custom-js", get_template_directory_uri() . "/js/script.js", array("jquery"), "20141230", TRUE );
    wp_localize_script("my-custom-js",
                            "site",
                            array(
                                    "theme_path"    => get_template_directory_uri()
                                )
                        );
}
add_action( 'wp_enqueue_scripts', 'project_scripts' );

script.js

jQuery(document).ready(function($){

    console.log(site.theme_path);

});

Note the site handle in both localize_script and my custom JS file – it’s the key with which I’m fetching the data.

Related Posts: