How do I create a Wordpress page for the WebGL Player?

Questions & Answers
1

These are the files created from a WebGL build. Which files to I need to bring into Wordpress, so it can work on my website.

Also, do the files need to be transferred to the server, or remain on the machine here? Thank you lots for any help in advance.

[35148-screen+shot+2014-11-10+at+10.01.51+am.png|35148]

4

I know it’s an old question, but I’ve just used the following piece of code to overcome this issue easily:

<iframe src="https://your.domain/buildfolder/index.html" width="900" height="600"></iframe>
2

I have managed to get a webgl unity game working on WordPress, although note that you will need to have your own hosted WordPress, not one from WordPress.org. to make it work I had the unity build files added to my Dropbox public folder (should also work if files are hosted on same hosting as site) using a plugin called iframe. With this you simply write in the text box [iframe src=“insert public address of file here” width=“1000” height=“900” scrolling=“no” style=“margin-left:-35px;”] and it should work :slight_smile:

3

I got it to work by FTP’ing the TemplateData and Release folders under the wp-content/uploads folder. Then I created a page and added the following code in a code snippet element for my theme.

<pre><p class="header"><span>Your Game Name | </span></p>
      <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" height="600px" width="960px"></canvas>
      

      <div class="logo"></div>
      <div class="fullscreen"><img src="../wp-content/uploads/TemplateData/fullscreen.png" width="38" height="38" alt="Fullscreen" title="Fullscreen" onclick="SetFullscreen(1);" /></div>
      <div class="title">BreakThoseBricks</div>
    <p class="footer">« created with <a href="http://unity3d.com/" title="Go to unity3d.com">Unity</a> »</p>
    <script type='text/javascript'>
  var Module = {
    TOTAL_MEMORY: 268435456,
    errorhandler: null,			// arguments: err, url, line. This function must return 'true' if the error is handled, otherwise 'false'
    compatibilitycheck: null,
    dataUrl: "../wp-content/uploads/Release/Default WebGL.data",
    codeUrl: "../wp-content/uploads/Release/Default WebGL.js",
    memUrl: "../wp-content/uploads/Release/Default WebGL.mem",
  };
</script>
<script src="../wp-content/uploads/Release/UnityLoader.js"></script>
<script src="../wp-content/uploads/TemplateData/UnityProgress.js"></script>
   <link rel="stylesheet" href="../wp-content/uploads/TemplateData/style.css">
    <link rel="shortcut icon" href="../wp-content/uploads/TemplateData/favicon.ico" />
</pre>

The 

 in front of the code is important since it instructs Wordpress not to mess with the code. You can check out the final result here: http://breakthosebricks.com/break-those-bricks-game/


Hope that helps!