Embed Twine WordPress Plugin

From the very beginning, I wanted “About” page on my WordPress website romanluks.eu to be interactive.

At first, I’ve experimented with Dart, programming language developed by Google which transcompiles into JavaScript. I killed the project when I realized I was making a game instead of About me page.

A bit later, I’ve discovered Twine and it made me remember gamebooks I loved as a kid. It’s so easy to create interconnected pieces of text in Twine. That’s ideal for an interview-like format I was aiming for.

Early Struggles

I’ve created my About me page in Twine and wanted to paste it into WordPress page.

No, can’t do, said WordPress & Twine.

You see, Twine story exported from Twine is just a webpage (file in .html format). However, it includes not only HTML but JavaScript code as well.

And somehow it doesn’t work when you simply copy-paste the contents. I’ve tried copy-pasting only the body of the Twine story webpage without success.

“I guess I need to add that JS code separately” and I’ve tried custom fields.


I took a break from investigation. I’ve uploaded my About me Twine story via FTP and just linked to it from the website menu. People could visit it and interact with the story, however there was no menu and it didn’t feel like part of my website.

I made a trap for myself. It made me realize I really really wanted my About me included directly on my website.

DIY Embed

I took a stab at the problem and came up with this solution:

It worked.

It wasn’t perfect but it worked.

It wasn’t perfect.

Is there a better way?

There is bound to be a better way…

It cost me a couple of pulled hairs but I managed to get responsive iframe and autoscroll:

It was way better.

I was proud of myself and shared it on reddit.

Road to Embed Twine

Suddenly, an idea!

What if, instead of following my tutorial, people could use a WordPress plugin?

They would only have to give it a Twine story and the plugin would take care of the rest. Hassle-free. No need to copy-paste any JavaScript code.

Wouldn’t that be glorious?!

I had no idea how WordPress plugins work. I only knew they are written in PHP. I had a part-time work as a PHP developer a while back and I still remembered the basics.

Containers & WordPress

I mentioned my idea to a friend and he suggested I could use containers as my WordPress development environment.

In the past, I’d always use XAMPP. The thing was I wanted to try containers for a while.

No problem! I’ll learn containers while I learn how to make a WP plugin while I revive my PHP skills. That should be sufficiently stimulating.

And it was.

I can’t recall how many times I’ve stopped, removed and rebuild my containers. I was forced to use command-line. And the file permissions are painful.

Oh boy!

It was like playing a game which makes you fairly angry but somehow you still enjoy playing. It was challenging but rewarding.

I found out, it’s very easy to create a simple WordPress plugin:

  • Write the source code
  • Save it in WP plugin directory
  • Test it
  • Repeat

Containers make it easy to use a specific environment and are easy to cleanup when you screw up and need to start over.

Using git saved me from accidentally wiping out my entire codebase. I’m using Sourcetree. Initially, I wrote my code in Notepad++ but when I divided my code into multiple files I switched to Atom. It’s such a cool editor for geeks. Using it feels like the code writes itself.


So what did we learn so far?

  • I wanted an interactive About me page
  • I’ve created About me story in Twine
  • Twine exports webpage (.html file with js included)
  • WP plugins are easy to make
  • Containers are awesome

Embed Twine is Born

I wanted an easy way for embedding Twine stories into WordPress. So I used the power of software development, fooled around with containers, wrote a bit of PHP code and published the result here:



4 responses to “Embed Twine WordPress Plugin”

  1. Arturo

    Hi, In general is there a big reason why this could not be adopted to support Twine 1.4. I know the file formats are not exactly the same but do you think it would be a large undertaking. In my case Twine 2.0 would not exactly work for what I am using it for.

  2. Art

    How complicated do you think it would be to make similar code support twine 1.4 ?

  3. Hello, Twine 1 is obsolete. I’ve only used Twine 2. You can try experimenting and inserting the code manually just like I did before the plugin: https://romanluks.eu/blog/how-to-embed-twine-on-your-wordpress-website-with-responsive-iframe-and-autoscroll/. Twine docs could help as well: http://twinery.org/wiki/twine1:reference

  4. Arturo

    Great, thanks. Will give that a try. Good information there. I am not much of a PHP developer but I can probably give that a spin (I am comfortable with c++,c# and javascript but this is a different world). Using Twine to generate html code of a certain format which is not supported any longer.

Leave a Reply

Your email address will not be published. Required fields are marked *