Use of wp_localize_script

One of the difficulties you will run into when producing for WordPress is figuring out how to make your information (which is gotten to by means of PHP) accessible to your contents. For instance, you may have a popup notice that is shown when somebody clicks a catch. The message in this popup, to be translatable, should be characterized by means of PHP. The inquiry at that point, is how would you get it into your jQuery? The appropriate response is with the really great wp_localize_script() work.

The essence of the capacity is that it permits you to take information from PHP and make it accessible to your Javascript file.

We should take the model I referenced a second prior, with the popup alarm, and perceive how we can utilize wp_localize_script().

Since we are stacking our contents accurately, we are utilizing wp_enqueue_script() to stack our jQuery:

<?php
function tct_load_scripts() {		
	wp_enqueue_script('tct-script', plugin_dir_url( __FILE__ ) . 'js/tct-script.js');
}
add_action('wp_enqueue_scripts', 'tct_load_scripts');

The utilization of wp_enqueue_script() or wp_register_script() is needed for wp_localize_script() to work.

Our model jQuery document resembles this:

jQuery(document).read(function($) {
	$('#pw_button').on('click', function() {
		alert('Hey! You have clicked the button!');
	});
});

These two code bits accept that we have an HTML button someplace on our page with an ID of “pw_button”. At the point when that catch is clicked, a javascript alert is shown, similar to the one beneath:

The issue that we have here is that our content, “Hello! You have tapped the catch!”, is hardcoded into our jQuery. For what reason is this awful? It’s awful on the grounds that it can’t be interpreted, yet we can get around this by utilizing wp_localize_script().

Utilization of the capacity is entirely basic. Here is our PHP code:

<?php
function tct_load_scripts() { 
	wp_enqueue_script('tct-script', plugin_dir_url( __FILE__ ) . 'js/tct-script.js');
	wp_localize_script('tct-script', 'tct_script_vars', array(
			'alert' => __('Hey! You have clicked the button!', 'pippin')
		)
	); 
}
add_action('wp_enqueue_scripts', 'tct_load_scripts');

The principal work boundary is the handle of our Javascript record, which is equivalent to the primary boundary in our wp_enqueue_script() work.

The capacity will make an item that is available from our Javascript The name of this article is the subsequent boundary, tct_script_vars

The third capacity boundary is a variety of factors to pass to our content. Each key in the cluster will be set up as a thing in our Javascript object. For this situation, I have just passed one cluster key, so we will have only one choice, however, you can have the same number of as you need. Every factor will be available like this:

tct_script_vars.VARIABLE_NAME

Our ready content is open this way:

tct_script_vars.alert

On the off chance that this doesn’t bode well, perused only somewhat further and it will.

Beforehand, in our jQuery, we hardcoded the alarm message, however now we can simply pass our limited variable, as so:

jQuery(document).read(function($) {
	$('#pw_button').on('click', function() {
		alert( tct_script_vars.alert );
	});
});

That is incredibly cool if you were to ask me.

Presently, shouldn’t something be said about various factors? suppose, for a second, that our jQuery contains two alarms, one for each catch that is squeezed. Since we have two catches, we need to have two messages, and wp_localize_script() makes this simple:

<?php
function tct_load_scripts() {
 
	wp_enqueue_script('tct-script', plugin_dir_url( __FILE__ ) . 'js/tct-script.js');
	wp_localize_script('tct-script', 'tct_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', 'tct_load_scripts');

Our refreshed jQuery now resembles this:

jQuery(document).read(function($) {
 
	$('#pw_button').on('click', function() {
		alert( tct_script_vars.alert );
	});
 
	$('#pw_button_2').on('click', function() {
		alert( tct_script_vars.message );
	});
 
});