Update: Consider this article a basic tutorial for embedding Twine in WordPress. I have discovered a new better way to do it!
Do you want your Twine iframe to automatically adjust its height for each passage? Read How to Embed Twine on Your WordPress Website with Responsive IFRAME and Autoscroll to learn how.
Original article:
Let’s jump right in!
Export Twine story to HTML
Create twine and export it to HTML file.
Publish to File.

Upload it
Upload HTML file on the server (eg. FTP with Filezilla).

Create WordPress page
Create a new page in your WordPress where you want to embed the twine.

Insert the code
Insert following code (be sure to switch to Text tab)
<div><iframe id="my_iframe" width="100%" height="400px" src="https://www.romanluks.eu/about/index.html" scrolling="no"</iframe></div>
Replace URL https://www.romanluks.eu/about/index.html with the path to your twine.

Now you have twine embedded on your website, however, it has the wrong size. Oh, noes! What now?!
Tweak the code
Let’s add some more code 🙂
<script type="text/javascript"> //<![CDATA[ var currentPassage = null; function CheckHeight() { if (currentPassage != document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0]) { document.getElementById("my_iframe").style.height = "400px"; document.getElementById("my_iframe").style.height = document.getElementById("my_iframe").contentWindow.document.body.scrollHeight + 'px'; currentPassage = document.getElementById("my_iframe").contentWindow.document.getElementsByTagName("tw-passage")[0]; } setTimeout(CheckHeight, 500); } //]]> </script> <div><iframe id="my_iframe" width="100%" height="400px" src="https://www.romanluks.eu/about/index.html" scrolling="no" onload="CheckHeight()"></iframe></div>
Firefox issue
Now the iframe changes the height according to the current twine passage.
But, it does not work in Firefox. In Firefox you get a blank page. Yeah, kids. Always test your website in all browsers.
In Firefox add the fallback to fixed resolution and enable scrolling.
Like this:
if(document.getElementById("my_iframe").contentWindow.document.body.scrollHeight == 0){ document.getElementById("my_iframe").style.height = "1300px"; document.getElementById("my_iframe").scrolling = "yes";}
WAIT! This tutorial is really complicated!!!
philome.la
Alright – just go here. It is a simple way how to get your Twine online for free.

Itch.io
You can also put your Twine project on Itch.io.
If it’s text-only, just upload the HTML file. If there are images and other files, pack it all together in a zip file. Just make sure to name your html file index.html.
This is how it’s going to look: https://lookshgood.itch.io/about-roman-luks?secret=gT6ocictrou4So0Ef3SEamFS0g

Misc
Does your twine contain external links?
eg. to google.com/wikipedia articles/any other website
Add the attribute target and set it to _blank. This forces browsers to open the link in a new tab instead of opening it right in the twine iframe window.
<a href=”https://www.example.com/” target=”_blank”>Link</a>

Are you making changes to your twine and uploading the new version on server?
User browser private mode/incognito mode. Or clear browser cache. Iframes are usually cached in browsers so you would only see a previous (outdated) version of your twine.
[kofi]
4 responses to “How to Embed Twine on Your WordPress Website”
This was really useful for me! Thanks!
[…] I took a stab on the drawback and got here up with this resolution. […]
I’ve recently needed to use this to embed a Chapbook Twine. The embedding works but the
aheight does not see to adapt anything.
However, I was able to tweak the iframe myself to make things work.
Chapbook is a different story format and the plugin doesn’t handle it at the moment.
Supported story formats at the moment:
Harlowe
SugarCube
Furthermore, the automatic height adjustment doesn’t work 100%. My JavaScript skills are limited and I wasn’t able to fix it yet.
Btw development repo is open to pull requests if anyone wants to share their improvements: https://github.com/rluks/embed-twine