You are here: Home / Wordpress Plugins / Allow Javascript (JS) in Posts and Pages

Allow Javascript (JS) in Posts and Pages

Allow Javascript in posts and pages adds full functionality for JavaScript in WordPress posts and pages by adding a simple shortcode [js].code.[/js]

This plugin strips away the automatically generated wordPress <p> and <br/> tags but still allows the addition of your own <p> and <br/> tags

Usage

To add the Javascript code to y our post or page simply place any Javascript code inside the shortcode tags.

For example: a simple alert

[js]
alert('helloWorld');
[/js]
would be executed as
<script type="text/javascript">
	alert('helloWorld');
</script>

This code will cause a popup when the page is loaded

Some Important Notes

This plugin strips away all instances of <p> and <br /> therefore code has been added so that if you wish to use tags in your output (e.g.):

     
[js]
	alert("hello <br /> world");
[/js]

the < and > tags will need to be swapped for [ and ] respectively so <p> becomes [p] and </p> becomes [/p] which is converted back to <p> at runtime. these [ ] work for all tags (p, strong, em etc.).

     
[js]
	alert("hello [br /] world");
[/js]

Tag list

ForWrite as
<p> … </p>[p] … [/p]
<em>…</em>[em]…[/em]
<p style=”> … </p>[p style=''] … [/p]
<u> … </u>[u] … [/u]
<br />

Comments

  1. Thanks for the Allow Javascript (JS) in Posts

  2. Asif Ali says:

    The plugin in not working with my wp version WordPress 3.1.1.

    and also I have to replace with short code or just add the short code like [js][.js]

    Thanks

    Asif Ali

    • Hi Asif,

      To further aid us in finding a solution to your problem, please send us the code you have placed inside the [js][/js].

      You can either leave the code as a comment below, or email me at jamie.fraser@hitreach.co.uk

      Thanks,
      Jamie

      • Asif Ali says:

        I put the following code inside [js][/js] with and without :

        //Presentational Slideshow Script- By Dynamic Drive
        //For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
        //This credit MUST stay intact for legal use

        var slideshow_width=’100px’ //SET SLIDESHOW WIDTH (set to largest image’s width if multiple dimensions exist)
        var slideshow_height=’100px’ //SET SLIDESHOW HEIGHT (set to largest image’s height if multiple dimensions exist)
        var pause=3000 //SET PAUSE BETWEEN SLIDE (2000=2 seconds)
        var slidebgcolor=”white”

        var dropimages=new Array()
        //SET IMAGE PATHS. Extend or contract array as needed
        dropimages[0]=”image1.gif”
        dropimages[1]=”image2.gif”
        dropimages[2]=”image3.gif”

        var droplinks=new Array()
        //SET IMAGE URLs. Use “” if you wish particular image to NOT be linked:
        droplinks[0]=”http://www.yahoo.com”
        droplinks[1]=””
        droplinks[2]=”http://www.google.com”

        ////NO need to edit beyond here/////////////

        var preloadedimages=new Array()
        for (p=0;p<dropimages.length;p++){
        preloadedimages[p]=new Image()
        preloadedimages[p].src=dropimages[p]
        }

        var ie4=document.all
        var dom=document.getElementById

        if (ie4||dom)
        document.write('’)
        else
        document.write(‘‘)

        var curpos=parseInt(slideshow_width)*(-1)
        var degree=10
        var curcanvas=”canvas0″
        var curimageindex=linkindex=0
        var nextimageindex=1

        function movepic(){
        if (curpos<0){
        curpos=Math.min(curpos+degree,0)
        tempobj.style.left=curpos+"px"
        }
        else{

        clearInterval(dropslide)
        nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
        tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
        var slideimage='’
        tempobj.innerHTML=(droplinks[curimageindex]!=””)? ‘‘+slideimage+’‘ : slideimage
        nextimageindex=(nextimageindex<dropimages.length-1)? nextimageindex+1 : 0
        setTimeout("rotateimage()",pause)
        }
        }

        function rotateimage(){
        if (ie4||dom){
        resetit(curcanvas)
        var crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.style.zIndex++
        var temp='setInterval("movepic()",50)'
        dropslide=eval(temp)
        curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
        }
        else
        document.images.defaultslide.src=dropimages[curimageindex]
        linkindex=curimageindex
        curimageindex=(curimageindex<dropimages.length-1)? curimageindex+1 : 0
        }

        function rotatelink(){
        if (droplinks[linkindex]!="")
        window.location=droplinks[linkindex]
        }

        function resetit(what){
        curpos=parseInt(slideshow_width)*(-1)
        var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
        crossobj.style.left=curpos+"px"
        }

        function startit(){
        var crossobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
        crossobj.innerHTML='
        rotateimage()
        }

        if (ie4||dom)
        window.onload=startit
        else
        setInterval(“rotateimage()”,pause)

        • Hi Asif,

          All square brackets must be escaped otherwise they are converted to < and > at run time, All < and > must be changed to square brackets also. this is because the plugin strips out all tags as wordPress inserts random <p> and </p> tags to the code causing it to break.

          The other option is to download our plugin called pure HTML (http://wordpress.org/extend/plugins/pure-html/) which features the ability to save html and javascript as ‘code snippets’ then insert them into posts and pages using a short codes. This removes the requirement to escape and convert tags, so you can just wrap you javascript in <script> tags then save it for use on multiple pages.

          Thanks
          Jamie

  3. Asif Ali says:

    Thank you very much for such a quick reply. You are great! I’ll try that and let you know of the result.

    Thanks and regards,

    Asif Ali

  4. I’m having a little trouble. Do you think you could help me out?

    [js]


    link here

    [p]Content goes here.[/p]

    [/js]

  5. Hi Kyle,

    the [js] [/js] acts like a <script> tag that would normally be used, therefore everything inside the js shortcode must be javascript and only javascript. try removing any html from the tag and try again.

    Thanks
    Jamie

  6. Paul Lucey says:

    Hi,

    I have an external javascript file which I reference from the html in my WordPress post. I’m unsure about what I need to change to get my javascript working. I’m a beginner at html & javascript by the way.
    The javascript I use is just a basic rollover effect that changes the css border property.

    Sample html:

    1

    Examine bet summary (optional)

    Sample external javascript file (post.js):
    function highlight_border_step_1(){
    document.getElementById(“step_1_container”).style.borderColor = “#DF7300″;
    }
    function unhighlight_border_step_1(){
    document.getElementById(“step_1_container”).style.borderColor = “#212121″;
    }

    If you could help me get this basic example wotking I’d be able to do the rest myself, I just need to get the first steps.

    Thanks

    • Paul Lucey says:

      EDIT: html didn’t appear so here it is with square brackets. Hope that works.

      Hi,

      I have an external javascript file which I reference from the html in my WordPress post. I’m unsure about what I need to change to get my javascript working. I’m a beginner at html & javascript by the way.
      The javascript I use is just a basic rollover effect that changes the css border property.

      Sample html:
      [head]
      [script type="text/javascript" src="arbzilla_javascript_files/post.js"]
      [/script]
      [link href="arbzilla_css_files/post.css" rel="stylesheet" type="text/css"]
      [/head]
      [body]
      [div id="main_container"]
      [div id="step_1_container" onMouseOver="highlight_border_step_1()" onMouseOut="unhighlight_border_step_1()"]
      [div id="step_1_heading_container"]
      [div id="step_1_icon"]
      1
      [/div]
      [div id="step_1_heading"]Examine bet summary (optional)
      [/div]
      [/div]
      [/div]
      [/div]
      [/body]

      Sample external javascript file (post.js):
      function highlight_border_step_1(){
      document.getElementById(“step_1_container”).style.borderColor = “#DF7300″;
      }
      function unhighlight_border_step_1(){
      document.getElementById(“step_1_container”).style.borderColor = “#212121″;
      }

      If you could help me get this basic example wotking I’d be able to do the rest myself, I just need to get the first steps.

      Thanks

  7. Hi,

    I’d like to run the following JS script – it’s a redirect script … needs to be page specific …

    Would you be kind enough to show me what the exact syntax is supposed to be WordPress 3.1.1 i.e. the one below the latest version.

    Also – where’s the best place to put the js – top of the page or bottom ?

    Thanks, Regards Mark

  8. Hi, how could I use this for ads?

    for example for this

    if I do this
    [js][script type="text/javascript" src="http://ads.allotraffic.com/clicbandeau?id=29584"][/script][/js]

    it does not work.
    thanks

    • Hi Mosgino,

      The allow JS plugin was built primarily for inline javascript, try using the Pure HTML plugin instead and doing a script tag.

      the [ js ] tags in the Allow JS plugin act as a HTML tag.

      Alternative method would be to use the [ js ] tag to write the script tag for the script you need onto the page.

      Thanks
      Jamie

  9. Hi, I don’t know much about javascript.
    I have create a page in dreamweaver with rollover image and try to copy the code to wordpress post. Here is the code, I don’t have a clue to fix it. Can someone help?
    Thanks

    http://www.missscuba.com.hk/main/wp-content/uploads/test.txt

    • Hi Andy,

      Currently you need to escape all square brackets ( [ and ] ) for it to be used effectively.

      our plugin, pureHTML, allows for the use of code snippets where you can place the javascript for use in posts and pages across your site.

      why not try this :)

      thanks,
      Jamie

  10. Hi, Jamie,

    I tried inserting the test script into a WordPress test page (I’m running WordPress 3.2.1) and activated the “allow Javascript in posts and pages” plugin (visual editor is disabled). When I exit the WordPress editor and go to that test page url, the full test script code shows up on the page (as written) and so I’m not sure if Javascript is actually running (I assume a popup window should show up instead). Are there any other WordPress settings I need to check to get the plugin to work? Thanks

    [ js ]
    alert(‘helloWorld’);
    [ /js ]

    • Hi Johnny,

      As with all short codes, you need to remove the space between the [ and js as well as the one between [ and /js for this to work.

      The reason its written like this on the page is so that it doesn’t execute for the visitors.

      Thanks,
      Jamie

  11. Hello there, I have a problem and i’m not sure it’s with your plugin (or my bad coding)

    I have a link on my page, and further down the page i’d like to redirect to a different page if the user is accepting scripts, so i have:

    [js]document.getElementById( “http://domain.com/thepage/” ).href=”http://domain.com/leaving.htm?to=123″;[/js]

    so the script is supposed to check for the link: http://domain.com/thepage/ and send them somewhere else instead: leaving.htm

    It doesn’t work. Is that because the [js] plugin isn’t working for me?

    • Hi Aron,

      The document.getElementById function looks on the page for a tag with the id specified, unless you have an id on the page of “http://domain.com/thepage/” then its not going to find anything,

      Try window.location=”http://domain.com/leaving.htm?to=123″; instead.

      Thanks,
      Jamie

  12. Hello, I am trying to use Ajax on my page.
    Here’s the code I wrote on the page editor.
    However it’s not working when I choose one of the menu.
    It’s working well on plain html page. What do you think sir? Thank you for great product.

    P.S I also tested aleart function. It’s not working.

    [js]

    function showUser(str)
    {
    if (str==””)
    {
    document.getElementById(“txtHint”).innerHTML=””;
    return;
    }
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById(“txtHint”).innerHTML=xmlhttp.responseText;
    }
    }
    xmlhttp.open(“GET”,”getuser.php?q=”+str,true);
    xmlhttp.send();
    }

    [/js]

    Select a person:
    Peter Griffin
    Lois Griffin
    Glenn Quagmire
    Joseph Swanson

    Person info will be listed here.

    • Hi Ken,

      The issue is with the double & in switching from visual to html mode it is converted to & which breaks the JS,

      I will patch the issue and a release should be available soon.

      thanks,
      Jamie

  13. Hi Jamie! I am so glad that you are here to help :) I’ve downloaded your plugin… and inserted [js] [/js] on either end of the javascript… which is:

    document.write(”);eBay

    … but it is not working for me!!! If you can help… I would be so thankful :) Also… please dumb down the tech talk A LOT because I am really very technically challenged!

  14. That is weird… the entire code didn’t seem to make it into the comment. The code is:

    document.write(”);eBay

  15. Hi Stephanie,

    for it to be written successfully, the < 's and >‘s need to be swapped for [ and ] respectively to prevent the wp_autop adding in random p tags and breaking the code.

    Thanks,
    Jamie

  16. I can’t get the following code to work. Can you help? Thanks.

    [js debug=1][!--more--]
    [script id="raflin-bef98015" type="text/javascript"]/*{literal}[![CDATA[*/
        window.RAFLIN = window.RAFLIN || {};
        window.RAFLIN['bef98015'] = {id: ‘ZWIzZTBmZDQ5OGJkYjhkNDMwNmJkMGFiNTMzZWI5OjE=’};
        var url=’//d12vno17mo87cx.cloudfront.net/static/js/raflcptr/build/raflcptr.min.js’, head=(document.getElementsByTagName(‘head’)[0] || document.getElementsByTagName(‘body’)[0]);
        (function(d,n,h){if(!!d.getElementById(n))return;var j=d.createElement(‘script’);j.id=n;j.type=’text/javascript’;j.async=true;j.src=url;h.appendChild(j);}(document,’rsoijs’,head));
    /*]]]{/literal}*/[/script]
    [a class="rafl-powered" href="http://www.rafflecopter.com" target="_blank" style="font:10px sans-serif;color:#999;width:100%;text-align:center;display:block;" id="rpow-bef98015"]a [i]Rafflecopter[/i] giveaway[/a]
    [noscript][a href="http://rafl.es/enable-js"]You need javascript enabled to see this giveaway[/a].[/noscript][/js]

  17. Hi Jamie,
    Sorry for a stupid question, but…

    Would this:

    Be this:
    [js]src=”gen_validatorv4.js”[/js]

    or this:
    [js]“gen_validatorv4.js”[/js]

    AND… How do I use the [js]CODE[/js] for something like this:

    Thanks for your help.

  18. That last
    How do I use the [js]CODE[/js] for something like this was:

    I added the …. since the link disappeared in my previous question
    Thanks again for your help.

  19. ok… one more time…
    add the opening and closing javascript tags and put a URL in between.
    http:\\ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js

    If it doesn’t show up this time, I hope you get my drift. It’s a url to the googleapis javascript file.

    Obviously javascript isn’t my forte. Can’t you tell… :)

    • Hi Kevin,

      the [js] tag currently doesn’t support the use of a src parameter, it only parses content inside it, if your wanting a script tag, why not try the pureHTML or the Allow Php plugins, both are good :)

      Thanks
      Jamie

  20. Hi Jamie,

    i try run Your plugin, but don´t work.
    To head.php i wrote

    and to publicated page in wordpress admin

    [/js]
    var geocoder;
    var mymap;
    var codenum=0;
    var bound;
    var markers = new Array();
    var gz=15;
    function gobounds() {}
    var getMsveDirection = function(x, y)
    {
    if (x == 1){
    if (y == 1){
    return ’3′;
    } else if (y == 0){
    ….
    }
    return s;
    }
    [/js]

    Bratislava hotely, ubytovanie

    [js]
    function mapofallmap() {
    bound = new google.maps.LatLngBounds();
    geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
    var mapTypeIds = [];
    ….
    }
    });
    }
    }

    window.onload = function() {
    mapofallmap();

    }

    [/js]

    but don´t work, can You help me? Much thanks

    • Hi Boris,

      It looks like the post editor has stripped out your code.

      With allow JS you need to replace all <s with [ and all >s with ] and also all [s with \[ and all ]s with \]

      its the only way we could get it to work.

      Thanks
      Jamie

  21. Hi, I have a huge problem. I have to post this video in one of my blogposts – but I cannot.
    I downloaded your plugin, put the [js] [/js]

    and I save it, and the is gone. nothing. empty. nothing is shown. HELP! What can I do? It´s urgent.
    Thank you, Doris

  22. Hi there. I’m a complete newbie to wordpress and need help.

    I want to add a showcase of my work to a page and have this code:
    new Etsy.Mini(6363217,’gallery’,4,3,1,’http://www.etsy.com’);

    But posting it into the page just gives a blank preview. Is this plugin what I need to sort this out?
    Once I install the plugin, do I then change all of the to square brackets [] and put the code between [js] and [/js]?
    Thank you very much.

    • Oh, what happened there. The code looks completely different. See – I don;t know what I am doing here – even posting the code in a message went all wrong. Trying again with square brackets.

      [script type='text/javascript' src='http://www.etsy.com/assets/js/etsy_mini_shop.js'] [/script]
      [script type='text/javascript']new Etsy.Mini(6363217,’gallery’,4,3,1,’http://www.etsy.com’);[/script]

      • Hi Deby,

        We have chosen to dis-continue the use of this plugin now.

        But don’t worry, we have an alternative in place.

        If you download our alternative plugin Pure HTML available in the repository at http://wordpress.org/extend/plugins/pure-html/ you can add your scripts as a “code snippet” within the plugin for use across the site,

        Simply download and install the plugin on your site, go to the admin menu > pure html options and add your scripts to a new snippet with the following details and save the snippet:
        Snippet Name: Etsy Script
        Snippet Code: <script type=’text/javascript’ src=’http://www.etsy.com/assets/js/etsy_mini_shop.js’> </script><script type=’text/javascript’>new Etsy.Mini(6363217,’gallery’,4,3,1,’http://www.etsy.com’);</script>

        When you save the snippet you will be given a shortcode, simply place the shortcode on any post/page on your site to easily add the code into that post or page.

        I hope this helps :)

        Thanks,
        Jamie

        • OMG – that is super quick and easy. Anyone can do it with you great product and advice. I had it downloaded, set up and on my page in just about 3 minutes. THANK YOU so much. Do you have a donate button so I can buy you a coffee?

          • Chris Gilchrist says:

            Hi Deby a tweet or even better a link would be very appreciated and awesome enough. Enjoy the coffee and the plugin :)

  23. Hi thanks for the Allow Javascript (JS) in Posts, How can I declare an array? I’ve tried for example:
    var n1 = [parseInt(document.MyForm.numero1.value), 2, 5]; and also var n1 = ;
    but it didn’t work. thanks

  24. Hey guys,

    I have an issue with my script not working. WordPress is doing what it does best and adds to the code breaking it. Just found your plugin and it looks like it’ll do exactly what I need it to do. However, I’m doing something wrong here.

    Here’s a link to the page, if you can take a look and let me know what’s going on that’d be greatly appreciated.

    http://www.nelsonandbay.ca/sred-calculator

  25. that’d be “adds to the code..”

  26. Nevermind, it adds the paragraph tag to the code.

Add Comment Register



Leave a comment

*


eight + 3 =

What Our Clients Say

James AgateJames Agate
Managing Director
Skyrocket SEO

Chris and his team are patient, responsive and have a sense of humour even when I asked them to change something that I'd insisted upon initially. Would definitely recommend to anyone looking for an awesome WordPress development and design team.

Richard SedleyRichard Sedley
Director
Seren

Hit Reach were really easy to deal with and provide exemplary service. They implemented exactly what we wanted and guided us when we were uncertain about the solution. A highly professional and cost effective solution – what's not to love.

Roger GreenRoger Green
Director
Best4tyres.com

Hit Reach got it absolutely right. They embraced the challenge and complexity of the site, and exceeded expectation with quick response times and great service.

Our Key Services
Menu