communication between PHP and JavaScript

While developing a WordPress theme there are various occasions once you can need to communicate between PHP and jQuery (JavaScript). The idea could seam exhausting however it's very an easy method. To pass a variable from PHP to JS you'll use an equivalent approach like passing a PHP variable to CSS. first i'll show you how to pass an easy variable and so we'll try {and} pass an Array.


Most WordPress themes have custom admin panels, wherever individuals can customise their theme. most likely you'll need to pass variables from the Admin panel to alternative sections of your theme. perhaps you'll need to use them simply within the PHP, however you'll have an effect kind settings for the awesome Nivo Slider within your panel. once user sets up the slider within the admin panel you need to somehow pass the values to jQuery.

Passing 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($) {
  $('#slider_wrapper').nivoSlider({
   effect: ''
  });
 });
</script>

First I even have added the script tag to embed the jQuery code within the PHP code, within the script tag there's the jQuery ready() function – i'm using it therefore the code won't be run before the DOM is totally loaded. #slider_wrapper is my div that holds the Nivo Slider, so we assign the nivoSlider operate to that so as a parameter we pass the $effect worth. The apostrophes round the PHP tags area unit important without them the code won’t work!

As you'll see this is very easy all you need to actually do is echo your variable (I have used esc_attr() to flee all of the ampersand, quotes and different unwanted stuff).

Passing array:

I will show you how to pass a two dimensional array from PHP to JS. The array is named $slides_data and contains some data concerning slides. the primary dimension defines the slide ID the second name of the property. Below you'll 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 even have created an array within JS with an equivalent length as the PHP array, to do this I used the PHP count function (this code ought to b placed within the script tags):
var slides_data = new Array( echo count($slides_data); ?>);
At this time we've array with one dimension that is empty, not spectacular however we will get there ;) currently we are going to create a PHP loop, which will undergo all of the elements and pass them to JS.

 foreach($slides_data as $slide) { ?>
 slides_data[ echo $slide['id']; ?>] = new Array(3);
 slides_data[ echo $slide['id']; ?>][0] = ' echo $slide['background'] ?>';
 slides_data[ echo $slide['id']; ?>][1] = ' echo $slide['noise'] ?>';
 slides_data[ echo $slide['id']; ?>][2] = ' echo $slide['rays'] ?>';
 }?>
For each element of $slide_data we are making new array (that approach we will get two dimentions), at that time we are assigning the values from php array to js array. Passing array isn't terribly totally different from passing an easy variable, thats it people.

I hope you had an honest read and that i was able to assist you in some way.