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');
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.