How to add Twine game as separate page on WordPress hosting

Besides being a writer, I’ve always been an avid gamer. I enjoy RPGs, Point ‘n Clicks, Visual Novels, and Choose Your Own Adventure. When I discovered Twine I was sure I needed to use it, to combine my passion for creating exciting stories with the dream of making them interactive.
Learning how to use Twine was a breeze. It has amazing capabilities!
I wanted to incorporate my games into my WordPress site, and that’s where it got messy. There’s usually advice to embed the game as an iframe or use the outdated Embed Twine Plugin. I wanted something simpler, without the need of using any external tools or plugins. Here’s what I’ve come up with.

To set the Twine game as a separate website on WordPress hosting:

1. Change settings in Media — uncheck: “Organize my uploads into month- and year-based folders”
2. Make sure your images and sounds aren’t in subfolders — they need to be in the same folder as the HTML file.
3. Open the media library in WordPress and upload the html file and the media files.
4. You can check the direct link to your html file in the Media Library.
5. Add a link to the HTML file to one of your WordPress pages, blog posts, or navigation.

The reason for unchecking organizing uploads by date is to make sure every time you upload your updated game file or media file, they have the same URL, as long as they have the same name.

Putting all files in the same folder without subfolders is to be compatible with how the uploaded files are stored in the Media Library.

This method has one major drawback — it forces you to keep all your media files in the same folder as the main HTML file of the game. What’s worse, with how WordPress’ Media Library works, all the media files are thrown in together, be they from your game or your website.
To minimize the chaos, I’ve come up with a naming convention for the files, that kind of mimics the folder structure:

<game_prefix>_<snd|img>_filename

For example, for my game, “Jasper Blackwood: The Veins of the City“, I chose the prefix “j1“, because I think, there might be more chapters.
Then for the sound effect I chose the “snd” for sound, and then the actual name of the effect, which in this case was “door_shut“, for the shutting door. So the resulting file name is “j1_snd_doorshut.mp3“. For a picture of the locked door, it would be “j1_img_door.jpg”.

Of course, how well your game visually integrates with your WordPress website is a different thing. But with the customization options available for Twine games, this can be achieved. But that is a subject for another post.