JavaScript will work within WordPress. It can be used within WordPress template files in WordPress Themes or Child Themes. JavaScript cannot be added to post content without a special WordPress Plugin that removes the filters that prevent unwanted code within the post content area, for the protection of the user.
JavaScript in Template Files
The safe and recommended method of adding JavaScript to a WordPress generated page, and WordPress Theme or Plugin, is by using wp_enqueue_script(). This function includes the script if it hasn’t already been included, and safely handles dependencies.
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:
[php]
<script type="text/javascript" src="/scripts/emailpage.js"></script>
[/php]
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.
[php]
<script type="text/javascript" src="<?php bloginfo(‘template_url’); ?>/pathto/yourscript.js"></script>
[/php]
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:
[php]
<h3 class="storytitle">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php the_title(); ?></a>
</h3>
<div class="emailpage">
<script type="text/javascript"><!–//–><![CDATA[//><!–
emailpage();
//–><!]]></script>
</div>
[/php]
Using Multiple JavaScript Files Inside One Post or Page
When using functions laying in multiple JavaScript files, add 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, ensure 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 JavaScript 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 orMarkup 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 JavaScript may work, and could possibly conflict with your PHP commands, but this is very rare.
If you are having trouble with this, the WordPress Support Forum may be able to help.
