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.
Nope.
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:
https://romanluks.eu/blog/how-to-embed-twine-on-your-wordpress-website/
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:
https://romanluks.eu/blog/how-to-embed-twine-on-your-wordpress-website-with-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.
Intermission
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:
Enjoy.
Leave a Reply