ccurtin
11/18/2014 - 10:30 PM
:WORDPRESS: using-PHP-variables-in-JS (wp localize script)
:WORDPRESS: using-PHP-variables-in-JS (wp localize script)
Make PHP data available in javascript files for Wordpress using wp_localize_script();
[http://codex.wordpress.org/Function_Reference/wp_localize_script] [http://stackoverflow.com/questions/6808221/php-within-js-file-wordpress]
Usage
<?php wp_localize_script( $handle, $name, $data ); ?>
- Register the script
- Create variables in a (preferably associative) array
- Localize the script (handle-of-registered-script-in-step-1,object-name-to-be-used-in-the-JS,the-array-that-contains-the-data-variables)
- Enqueue the registered script in step 1
- Use the object's properties in your JS
Example
functions.php or
plugins/your_plugin.php
<?php
// Register the script first.
wp_register_script( 'discount_vars', get_template_directory_uri() . 'js/scripts.js' );
// Localize the script with our data that we want to use
$options = get_option( 'hub_settings' );
$discount = array('discount1'=> $options['hub_text_field_0'],'discount_2'=> $options['hub_text_field_1'],'discount_3'=> $options['hub_text_field_2'],'discount_4'=> $options['hub_text_field_3']);
wp_localize_script( 'discount_vars', 'discount', $discount );
// The script can be enqueued now or later.
wp_enqueue_script( 'discount_vars' );
?>
scripts.js
alert(discount.discount1); // Will output the 1st textfield option saved in the WP admin custom options page
<?php
function register_my_setting() {
register_setting( 'my_options_group', 'my_option_name', 'intval' );
}
add_action( 'admin_init', 'register_my_setting' );
?>
<?php
add_action( 'admin_menu', 'hub_add_admin_menu' );
add_action( 'admin_init', 'hub_settings_init' );
function hub_add_admin_menu( ) {
add_menu_page( 'hub', 'Product Settings', 'manage_options', 'hub', 'hub_options_page','dashicons-tag' );
}
function hub_settings_init( ) {
register_setting( 'pluginPage', 'hub_settings' );
add_settings_section(
'hub_pluginPage_section',
__( 'Enter Quantity Discounts', 'wordpress' ),
'hub_settings_section_callback',
'pluginPage'
);
add_settings_field(
'hub_text_field_0',
__( 'Discount Percentage when quantity is 1', 'wordpress' ),
'hub_text_field_0_render',
'pluginPage',
'hub_pluginPage_section'
);
add_settings_field(
'hub_text_field_1',
__( 'Discount Percentage when quantity is 2', 'wordpress' ),
'hub_text_field_1_render',
'pluginPage',
'hub_pluginPage_section'
);
add_settings_field(
'hub_text_field_2',
__( 'Discount Percentage when quantity is 3', 'wordpress' ),
'hub_text_field_2_render',
'pluginPage',
'hub_pluginPage_section'
);
add_settings_field(
'hub_text_field_3',
__( 'Discount Percentage when quantity is 4 or more', 'wordpress' ),
'hub_text_field_3_render',
'pluginPage',
'hub_pluginPage_section'
);
}
function hub_text_field_0_render( ) {
$options = get_option( 'hub_settings' );
?>
<input type='text' name='hub_settings[hub_text_field_0]' value='<?php echo $options['hub_text_field_0']; ?>'>
<?php
}
function hub_text_field_1_render( ) {
$options = get_option( 'hub_settings' );
?>
<input type='text' name='hub_settings[hub_text_field_1]' value='<?php echo $options['hub_text_field_1']; ?>'>
<?php
}
function hub_text_field_2_render( ) {
$options = get_option( 'hub_settings' );
?>
<input type='text' name='hub_settings[hub_text_field_2]' value='<?php echo $options['hub_text_field_2']; ?>'>
<?php
}
function hub_text_field_3_render( ) {
$options = get_option( 'hub_settings' );
?>
<input type='text' name='hub_settings[hub_text_field_3]' value='<?php echo $options['hub_text_field_3']; ?>'>
<?php
}
function hub_settings_section_callback( ) {
echo __( 'The Discount Amount for each quantity', 'wordpress' );
}
function hub_options_page( ) {
?>
<form action='options.php' method='post'>
<h2>Product Discounts</h2>
<?php
settings_fields( 'pluginPage' );
do_settings_sections( 'pluginPage' );
submit_button();
?>
</form>
<?php
}
?>