I want to share a WordPress function with you and it’s freaking awesome!
Are you ready?
It’s called wp_localize_script() and it passes variables from PHP to jQuery.
I know, I know… I almost wet myself with excitement too when first I heard about it.
These are two of the most popular web languages ATM.
Of course these are all different programming languages and as you would expect, there’s no reason for them to work together at a development level.
This is called scope.
Scope defines the boundary where your data and variables will work in and there’s different levels of scope even within the same programming language. We’re not going there.
They don’t even acknowledge each others presence.
Here’s how to do just that.
Passing Variables Between Languages
First we create our test jQuery script file called lc-jquery.js. I keep this in a js folder inside our current theme.
Pretty simple stuff here.
We’re detecting a click on a link and displaying an alert box showing the undefined variable lc_jqpost_info.
Hang on – where did lc_jqpost_info come from?
Patience my young padawan.
We’ve created a test page on WordPress and added the following link on it with the #clickme ID so that we can hook our jQuery code to it.<a id=”clickme” href=”#”>Show me stuff</a>
Now we need to load jQuery the script into WordPress and the proper way of doing that is using the wp_enqueue_script() function.
Copy the following code into your functions.php file.
You’ll need to adjust the location for your script file if you haven’t placed it in the same place as this example.
If you reload your test page and click on the link you’ll find, in the inspect element window of the Chrome debugger, that there’s a jQuery error as the script can’t find the variable lc_jqpost_info.
This tells us two things.
1. That the script is loading in correctly
2. That we now have to do something about the lc_jqpost_info variable expected by the script.
Now we have to sort out that variable and pass some PHP information to jQuery
Passing PHP Info to jQuery
Finally, we’re here and about to use the awesome power of wp_localize_script().
Replace the lc_load_query() code you just put in your functions.php file with the following:
We’ve added three of lines to the code.
Line 4 makes the $post variable accessible to our code.
Line 5 creates an array variable called $data and fills it with the items somestring, post_id and post_title.
somestring is just a standard string, post_id contains the Post ID of the current WordPress post (in this case the page with our test link on it) and post_title contains the Title of the same page.
Line 6 is where the magic happens and wp_localize_script() passes the array $data to the object lc_jqpost_info for the script lcjquerytest we just enqueued.
So just to be clear, the first parameter is the same name as your jQuery script you enqueued. The second parameter is the name of the new object you want to be available to the jQuery code. The third parameter is the name of the array we created in PHP to contain the data we want to pass onto the jQuery script.
Save everything, refresh your test page and click on that link.
You should see an alert dialogue box containing the PHP information passed onto the jQuery script.