Communication between PHP and JavaScript

While developing a WordPress theme there are numerous occasions when you will need to communicate between PHP and jQuery (JavaScript). The concept may seam hard but it is really an easy process. To pass a variable from PHP to JS you will use the same approach as with passing a PHP variable to CSS. First I will show you how to pass a simple variable and then we will try to pass an Array.

Let’s Do This

Most WordPress themes have custom admin panels, where people can customize their theme. Probably you will need to pass variables from the Admin panel to other sections of your theme. Maybe you will need to use them just in the PHP, but you can have an effect type settings for the awesome Nivo Slider inside your panel. After user sets up the slider inside the admin panel you need to somehow pass the values to jQuery.

Passing the Variable

I have my variable inside the PHP file, it is called $effect. Look at the code below:

<script type="text/javascript">
	jQuery(document).ready(function($) {
			effect: '<?php echo esc_attr($effect); ?>'

First I have added the script tag to embed the jQuery code inside the PHP code, inside the script tag there is the jQuery ready() function – I am using it so the code will not be run before the DOM is fully loaded. #slider_wrapper is my div which holds the Nivo Slider, so we assign the nivoSlider function to it and then as a parameter we pass the $effect value. The apostrophes around the PHP tags are very important without them the code won’t work!

As you can see this is very simple all you need to really do is echo your variable (I have used esc_attr() to escape all of the ampersand, quotes and other unwanted stuff).

Passing Arrays

I will show you how to pass a two dimensional array from PHP to JS. The array is called $slides_data and contains some information about slides. The first dimension defines the slide ID the second name of the property. Below you can see the structure of the Array:

$slides_data[$post->ID]['id'] = $post->ID;											
$slides_data[$post->ID]['noise'] = 'true';
$slides_data[$post->ID]['rays'] = 'true';
$slides_data[$post->ID]['background'] = '#FFFFFF';

To pass this array to JavaScript first I have created an array inside JS with the same length as the PHP array, to do this I used the PHP count function (this code should be placed inside the script tags):

var slides_data = new Array(<?php echo count($slides_data); ?>);

At this point we have array with one dimension which is empty, not impressive but we will get there ;) Now we will make a PHP loop, which will go through all of the elements and pass them to JS.

<?php foreach($slides_data as $slide) { ?>
	slides_data[<?php echo $slide['id']; ?>] = new Array(3);
	slides_data[<?php echo $slide['id']; ?>][0] = '<?php echo $slide['background'] ?>';
	slides_data[<?php echo $slide['id']; ?>][1] = '<?php echo $slide['noise'] ?>';
	slides_data[<?php echo $slide['id']; ?>][2] = '<?php echo $slide['rays'] ?>';
<?php }?>

For each element of $slide_data we are creating new array (that way we will get two dimentions), after that we are assigning the values from php array to js array. Passing array is not very different from passing a simple variable, thats it folks.

I hope you had a good read and that I was able to help you in some way.

Related Posts

About the Author: Kuba Gaj

Hi, my name is Kuba and I am the founder of massiveProCreation. I am interested in almost everything that is connected to technology (specially Adobe Flash). If you have any questions or suggestions please feel free to contact me :)

7 Comments + Add Comment

  • Well, it’s much better to use json_encode inside JS. It will convert passed variable to JSON which is well supported by JS :)

  • @radoslaw is right. this is useless. just do:
    var slides_data = ;

    you can also use ajax to get a json response. json_encode() is your friend

  • To make it less confusing and significantly less scientific – even though light is refracted, transmitted, scattered or mirrored, light waves journey more or less horizontal or vertical. It orients from a single axis which is reported to be polarization. Sunglasses with polarizing influence performs the very same way like a venetian blind blocking the sunlight from the window. oakley oil rig sunglasses

  • Buy Burberry Bags look way improved than the originals.

  • I hear this most frequently from salespeople. During late pregnancy, edema of feet and legs are more serious, even it will be difficult to balance when walking.. Wait, how would your sneaker have been obtained whether it experienced looked a lttle bit in a different way? Judge for yourself, once we have a survey the first Nike Atmosphere Foamposite One Galaxy test, the one which Gentry Humphrey wore that incited all this buzz and also expectancy to start with. I took a lot of really cool photos. jordan heels

  • I am extremely impressed with the particular view point. Thanks for sharing such useful information as part of your blog. A great content when getting the proper information the subject.

  • It’s going to be finish of mine day, however before finish I am reading this impressive post to improve my know-how.

Leave a comment

Become an Author

We are looking for Authors, if you have a Flash (or related) knowledge and you want to share it with the community on our blog please contact us.