wp_localize_script not working

4 Views

I have the following code in my theme functions.php but when I call console.log(pw_script_vars); the variable is undefined. What did I miss? 

function mytheme_enqueue_scripts(){
    wp_enqueue_script( 'jquery' );

}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts');

function pw_load_scripts() {

    wp_enqueue_script('pw-script');
    wp_localize_script('pw-script', 'pw_script_vars', array(
            'alert' => __('Hey! You have clicked the button!', 'pippin'),
            'message' => __('You have clicked the other button. Good job!', 'pippin')
        )
    );


}
add_action('wp_enqueue_scripts', 'pw_load_scripts');
Post Views: 4

Related posts

Leave a Reply

4 comments

  1. You didn’t include any javascript file with your wp_enqueue_script.

    function pw_load_scripts() {

    wp_enqueue_script('pw-script', get_template_directory_uri() . '/test.js');
     wp_localize_script('pw-script', 'pw_script_vars', array(
            'alert' => __('Hey! You have clicked the button!', 'pippin'),
            'message' => __('You have clicked the other button. Good job!', 'pippin')
        )
    );


}
add_action('wp_enqueue_scripts', 'pw_load_scripts');

    Create an empty file called test.js in your theme directory and
    it will work.

    If you then look at your source code you’ll see:

    <script type='text/javascript'>
/* <![CDATA[ */
var pw_script_vars = {"alert":"Hey! You have clicked the button!","message":"You have clicked the other button. Good job!"};
/* ]]> */
</script>

    You can then type pw_script_vars.alert in your console to get the "Hey! You have clicked the button!" message.

  2. You could also try to localize jQuery without the need to create additional empty JS files.

        wp_localize_script('jquery', 'pw_script_vars', array(
        'alert' => __('Hey! You have clicked the button!', 'pippin'),
        'message' => __('You have clicked the other button. Good job!', 'pippin')
    )
);

    It works like a charm for me. Hope it helps.

  3. Place the code block below the wp_enqueue_script    



     $dir_url = array( 'dir_url' => get_stylesheet_directory_uri() );
        wp_localize_script( 'custom-js', 'adact_img', $dir_url );



Then Add it as a variable on your custom script. Here is called "custom-js"


    

    

        var dir_url = adact_img.dir_url;
       $('hello') .owlCarousel({
                items: 1,
                loop: true,
                margin: 0,
                dots: false,
                nav: true,
                navText: ["<img src='"+ dir_url +" /assets/images/icons/angle-right.png' />", "<img src='"+ dir_url +" /assets/images/icons/angle-left.png' />"],
            });


        
    

    

    

    
				

  4. Place the code block below the wp_enqueue_script    
    Then Add it as a variable on your custom script. Here is called "custom-js"


    

    

        var dir_url = adact_img.dir_url;
       $('hello') .owlCarousel({
                items: 1,
                loop: true,
                margin: 0,
                dots: false,
                nav: true,
                navText: ["<img src='"+ dir_url +" /assets/images/icons/angle-right.png' />", "<img src='"+ dir_url +" /assets/images/icons/angle-left.png' />"],
            });