How To Mix And Include PHP in JavaScript Files

Introduction To PHP In JavaScript

PHP in JavascriptOne crucial part of developing a plugin or a theme is the ability to control the scripts that you use based on your needs. Sometimes you may need to get some tough information for a certain if statement, which you can’t easily get by using JavaScript. Some of this information might be the status of certain sessions, or information from a database. By following this tutorial, you will learn how to use PHP in JavaScript files. This means that getting that tough information now becomes a lot easier.

How To Mix PHP In JavaScript

Let’s dive right into it! To begin find a JavaScript file that you would like to manipulate using php. The file should end with .js. Now create a new, blank php file and give the new file the same name as the JavaScript file. Next, open the JavaScript file, copy all of the code that is inside it, and paste that code inside the php file. Now paste the following code block before the code you pasted from the JavaScript file:

<?php header("Content-Type: text/javascript"); ?>

In conclusion, the code you just pasted will be at the very top of the page and the code you copied from the JavaScript file will be right under it.

Including the new file in your site is also, quite simple. Start by finding the place where you included the JavaScript file, it should look something like this (the name of my JavaScript file is loader) :

<script type="text/javascript" src="scripts/loader.js"></script>

What you need to do is change the file extension of the included script to .php from .js. Your new code should look like this:

<script type="text/javascript" src="scripts/loader.php"></script>

Sometimes, you might need to take a value from a php variable, and insert it into a JavaScript variable. The following code block takes the value of the php variable, amount and inserts it into the JavaScript variable, myvar:

<?php $amount = 42; ?>

var myvar = <?php echo json_encode($amount); ?>;

The json_encode function gets the value of the amount variable as a parameter, and returns that value in a way that JavaScript can understand. Then the new value is printed onto the page, using php’s echo command.

Now you are free to mix php in JavaScript. Just make sure that you include the opening php tags before you use php code, and the closing php tags when you finish. I mixed php in JavaScript when I created my most recent WordPress plugin which displays a list of the site’s recent posts using AJAX. The following code block contains one of the functions I created, which used the php and JavaScript mix (note that it also uses jQuery). Use this code block as an example, just to be sure you understood this tutorial correctly.

$amount = 4;
$size = 48;
header("Content-Type: text/javascript");

function arp_populateblock(i,data) {
var holder = i + 1;
var divname = "#arp_block" + holder;
($(divname).data()).arpid = data[i].id;
$(divname + " .arp_content_container p").html("");
$(divname + " a").attr("href",data[i].plink);
$(divname + " .arp_title").html(data[i].title);
if (data[i].image != null) {
$(divname + " .arp_content_container p").append("<img class=\"arp_img\" width=\"<?php echo $size; ?>\" height=\"<?php echo $size; ?>\" src=\"" + data[i].image + "\" alt=" + data[i].title + " />");
$(divname + " .arp_content_container p").append(data[i].content);

I hope this tutorial helped you! If you have any questions, make sure to leave them in the comments.

Thanks for reading!

Setup a Professional WordPress Contact Form For Free!


When I was setting up my site for the first time, one of the first things I looked for was a WordPress contact form plugin. To me, contact forms are a must in all sites. If I want to quickly get in touch with a webmaster, I always search for a contact form. I do this simply because I don’t need to open up my email client, or try to find the webmaster’s email. The only thing I have to do is just fill up the form and hit submit. Contact forms just make it easy for your users to get a hold of you.

Finding The Correct WordPress Contact Form Plugin

One of the things I like about WordPress is that it has a massive plugin directory. If you are a looking for an extension for you site, there is probably a plugin for it, maybe even more than one. Most of the times I can find what I want, but sometimes it can get tricky picking the correct plugin. There can be multiple plugins that accomplish the same task in the WordPress plugin directory, but not all of them match your needs. One plugin may have too few options, and another can be too complicated to use. Another issue is that some plugins might not match the look and feel of your site, so they look a bit out of place. Looking for a good WordPress contact form plugin for your WordPress site may become a difficult task, since there are so many contact form plugins.

To save you all the trouble of downloading, installing, and testing multiple WordPress contact form plugins, I decided to write this tip and recommend the WordPress contact form plugin I use. The WordPress contact form plugin I found seems quite good and it is really easy to use.

Meet Contact Form 7

Contact Form 7 is my favorite WordPress contact form plugin. It is easy to use, gets the job done, and looks professional on any site. Contact Form 7 supports AJAX submitting, which means your users will never see a blank white page while sending their contact request. The plugin also has over 11 million downloads in the WordPress plugin directory. Grab your copy from here or visit the official Contact Form 7 Site. This plugin is highly recommend, and not only by me. I use contact form 7 in the contact page of this site, check it out.

Check out these two images of plugin:

I wanted to recommend this contact form plugin because I think it is simply the best there is for the price (free). I use this plugin in all of my sites, and it never let me down. I hope you had a fun read, and that I helped you find a WordPress contact form plugin that works well for you. Good luck!

Thanks for reading!

WordPress Image Carousel

Add a Beautiful WordPress Image Carousel To Your Site

WordPress Image Carousel

WordPress Image CarouselWordPress Image Carousel (WPIC) lets you create image carousels by using a shortcode.

WPIC includes an options panel which lets you add default settings to your shortcode for easier and even quicker use.


  • 10 different button colors
  • Highly customizable
  • Shortcode
  • Lightweight
  • Can be integreated with any site
  • Hackable
  • WordPress Image Carousel Shortcode
  • Active support through the wordpress forums

This plugin utilizes the jquery plugin jcarousel lite to create the image carousels. This plugin also makes a call to the google scripts api to get jquery instead of load it from your site. This makes the plugin load faster on your pages and consume less bandwidth.

The following video is a demo of WPIC. The demo shows how default settings are used and how the carousel can be created.

How to Install WordPress Image Carousel

The automatic plugin installer should work for most people. Manual installation is easy and takes fewer than five minutes.

1. Download the plugin, unpack it and upload the ‘wpic‘ folder to your wp-content/plugins directory.
2. Activate the plugin through the ‘Plugins’ menu in WordPress.
3. Go to Settings -> WPIC Options to configure the default options.

Now for the real question, how do I use this plugin?

First of all go to the plugin’s options panel, and set up your default settings. Then copy the shortcode displayed at the top of the options page to your page/post. Click between the begging of the shortcode, and the end of it which will place your cursor at the following position:

[ wpic]SOMEWHERE HERE![/ wpic]

Then click on the “Add Media” button and select the images that you want the carousel to display by holding the control key,and click on the images. Now take a look at the size of your images in the bottom-right corner. Make sure you select the same size for each image you would like to display.Take note of the this size. Hit the insert into post button, and wait for the images to display. As a reminder, the images should display “inside” the shortocde,between the end and the beginning. Take a look at the image you added, and between each image add the following two characters:
`/!` (leading slash and exclamation mark). Do not add the two characters before the first image, or after the last image. Take a look at the screenshots,to get a picture of what you have to do. You can edit the shortcode settings like changing the color of the buttons,or the speeds. Next, update the width and height settings of the shortcode so that they would match the dimensions of your images (the one we took note of earlier). If the dimensions of the images are the same dimensions you entered in the default plugin settings, then delete the width and height shortcode settings. (If you are having troubles with this part, do not hesitate to ask on the forums). Everything should be set, try publishing the post/page and viewing it. If everything worked, then great! If not, re-read these steps, take a look at the screenshots, or ask on the forums. We are going to try to replay as fast as possible.

If you need ANY help with this plugin, please post a question in the plugin’s forum so that I can help you. We are not going to create a plugin, just so that it could sit there with no support. So please, if you ever need any help with this plugin, create a thread in the forums.

WordPress Image Carousel Screenshots

Download WordPress Image Carousel

Click here to download WordPress Image Carousel (WPIC) from the WordPress plugin respiratory.