Pass PHP values to a JavaScript file in WordPress

In order to pass PHP values to a JavaScript file in WordPress you have to make use of the wp_localize_script function. Before you can use the wp_localize_script function to access your localized JavaScript variables, you need to first register the script and then enqueue the script.

Step 1: Register WordPress JavaScript File

You need to open the class-plugin-name-admin.php file in your admin directory. Then, copy the function below and paste it in your enqueue_scripts function

Again, we’re using the WordPress Plugin Boilerplate framework for building our plugins. If you want to learn more about this set up check out our post introducing working with the WordPress Plugin Boilerplate.

wp_register_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/plugin-name-admin.js', array(), $this->version, false );

If your script is dependent on jQuery, you would want to adjust the parameters to look like the following:

wp_register_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/plugin-name-admin.js', array( 'jquery' ), $this->version, false );

Step 2: Enqueue WordPress JavaScript File

Next, you need to run the wp_enqueue_script function in the enqueue_scripts method.

wp_enqueue_script( $this->plugin_name);

Step 3: Create PHP variables to Pass to JavaScript File

Create the add_something_nonce and the user_id variables in your enqueue_script method, because we want to pass the current user’s id and the add_something nonce to our JavaScript file.

 $add_something_nonce = wp_create_nonce( "add_something" );
 $user_id = get_current_user_id();

Step 4: Run wp_localize_script

We’ve finally reached the meat and potatoes of the post, the wp_localize_script function. We will add this to our enqueue_scripts method. The first parameter has to be associated with the script that you registered above, the plugin_name property in our case; this sets the JavaScript file to pass the variables to. The second parameter sets the name of the JavaScript variable that contains the variable values. The third parameter is an array of variable values to pass to the JavaScript file.

wp_localize_script( $this->plugin_name, 'plugin_name_ajax_object', 
		  	array( 
				'ajax_url' => admin_url( 'admin-ajax.php' ),
				'add_something_nonce'=> $add_something_nonce,
				'user_id' => $user_id
			) 
		  );

When you combine all of these steps together, your full enqueue_scripts method will look like the following:

public function enqueue_scripts() {

		/**
		 * This function is provided for demonstration purposes only.
		 *
		 * An instance of this class should be passed to the run() function
		 * defined in Migrate_Loader as all of the hooks are defined
		 * in that particular class.
		 *
		 * The Migrate_Loader will then create the relationship
		 * between the defined hooks and the functions defined in this
		 * class.
		 */
	  wp_register_script( $this->plugin_name, plugin_dir_url( __FILE__ ) . 'js/plugin-name-admin.js', array( 'jquery' ), $this->version, false );	  
    	  wp_enqueue_script( $this->plugin_name);
		  // Set Nonce Values so that the ajax calls are secure
		  $add_something_nonce = wp_create_nonce( "add_something" );
		  
		  $user_id = get_current_user_id();
    	  // pass ajax object to this javascript file
		  // Add nonce values to this object so that we can access them in the plugin-name-admin.js javascript file
		  wp_localize_script( $this->plugin_name, 'plugin_name_ajax_object', 
		  	array( 
				'ajax_url' => admin_url( 'admin-ajax.php' ),
				'add_something_nonce'=> $add_something_nonce,
				'user_id' => $user_id
			) 
		  );
}

Step 5: Access Localized Variables in JavaScript File

Open up your plugin-name-admin.js file in your js directory. In this file, you can see the localized variable values with the following code:

(function( $ ) {
	'use strict';
     console.log(plugin_name_ajax_object);
     console.log(plugin_name_ajax_object.ajax_url);
     console.log(plugin_name_ajax_object.user_id);
     console.log(plugin_name_ajax_object.add_something_nonce);
})( jQuery );

Leave a Reply

Your email address will not be published. Required fields are marked *