How to use PHP variables on Javascript in WordPress

How to use PHP variables on Javascript in WordPress

Hello There!

Today I was developing a WordPress plugin where I needed to adapt a jQuery plugin, in which its options (usually editable directly in the JS file) should be edited through the WordPress Dashboard, so that the user could customize it.

So far so good, I have created a page of options in the plugin and the fields for editing the options, which are transformed into PHP variables when the user edits them. For example:

$myOption ='Option Data Here.'; 

But how do you turn these PHP variables into a JS Variable in WordPress? It’s easy…

Using the wp_localize_script

WordPress offers the wp_localize_script() function. It’s is a great function that renders your PHP variable as a javascript object when the HTML template is rendered.┬áIt is very useful to pass PHP data to Javascript, and also to allow the texts within the JS file to be translated. To use it is very simple:

 

Step 1: Register and Enqueue your Javascript Files

You can use the snippet below to enqueue the javascript files and create the variables he variables that will be passed to the JS file

/*
*
* Enqueue and Localize Script by WpPug (wppug.com)
*
*/
function js_enqueue_scripts() {
 

    //Put your variables inside a array
    $arrayname = array(
	    "option_1" => "value_1", 
	    "option_2" => __( 'Hello, dear user!', 'my-text-domain' ); //translatable text
	);
 
    //Register Script
    wp_register_script( "scriptname", plugin_dir_url( __FILE__ ) . "/scripts.js" );
    
    //Load the Script on Front-End
    wp_enqueue_script( "scriptname" );

    //Localize script and pass the Data
    wp_localize_script( "scriptname", "scriptprefix", $arrayname );

 
}

//Works function on wp_enqueue_scripts Hook
add_action( "wp_enqueue_scripts", "js_enqueue_scripts" );

 

Step 2: Get the WordPress PHP data on Javascript File

The page rendered with the JS file will contain the following information:

<!-- page HTML -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%2F*%20%3C!%5BCDATA%5B%20*%2F%20var%20scriptprefix%20%3D%20%7B%22option_1%22%3A%22value_1%22%2C%22option_2%22%3A%22Hello%2C%20dear%20user!%22%7D%3B%20%2F*%20%5D%5D%3E%20*%2F%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

To access the data and use it in your JS file is easy, just use the prefix + variable, as in the example below:

alert(scriptprefix.option_1);

Below is a practical example, applied the options of a jQuery plugin:


$('#elementID').functionName({
 items: scriptprefix.option_1,
 message: scriptprefix.option_2,
}); 

It’s very easy and a great way to interact with PHP with JS!

One thought on “How to use PHP variables on Javascript in WordPress

Leave a Reply

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