how would I include a js file with <script> tags into wordpress?

Question

in my wordpress plugin file I have this code that includes a javascript

function javascript_file-exmp() {
    $src = plugins_url('test.js', __FILE__);
    wp_register_script( 'links', $src );
    wp_enqueue_script( 'links' );
    wp_enqueue_script( 'jquery' );
    }
    add_action('init','javascript_file-exmp');

the test.js file is a little long.

if (!document.layers)
        document.write('<div id="divStayTopLeft" style="position:absolute">')


        <layer id="divStayTopLeft">

        <!--EDIT BELOW CODE TO YOUR OWN MENU-->
        <table border="1" width="130" cellspacing="0" cellpadding="0">
          <tr>
            <td width="100%" bgcolor="#FFFFCC">
              <p align="center"><b><font size="4">Menu</font></b></td>
          </tr>
          <tr>
            <td width="100%" bgcolor="#FFFFFF">
              <p align="left"> <a href="http://www.dynamicdrive.com">Dynamic Drive</a><br>
               <a href="http://www.dynamicdrive.com/new.htm">What's New</a><br>
               <a href="http://www.dynamicdrive.com/hot.htm">What's Hot</a><br>
               <a href="http://www.dynamicdrive.com/faqs.htm">FAQs</a><br>
               <a href="http://www.dynamicdrive.com/morezone/">More Zone</a></td>
          </tr>
        </table>
        <!--END OF EDIT-->

        </layer>



        /*
        Floating Menu script-  Roy Whittle (http://www.javascript-fx.com/)
        Script featured on/available at http://www.dynamicdrive.com/
        This notice must stay intact for use
        */

        //Enter "frombottom" or "fromtop"
        var verticalpos="frombottom"

        if (!document.layers)
        document.write('</div>')

        function JSFX_FloatTopDiv()
        {
            var startX = 3,
            startY = 150;
            var ns = (navigator.appName.indexOf("Netscape") != -1);
            var d = document;
            function ml(id)
            {
                var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
                if(d.layers)el.style=el;
                el.sP=function(x,y){this.style.left=x;this.style.top=y;};
                el.x = startX;
                if (verticalpos=="fromtop")
                el.y = startY;
                else{
                el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
                el.y -= startY;
                }
                return el;
            }
            window.stayTopLeft=function()
            {
                if (verticalpos=="fromtop"){
                var pY = ns ? pageYOffset : document.body.scrollTop;
                ftlObj.y += (pY + startY - ftlObj.y)/8;
                }
                else{
                var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
                ftlObj.y += (pY - startY - ftlObj.y)/8;
                }
                ftlObj.sP(ftlObj.x, ftlObj.y);

                setTimeout("stayTopLeft()", 10);
            }
            ftlObj = ml("divStayTopLeft");
            stayTopLeft();
        }
        JSFX_FloatTopDiv();

I am trying to include this test.js file but nothing happens on my blog. How do i go about including this file in the plugin? I understand it might be something to do with html tags or script tags. But which ones?

Thanks.

In addition to m0r7if3r's comment, I don't think you should enqueue in init hook. Try wp_enqueue_scripts hook instead. — Shane
– Shane, Commented Feb 8, 2012 at 21:01

James VanDyke · Accepted Answer · 2012-02-08 21:05:42Z

First you should use the wp_enqueue_scripts to load your scripts.

add_action( 'wp_enqueue_scripts' , 'javascript_file-exmp' );

Second, be sure to both register and then enqueue your script

Register:

wp_register_script( 'links', plugins_url( 'test.js', __FILE__ ), array( 'jquery' ), '1.0', true  );

1.0 is the version, used mainly to avoid caching on when you update it.

true controls whether the script can be called from the bottom of the page rather than in the <head> tag.

Enqueue

wp_enqueue_script( 'links' );

Lastly, as suggested above you should really separate your HTML from your javascript.

mor7ifer · Accepted Answer · 2012-02-08 20:28:39Z

0

A .js file should ONLY contain javascript. You should also have you javascript separated from your HTML (...and from your php, from your perl, etc, everything gets its own little box) anyways as a matter of good coding practice.

answered Feb 8, 2012 at 20:28

mor7ifer

8,6162 gold badges20 silver badges33 bronze badges

Add a comment |

Rafael · Accepted Answer · 2012-02-09 08:47:25Z

0

The function's name (javascript_file-exmp) is invalid, because it contains the - (minus) character which is the subtraction operator and thus your code throws syntax errors. And also the test.js file contains HTML code where only valid JavaScript is expected.

answered Feb 9, 2012 at 8:47

Rafael

1

Add a comment |

Stack Exchange Network

how would I include a js file with <script> tags into wordpress?

3 Answers 3

Your Answer

Linked

Hot Network Questions

how would I include a js file with <script> tags into wordpress?

3 Answers 3

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions