How to use PHP values in JavaScript file in WordPress

One of the challenges you will run into when developing for WordPress, is finding a way to make your data (which is accessed via PHP) available to your scripts. For example, you might have a popup notification that is displayed when someone clicks a button. The message in this popup, in order to be translatable, should be defined via PHP. The question then, is how do you get it into your jQuery? The answer is with the truly awesome wp_localize_script() function.

The wp_localize_script() was one that escaped me for my initial two long stretches of WordPress improvement. I would see references to it, however, I couldn’t ever make sense of precisely what it did, or how it worked. It wasn’t until the point when I read Michael Martin’s instructional exercise titled Load Next WordPress Posts With AJAX. He was the principal individual I had run over that truly clarified and showed how the capacity functioned, and what it did.

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

How about we take the case I said a minute back, with the popup caution, and perceive how we can utilize wp_localize_script().

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

function prefix_assets() {
	wp_enqueue_script("prefix_myscript", get_theme_file_uri("/assets/js/myscript.js"), array("jquery"), "1.0");
}
add_action('wp_enqueue_scripts', 'prefix_assets');

The use of wp_enqueue_script() or wp_register_script() is required for wp_localize_script() to work.

Our example jQuery file looks like this:

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

These two code scraps expect that we have an HTML catch someplace on our page with an ID of “prefix_button”. At the point when that catch is clicked, a javascript alarm is shown, similar to the one underneath:

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 terrible in light of the fact that it can’t be interpreted, yet we can get around this by utilizing wp_localize_script() .

Use of the capacity is entirely basic. Here is our PHP

function prefix_assets() {
 
	wp_enqueue_script("prefix_myscript", get_theme_file_uri("/assets/js/myscript.js"), array("jquery"), "1.0");
	wp_localize_script('prefix_myscript', 'dynamic_vars', array(
			'alert' => __('Hey! You have clicked the button!', 'domain')
		)
	);
 
}
add_action('wp_enqueue_scripts', 'prefix_assets');

The first parameter of the function is the handle of our enqueued Javascript file, which is the same as the main parameter in our wp_enqueue_script().

The capacity will make a question that is available from our Javascript The name of this object is the second parameter, dynamic_vars

The third parameter is an array with the content generated by PHP. Each key in the array will be used as a method of the object in JS file.

In JS file, you may access that value using this way.

dynamic_vars.array_key

Our ready content is available like this:

dynamic_vars.alert

dynamic php content in javascript How-To wordpress