:WORDPRESS: using-PHP-variables-in-JS (wp localize script)

:WORDPRESS: using-PHP-variables-in-JS.md

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 ); ?> 

1. Register the script
2. Create variables in a (preferably associative) array
3. 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)
4. Enqueue the registered script in step 1
5. 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

options-page-example.php

<?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

}

?>