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

The post "Hacking a WordPress Theme from HTML5up Template with some API goodies" was originally assembled from spare parts of a 1957 Chevy at CogDogBlog (http://cogdogblog.com/2017/01/wp-theme-html5up-template/) on January 10, 2017.

2 Comments

  • Michael Smith

    This is pretty cool. I had a number of students using HTML5 templates at the end of a web design class. This could be another step they might take with their work.

  • Sheetal Academy

    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.

Leave a Comment

All fields are required. Your email address will not be published.

Creative Commons License
Hacking a Wordpress Theme from HTML5up Template with some API goodies by CogDogBlog is licensed under a Creative Commons Attribution-Share Alike 4.0 License.