Find out how to embed Twine tales in WordPress

Posted by ARwebhosting on Feb 24, 2020 in linux | 0 comments

From the very starting, I wished the “About me” web page on my WordPress web site romanluks.eu to be interactive.

At first, I experimented with Dart, a programming language developed by Google that transcompiles into JavaScript. I killed the venture once I realized I used to be making a recreation as an alternative of an “About me” web page.

A bit later, I found Twine, an open supply device for creating interactive tales. It jogged my memory of the gamebooks I cherished as a child. It is really easy to create interconnected items of textual content in Twine, and it is superb for the interview-like format I used to be aiming for. As a result of Twine publishes on to HTML, you are able to do loads of fascinating issues with it—together with creating interactive fiction and journey video games or publishing tales on a weblog or web site.

Early struggles

I created my “About me” web page in Twine and tried to stick it into my WordPress web page.

“No, can do,” mentioned WordPress and Twine.

You see, a Twine story exported from Twine is only a webpage (i.e., a file in HTML format). Nonetheless, it not solely contains HTML however JavaScript code, as effectively. And one way or the other it does not work while you merely attempt to copy-paste the contents. I attempted copy-pasting simply the physique of the Twine story web page with out success.

I believed, “I assume I want so as to add that JavaScript code individually,” and I attempted customized fields.

Nope.

I took a break from my investigation. I simply uploaded my “About me” Twine story by way of FTP and linked to it from my web site’s menu. Individuals might go to it and work together with the story, nonetheless, there was no menu, and it did not really feel like part of my web site. I had made a lure for myself. It made me notice I actually actually wished my “About me” included instantly on my web site.

DIY embed

I took a stab on the drawback and got here up with this resolution.

It labored. It wasn’t excellent, but it surely labored.

However it wasn’t excellent. Is there a greater means? There’s sure to be a greater means…

It price me a few pulled hairs, however I managed to get a responsive iframe and autoscroll.

It was means higher. I used to be pleased with myself and shared it on Reddit.

The highway to Embed Twine

Out of the blue, an concept! What if, as an alternative of following my tutorial, individuals might use a WordPress plugin?

They might solely have to provide the plugin a Twine story, and it might handle the remainder. Problem-free. No have to copy-paste any JavaScript code.

Would not that be wonderful?!?

I had no concept how WordPress plugins work. I solely knew they’re written in PHP. Some time again, I had part-time work as a PHP developer, and I remembered the fundamentals.

Containers and WordPress

I discussed my concept to a buddy, and he instructed I might use containers as my WordPress growth setting.

Prior to now, I would at all times used XAMPP, however I wished to strive containers for some time.

No drawback, I believed! I will study containers whereas I learn to make a WordPress plugin and revive my PHP expertise. That ought to be sufficiently stimulating.

And it was.

I can not recall what number of occasions I finished, eliminated, and rebuilt my containers. I had to make use of the command line. And the file permissions are painful.

Oh boy! It was like taking part in a recreation that you just get pleasure from taking part in although it makes you pretty offended. It was difficult however rewarding.

I came upon that it is very straightforward to create a easy WordPress plugin:

Write the supply code
Put it aside within the WP plugin listing
Check it
Repeat

Containers make it straightforward to make use of a selected setting and are straightforward to scrub up while you screw up and want to start out over.

Utilizing Git saved me from unintentionally wiping out my whole codebase. I used Sourcetree as my Git consumer interface. Initially, I wrote my code in Notepad++, however once I divided my code into a number of recordsdata, I switched to Atom. It is such a cool editor for geeks. Utilizing it feels just like the code writes itself.

Intermission

So what do we all know thus far?

I wished an interactive “About me” web page
I created an “About me” story in Twine
Twine exports webpages (as HTML recordsdata with JavaScript included)
WP plugins are straightforward to make
Containers are superior

Embed Twine is born

I wished a simple strategy to embed Twine tales into WordPress. So, I used the ability of software program growth, fooled round with containers, wrote a little bit of PHP code, and revealed the consequence as a WordPress plugin known as Embed Twine.

Set up the plugin

Add the plugin recordsdata to the /wp-content/plugins/plugin-name listing, or set up the plugin by the WordPress Plugins display.
Activate the plugin by the Plugins display in WordPress.

Use the plugin

After you’ve got put in the Embed Twine plugin and created a Twine 2 story, embed it in your WordPress website:

Export your Twine 2 story into an HTML file.
Add it by way of the plugin’s interface.
Insert the shortcode into the web page or publish.
Get pleasure from your embedded story.

The plugin additionally gives autoscroll performance to make it straightforward for customers to navigate by your tales.

Configure the plugin

The plugin is configurable by way of shortcode parameters. To make use of the shortcode, merely put [embed_twine] into your publish.

You need to use extra parameters within the format [embed_twine story=”Story” aheight=112 autoscroll=true ascroll=100] as follows:

story: Specify the story identify (the filename with out an extension).
- If the story parameter is omitted, it defaults to “Story.” This implies there isn’t any want to make use of this parameter in case your Twine filename is Story.html.
- If you happen to add a Twine story known as MyFooBar.html, use the shortcode: [embed_twine story=”MyFooBar”].
aheight: Use this parameter to regulate the iframe’s peak. You may have to tweak aheight to eliminate an iframe scrollbar. The default worth is 112; this worth is added to the iframe peak and used to set the iframe’s model.peak.
autoscroll: Autoscroll is enabled by default. You may flip it off with shortcode parameter [embed_twine autoscroll=false].
ascroll: Use this to regulate the default place for autoscroll. The default worth is 100; this worth is subtracted from the iframe’s high place and fed into JavaScript technique window.scrollTo().

Recognized bugs

Presently, Twine passages that embody photographs may report their peak incorrectly, and the scrollbar may present up for these passages. Tweak the shortcode parameter aheight to eliminate them.

The script

<?php
2
3/**
4 * Plugin Title: Embed Twine
5 * Description: Insert Twine tales into WordPress
6 * Model: 0.0.6
7 * Creator: Roman Luks
8 * Creator URI: https://romanluks.eu/
9 * License: GPLv2 or later
10 */
11
12require_once(’embody/embed-twine-load-file.php’);
13require_once(’embody/embed-twine-parent-page.php’);
14require_once(’embody/embed-twine-process-story.php’);
15
16// Add plugin to WP menu
17operate

embed_twine_customplugin_menu

() {
18
19

add_menu_page

(“Embed Twine”, “Embed Twine”,”manage_options”, __FILE__, “embed_twine_uploadfile”);
20}
21
22

add_action

(“admin_menu”, “embed_twine_customplugin_menu”);
23
24operate

embed_twine_uploadfile

(){
25embody “embody/embed-twine-upload-file.php”;
26}
27
28// Add shortcode
29operate

embed_twine_shortcodes_init

()
30{
31operate

embed_twine_shortcode

($atts = [], $content material = null)
32{
33// Attributes
34$atts =

shortcode_atts

(
35array(
36’story’ => ‘Story’,
37’aheight’ => 112,//alter for model.peak (30) and margins of tw-story (2×41)
38’autoscroll’ => true,//autoscroll enabled by default
39’ascroll’ => 100,//alter for autoscroll
40),
41$atts,
42’embed_twine’
43);
44
45$content material =

embed_twine_buildParentPage

($atts[‘story’], $atts[‘aheight’], $atts[‘autoscroll’], $atts[‘ascroll’]);
46
47return $content material;
48}
49

add_shortcode

(’embed_twine’, ’embed_twine_shortcode’);
50}
51