Embedding into WordPress
This information was originally part of WebGL Lesson One: Getting Started, but I thought it would be more useful if I also broke it out into a post on its own.
Embedding WebGL into WordPress can be a little tricky, but if you use the right tags and the HTML editor it can be done without too much trouble! You’ll need to insert a canvas in your post, script includes for any third-party libraries, and a script body for your main script (this can also be an include).
First, place a canvas tag where you would like the graphics to appear:
<pre><canvas id="canvas" width="550" height="375">Your browser does not support the canvas tag. This is a static example of what would be seen.</canvas></pre>
Then, include any necessary scripts:
<pre><script type="text/javascript" src="http://www.learnopengles.com/wordpress/wp-content/uploads/2011/06/webgl-utils.js"></script></pre>
Embed any additional scripts that you need, such as the main body for your WebGL script:
<pre><script type="text/javascript">
/**
* Lesson_one.js
*/
...
</script></pre>
The <pre> tag is important; otherwise WordPress will mangle your scripts and insert random paragraph tags and other stuff inside. Also, once you’ve inserted this code, you have to stick to using the HTML editor, as the visual editor will also mangle or delete your scripts.
If you’ve embedded your scripts correctly, then your WebGL canvas should appear, like below:
Hope this helps out some people out there!
About the book
Android is booming like never before, with millions of devices shipping every day. In OpenGL ES 2 for Android: A Quick-Start Guide, you’ll learn all about shaders and the OpenGL pipeline, and discover the power of OpenGL ES 2.0, which is much more feature-rich than its predecessor.
It’s never been a better time to learn how to create your own 3D games and live wallpapers. If you can program in Java and you have a creative vision that you’d like to share with the world, then this is the book for you.
Hi,
I’m Federico Ciccarese,
I read your post “How to Embed WebGL into WordPress Post.”
I’m interested in this.
I have a WordPress site ciccaresedesign.com and I need to incorporate a 3D WebGL in various posts.
Can you help me?
I might even pay for this information.
If you are interested please contact me I give you other details.
Hi, I’m not too familiar with wordpress, but it seems like the HTML editor automatically removes the script tags and the canvas tags inside the pre tags. Are there any plugins I have to install before trying to put the canvas into the HTML editor?
I’m not that good with HTML and javascript, but would like to convert some of my glsl shaders and put it in webgl.
Hi Wallace,
The only way I know of is to edit that post in HTML mode and never switch to Visual mode. What you could do is edit the rest in Visual mode and then paste in the script & canvas tags at the end. Will have to investigate this some more!
Thanks, works great.
It’s a pain that you have to stick with the html editor but apart from that it works.
What’s the recommended way of starting the initialization function (context creation etc) at page load if you don’t want to mess with the theme? I tried
window.onload=function()
{
init();
}
in my script and it works but I’m not so much into javascript and html5 that I could tell if that’s a good way or if it could lead to problems.
Hi Robert,
It doesn’t seem like a bad way to me. I didn’t do it like that though — I just embedded the WebGL script directly, and the browser executes the code automatically:
<pre><script type="text/javascript">
/**
* Lesson_one.js
*/
…
</script></pre>
Hi!
Tried this technique on severeal themes but doesn’t work in none of them. Does this work in the latest version of wordpress?
It’s a pity WordPress can’t handle real html/JS/Canvas in posts etc…
Unfortunately for me it has only worked when using the HTML editor. The moment you switch to visual mode everything gets wiped out…
I am having a strange problem, when I add the for the includes it behaves normally. When I add the text for the embedded script into the post the editor adds an extra closing after my closing . I think this is breaking the code. Has anyone encountered this before?
IIRC, when I did this, I had to keep the editor in HTML mode otherwise things would break. 🙁
I did this without ever entering “visual mode”
There are a few plugins which can call JS without embedding it directly in the page.
One of the more comprehensive ones:
CSS Javascript Toolbox
Hey guys,
I am trying to use include Unity WebGL build on a WordPress site, do you have any idea how to do that? It might be obvious, but Im not sure how/ if at all possible to upload the rest of the content.
I found this article that might help out: http://www.rewindgamestudio.com/?p=180. That’s for the web player so I’m not sure if it also applies to WebGL, but the one post I found for WebGL was linking back to this web page. 😉