Using JavaScript Libraries in WordPress/StudioPress

[rdr]

Hi all, I'm new to all of this, so please excuse a newbie question.

I've set up my first web site, self hosted through Webfaction. I'm using the latest version of WordPress and was impressed with StudioPress so bought the ProPack to try out all that they have to offer.

I've been impressed with the wide variety of JavaScript libraries there are out there. One in particular, called two.js (see http://jonobr1.github.io/two.js), makes it seemingly easy to draw graphics right on a web page using the API they provide.

I can get two.js to work just fine on an empty HTML page on my site so I know I'm on the right track. But I've had no luck getting it to work on one of my WordPress pages. The library is loading (I've confirmed that with Chrome's JavaScript Console), but nothing is drawn.

I'd love help with getting two.js to work, but I realize that might be too specific a problem to ask about. More generally my question is, is there a right way to incorporate JavaScript libraries like two.js into my WordPress site?

I'd appreciate any guidance on the right approach to do this (and remember, I'm pretty much a novice!)

Thanks in advance for your help.

-- Robert

http://www.robertdelrossi.com

[rfmeier]

Robert,

How are you loading the javascript on your WordPress site?  How are you then calling the javascript library?

---

Ryan Meier – Twitter

[rdr]

Ryan -- I'm loading and then calling the Javascript library inside a script tags that I types into the the Text tab of the new post page in WordPress. I have been able to verify through debugging consoles that the load is working. I've also been able to execute simple, limited Javascript (such as writing text to the generated HTML) this way, so I know that my script tags are being respected.

That said, I realize that just because some simple tests work, it doesn't mean I'm doing things the right way. For example, loading the two.js library into this page may be OK when you're using it on this page alone, but should it be loaded that way if I were to call it from ten different pages? I would think not (i.e., that it should be loaded from some central point once and then called repeatedly from various other pages).

-- Robert

[rfmeier]

Robert,

For loading a javascript library globally in a WordPress website, I recommend hooking the 'wp_enqueue_scripts' action.  From within the callback, use wp_enqueue_script().  From there you can determine what pages you want to script to load on; pages, posts, single pages, single posts, etc.  This will ensure the two.js script is loading once.

I hope this helps.

---

Ryan Meier – Twitter

[Author]

Posts