Javascript will work within WordPress and Using Javascript in WordPress

Javascript will work within WordPress. If used within the template files, most Javascript will work fine. Using them within a post is another matter, though.

Once you enter the world of PHP, it is really hard to go back to using Javascript, but they still serve their purpose. If you can replace a Javascript with PHP code, tags, or script in WordPress, do so. Your life will be much easier. If not, here are a few tips to make your Javascript work in WordPress.
Javascript in Template Files

This page is somewhat misleading. See this function’s page for better info:

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

And here are some good tutorials:

http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

http://digwp.com/2009/06/use-google-hosted-javascript-libraries-still-the-right-way/

To use Javascript repeatedly within your site, you can either set the call for the Javascript, or the script itself, in the head of your header.php template file, between the meta tags and the style sheet link, no differently than you would if you were using Javascript in any HTML page. To “load” the Javascript file into your site, in the head, add something like this:

If your custom Javascript isn’t working after including the previous line of code in your header.php template file, use the following line of code.

<script type="text/javascript" src="/pathto/yourscript.js”>

Include the leading forward slash “/” even if your file is located in the root of your theme.

Be sure that you define the type correctly, as your site will not validate without it.

In the spot where you wish to use the Javascript, set the call for the Javascript. For example, you are using a Javascript that sets a link for users to “email this page” to a friend and you want it to be under the post title. It might look like this:

<a href="” rel=”bookmark”>

Javascript in Posts

To use Javascript inside of posts in WordPress, you need to take a few more steps. Odds are that this usage is for one or only a few instances, so adding the script to the header would be unnecessary.

For the occasional or one time use of Javascript, you need to put the script into a Javascript file and then call it out from within the post. Make sure that each script is defined by its function name such as:

function updatepage(){var m=”Page updated “+document.lastMo…….}

To include a Javascript inside a post, you need to combine both the call to the script file with the call to the Javascript itself.

If the src attribute of your javascript tag is being stripped out you need to turn off the rich editor (from the dashboard go to Users > Personal Options). If you are using the rich editor the javascript tag’s src attribute may be stripped out even when manually editing in the HTML popup window.
Creating a Multiple Script File

You might have a collection of scripts that you call from time to time, like a scripts which calculate time zones or distance, or maybe scripts that create some effect or accent on your page. For recurring Javascripts, consider grouping them together into one file.

For this example, name the group Javascripts file scriptfile.js (choose whatever you want) and say it contains the updatepage, emailpage, and caltimezone scripts. As you copy each Javascript into the file, make sure it has a unique function name such as with this condensed version:

function updatepage() {var m=”Page updated “+document.lastMo…….}
function emailpage() {mail_str = “mailto:?subject=….}
function caltimezone() {var timerID ; function tzone(tz, os, ds, cl) {this.ct =……}

Place the script file of all the Javascripts in the head of the header.php template file between the meta tags and the style sheet link. It will just sit there, loaded into the browser’s memory, waiting for one of the scripts inside to be called.

In the spot in your post where you would like to use the Javascript, call it as follows:

Using Multiple Javascript Files inside one post or page

When using functions lying in multiple Javascript files, write all the Javascript references in the header.php. If you really need to write the script reference in the body of the post or page, make sure that the URL to the javascript file starts with the forward-slash (“/”) which is your webserver’s document root (the “htdocs” directory in the case of Apache webserver). This is called a fixed URL. If you do not specify the starting slash (“/”), it becomes a relative URL (“../../relative/path/to/javacripts/file.js”) and is calculated relative to the current location in the directory structure. If you do this, you will almost surely need to maintain several versions of this reference because different parts of the displayed content are generated from different locations. For example, pages are created from .php template files in the WordPress root directory (note that this is not the webserver’s document root) while posts are created from .php template files in the chosen theme’s directory (“/path-to-wordpress-root/wp-content/themes/yourtheme/partofpost.php”). These are two different paths.
Troubleshooting Javascript

If you are having trouble with including Javascripts inside a post, use the Text Control Plugin which allows you to control on a global or per post basis the ability to turn off WordPress’ automatic formatting features which can quickly turn code into something readable instead of executable. Set the options on the post that you will be using the Javascript on to have No Formatting or Markup or nl2br and No Character Formatting. You may have to experiment to get it to work. As a reminder, when using the Text Control Plugin, you must first Save and Continue Editing the post in order to see the Text Control Plugin options.

If you choose No Formatting, your post’s text will run together, so you will have to add paragraph tags and other HTML tags in order to format your page as WordPress normally does that for you.

If your Javascript does not work, triple check that you have not made any errors during the cut and paste into a group or single file. Be sure you used a text editor and not a word processing program to create the Javascript file. Check the name of the function in the script file as well as on your site. Not all Javascripts may work, and could possibly conflict with your PHP commands, but this is very rare.

Using Javascript in WordPress

Once you enter the world of PHP, it’s really hard to go back to Javascripts, but they still serve their purpose. If you can replace a Javascript with PHP code, tags, or script in WordPress, do so. Your life will be much easier. If not, here are a few tips to make your Javascript work in WordPress.

You can only use Javascript in full different versions of WordPress. WordPressMU driven sites like wordpress.com have set the tag filter to strip out all use of javascripts in posts, along with all CSS styles and many HTML tags for “security reasons”. You can therefore only use Javascript in the full version of WordPress, from within the posts and template files.
Using Javascript in WordPress Template Files

A lot of people want to put clocks, forms, calculations, and other widgets and gadgets driven by Javascript on their WordPress full version site. While I recommend you try to find a PHP script or Plugin replacement for the Javascript, you can still use Javascripts in WordPress templates.

If you have a lot of javascripts that you will be using consistently in your WordPress template files, then first try to put all the scripts into one group Javascript file rather than a bunch of small files. Even if you don’t use the scripts for every single page or post on your site, they can still just sit there in the single Javascript file until called.

Make sure that each script is defined by its function name such as:

function updatepage(){var m=”Page updated “+document.lastMo…….}

Let’s assume that you called your group javascripts file scriptfile.js and it contains the updatepage script. When you want to use the example updatepage Javascript in a WordPress template file, add a link to the Javascript file in the header.php between the meta tags and the style sheet link in the head section. Here is an exmaple of what to add for your Javascript file link, changing the name to your script file name:

Be sure that you define the type correctly, as your site will not validate without it.

In the place on your index.php, single.php, sidebar.php, or whichever template file you want to activate the Javascript, place the following code in exactly this format, changing the name to the function call of the script:

Be sure and thoroughly test the generated pages with the script to make sure it works.
To Include Javascript Inside a WordPress Post

WordPressMU and wordpress.com users could include Javascripts inside of posts, but the developers have decided that this poses a security risk and so all javascript and many CSS and HTML tags will be automatically stripped from your post contnet. But you can use this technque within the post of the full version of WordPress.

To include a Javascript inside a post, you need to combine both the call to the script file with the call to the Javascript itself.

If your Javascript doesn’t work, triple check that you haven’t made any errors during the cut and paste into a group or single file. Be sure you used a text editor and not a word processing program to create the Javascript file. Check the name of the function in the script file as well as on your site. Not all javascripts may work, and could possibly conflict with your PHP commands, but this is very rare.

If you are using the full version of WordPress and having trouble with including a lot of javascripts inside a post, try using the Text Control Plugin. This allows you to control WordPress’ automatic formatting features on a global or per post basis the ability, turning them on and off. The WordPress automatic formatting features can quickly turn a code into something readable instead of executable. To use this plugin, the entire post must be setup in HTML tags using paragraph tags and such as they will be turned off by the lack of formatting, and set the plugin options on the post that you will be using the Javascript on to have No Formating and No Character Formating. As a reminder, when using the Text Control Plugin, you must first Save and Continue Editing the post in order to see the Text Control Plugin options. This is only to be used by the brave as it is a lot of extra work.

DO NOT PASTE JAVASCRIPT CODE INTO THE COMMENTS!

They will be stripped automatically by WordPress.com. The issue to solving your problems with using Javascript inside of a post of Page in WordPress is not the Javascript code itself. Showing it to me won’t help anyone. The problem is with WordPress. You MUST follow the instructions above to the exact letter. Then it will work. Javascripts will not work in WordPress.com blogs, no matter what you do.