This is a hastily written description of a little mystery site I put together at http://arganee.world. The sliding images in the background are done by an HTML5up template called Eventually, but the dynamic text in the middle is done via some calls to the WordPress API via jQuery.

The whole thing started when building out a WordPress multisite where the main site I was working on at the time was one of the subsites- This is for the NetWorked Narratives open course I am co-teaching with Mia Zamora and is at http://netnarr.arganee.world I wanted more or less a holding page, or just a landing page for the main site. But I did not find the kind of thing I had in mind in the WordPress themes.

What I wanted was a static HTML5 template I have used before, as a holding spot for a yet to be built local project site but also for the Open Education 2016 presentation I did with Paul Stacey.

But how do I get that to sit at the main site for a WordPress Multisite? I could have done some kind of redirect. But maybe there was a way to convert the HTML5Up template into a simple WordPress Theme.

Oh help me, Obi Wan Google… and I found a great envato tuts+ write up Creating a WordPress Theme From Static HTML. Rachel McCollin provides an excellent step by step guide. It’s a matter of dissecting the HTML from the static template into WordPress theme heade.php, footer.php, etc theme files. And it’s even easier for my simple site, because I was not doing posts (at the time) or using sidebars.

I got that going in about an hour.

I got kind of fancy by adding the mirror text to the template- that is done with the nifty TextMechanic Reverse Text Tool.

In my theme it’s done like this:

I could have stopped there.

But then I thought it would be cool to have some randomness in the mix. Random is usually fun. So I found a bunch of mysterious oddball sentences, like ones I found at the Technobabble generator site:

We need to botch the ventral atomic flow circuit.

We need to attenuate the graviton resistance casing.

There’s a magnetic variance in the axial energizer.

If we polarize the gamma ray filament, it will increase power to the metatronic phaser banger.

We need to re-polarize the ventral inertial stabalizers.

You need to reseed the on-board cress plantation.

I made a bunch of posts with these as the content (if I was doing this more elegantly I would have made a custom post type, but not really necessary).

Then I rigged the WordPress loop to pull one post at random and put the text of it on the front page. That worked, each time you visited the site, you got a different message.

I could have stopped there.

But reloading pages is lame. What I really wanted was to have them change like every 20 seconds. And that sounded like maybe something I could fiddle with via the new features of the WordPress API.

I got a boost with some sample code from Tom Woodward. The main index.php template is really simple; it’s empty:

All the action happens with a nudge by functions.php to load a custom javascript

The guts of the script is to use the API to get 25 posts (or quotes) via:

http://arganee.world/wp-json/wp/v2/posts/?per_page=25

This brings the data for these posts in as JSON array; I pass that array to a function that randomly picks one array item (e.g. a post), and uses jQuery to slip into the #mysterymsg div. And we set it motion with a setInterval().

And that’s it. It’s a WordPress site that is pretty much a one page little goofball machine. Ha ha.

If anyone really wants to poke around and laugh at it, see https://github.com/cogdog/arganee

Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

  1. Thank you, share your valuable information of HTML5, my all students are used of HTML5 in our web project. I suggest to all your templates are used and implement in our project.

  2. Cool :) I actually like to convert static HTML into WP websites; I’m no web designer, but sometimes you find the coolest free design out there, and you just have to put it in your next WP website… and that means creating your own theme!

    Things can easily get complicated these days if you wish to adhere to WP’s ‘standard’ templating API — which is far more complex (but much more user-friendly afterwards!) — than what’s described on that 2013/4 tutorial you linked to. Still, it’s fun to do in order to learn more about how WP really works!

    Usually I don’t start from scratch, but rather use a ‘prototype’ or ’empty’ kind of theme, and then add the HTML to it. There are a lot of such fancy templates/prototypes around, it’s more a question of knowing which are being kept up to date with WP’s ever-evolving complexity, and which have been abandoned…

Leave a Reply

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