From the very beginning, I wanted “About” page on my WordPress website romanluks.eu to be interactive.
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.
I’ve created my About me page in Twine and wanted to paste it into WordPress page.
No, can’t do, said WordPress & Twine.
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.
I took a stab at the problem and came up with this solution:
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?
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.
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
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”
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.
How complicated do you think it would be to make similar code support twine 1.4 ?
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