The use of JavaScript in WordPress is a bit of a grey area for some. More advanced users of course know that JavaScript can and is normally used in themes, child themes and template files. We will touch on that in this tutorial and also cover the more uncertain techniques of using JavaScript in posts and pages. Some say it can’t be done. Some people say to use a plug-in and others just don’t know. I will discover a technique that does work for including some JavaScripts in posts and pages. the technique is meant to be used sparingly, but it is a good solution for people who don’t really want to get into making their own templates, themes or child themes just to include some JavaScript in their WordPress blog.
How to use a JavaScript Plugin
HTML JavaScript Adder is one WordPress plugin targeted at people who have a need to include more complex JavaScript’s in their WordPress blog. This plugin is for including HTML, JavaScript, Flash and shortcodes within the sidebar of your blog, so may not be perfect if you need it for the main content area. Some practical uses of the HTML JavaScript Adder plug-in include:
- Advertisements from such companies as Add Bright, Adsense and Buysellads.
- Embedding flash – for example: YouTube videos, Video players and games.
- Installing shortcodes.
- Share Icons/widgets such as facebook, linkedin, twitter, etc.
You can try pretty much any Javascript, Flash or HTML snippet with the plugin and most should work in your sidebar. Of course I haven’t tested it with every type, so feel free to experiment and let us know. you can get the HTML JavaScript Adder plugin free of charge from http://wordpress.org/extend/plugins/html-javascript-adder/.
Inline JavaScript Plugin
The Inline JavaScript plugin is the name of another plugin specially developed for using JavaScript in WordPress. The Inline JavaScript plug-in has one major advantage over the HTML JavaScript Adder from above. It allows you to place JavaScript directly in both posts and pages via the WYSIWYG editor. You are not restricted to sidebars as with the previous example. Some of the things the Inline JavaScript plug-in could be used for are:
- Including almost any dynamic JavaScript code in the midst of a post or page.
- Making use of built-in JavaScript functions, variables and attributes without hard coding into a template or theme.
- Printing dynamic content to the screen such as dates, times, user names, etc.
Just about any inline JavaScript code you can come up with is likely to work with this plugin, but it’s not meant for really long scripts and some scripts designed to be in the head section of an HTML page.
This is an easy to use plug-in with common install instructions and very easy operating instructions. Basically all you do is install the plugin and then insert your JavaScript between inline tags as in the following example:
Do you want to try it for yourself? Simply go to http://www.ooso.net/inline-js and download it. It doesn’t get much easier than that and using the tags like above.
Inserting JavaScript Without a Plugin
Now as controversial as including JavaScript in a post or page without using a plug-in is, it actually can be done in many cases. Some code will not work because the WordPress WYSIWYG editor will tear it to shreds, but if it’s done right and within reason, it is very possible. One trick I have learned over the years while working with WordPress is that if you don’t go back and forth from the WYSIWYG view to the HTML view, it often won’t mess up your code, but that is not always practical and it usually means you have to use only the HTML view and if you even switch to the WYSIWYG view, it destroys your JavaScript code. You can also go to your WordPress dashboard and turn off the rich text editor by going to Users then Personal Options. That’s just a tip in case you are desperate enough to try code that really isn’t supposed to work in WordPress.
Codex Caution
Back to using JavaScript in posts without a plugin, it even says in the WordPress Codex that it can be done, so lets discuss how. The codex does caution you to use this method sparingly however, so if you have more than a few lines, it’s not recommended to use this method. If you just have to print a line to the page from a variable or something similarly simple, then this method should work fine in most cases. Here are the steps you want to take to include JavaScript in a post or page:
1. Wrap Everything in Functions
First wrap everything in functions. If you have to use more than one or two functions, then you probably want to consider an alternative method for employing the scripts in your posts or pages such as a template file or child theme. More advanced users will more likely chose those alternative methods most of the time anyway.
2. Place Function into JavaScrtipt File
Second, place your one or two short JavaScript functions into an external JavaScript file. Upload your script with your functions in it to a scripts directory in your main WordPress directory. That will be the same directory that holds the wp-content and wp-admin folders among other stuff. If you don’t have a scripts directory, create one there.
Insert the code to include the JavaScript file in the spot where you want to call the JavaScript from within your post or page like this:
Finally insert the function call on the next line in your post or page. It should look something like this:
Now that’s pretty simple, but beware, it doesn’t always work. The simpler the code, the better chance you have, but if you want to avoid problems and you are a little more on the advanced side of coding, just use a child theme, thats what I would normally do. It only takes a few minutes to figure out if you have enough knowledge of PHP, JavaScript and HTML to understand the code. In fact, read my other tutorial right here on WPHub about child themes and it will guide you through the process rather quickly!
Summary
That’s it! I hope this short JavaScript guide for WordPress helps you to understand the ins and outs of using JavaScript. Yes, it’s true that WordPress isn’t very friendly to the non-coder for using JavaScript snippets in posts, you will have to use some workarounds as I have explained above, but for the determined beginner it shouldn’t be impossible and for the advanced user, it should be a breeze. Good luck with your WordPress project and including JavaScript in your next post or page.
