Dynamic JavaScript with PHP

Early this morning, I released Top 10 – A Page Counter and Popular Posts plugin for WordPress. I detailed my experience while designing this plugin. The major problem that I faced while working with this plugin was with WP Super Cache. WP Super Cache creates a static file of your post and displays this to the viewer. As a result, any PHP code that is present in your WordPress blog template is executed only once and the cached file is then served to your visitor.

The initial version of Top 10 used PHP to record the page views as well as display them and so using WP Super Cache ensured that both of these would never increment.

This is where JavaScript with PHP comes in. I ended up using AJAX to record the page views. However, for displaying the count I chose to do so by serving the PHP file as a JavaScript file.

Here’s how you go about it.

Normal JavaScript Usage

The normal method of including a JavaScript file is:

<script type="text/javascript" src="top-10-counter.js"></script>

JavaScript with PHP

The good part about JavaScript is that you don’t need to include a file that ends in the .js extension. Which means you can even include a PHP file. e.g.

<script type="text/javascript" src="top-10-counter.js.php"></script>

Note how I added the extension .php to the original file name. You don’t need to keep the .js part. However, I like to do so to indicate that my PHP file will be served as JavaScript.

Here’s the contents of a sample PHP file used as JavaScript

<?php
Header("content-type: application/x-javascript");
function tptn_disp_date() {
echo 'document.write("The date is: ". date("Y-m-d"))';
}
}
tptn_disp_date();
?>

The most important part of the file is:

Header("content-type: application/x-javascript");

This bit of code tells the server that this PHP file needs to be processed as a JavaScript file.

The file does nothing other than print the date on the screen. You don’t even need the function for this. However, it serves as a basic structure we can build upon.

Using Parameters

Now, why would you use PHP if you couldn’t pass parameters. e.g. take a look at this code:

<script type="text/javascript" src="top-10-counter.js.php?id=1302"></script>

We’ve passed a parameter id=1302 to our PHP file. Within the PHP file we will need to capture the parameter. Let’s take a look at the modified PHP file.

<?php
Header("content-type: application/x-javascript");

function tptn_disp_date() {
$id = intval($_GET['id']);
echo 'document.write("The date is: ". date("Y-m-d"))';
echo 'document.write("The date is: ". $id)';
}
}
tptn_disp_date();
?>

We use $_GET to retrieve the parameter id. You can pass multiple parameters to the PHP file.

If you’re interested in live code then download Top 10 and take a look at the source code.

3 Responses to “Dynamic JavaScript with PHP”

  1. Milo says:

    Hi,

    nice tutorial. Is this possible?

    in all my posts I have custom fields “lat” for latitude and “long” for longitude so that I could geotag my articles. I am creating a page that automates plotting all this locations in a google map. I created a custom template map.php and there I loop through the posts and am able to get these coordinates. I was wondering could I access these objects from the javascript php? I will call a .js.php file and that file loops through all the posts and gets the coordinates.. I can’t seem to access the posts objects inside the javascript file. i just might be missing something out or maybe this is not possible?

    thanks,
    milo

  2. Ajay says:

    The idea behind using the JS with PHP is to bypass caching plugins.

    The main difference when you want to use a PHP file as a JS is the PHP should be made to write the output as Javascript (see the document.write) section above.

  3. Ted Avery says:

    Works great, thanks a lot!

Leave a Reply

%d bloggers like this: