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:

#arganee world

#????u?? ?o??p

<h1>#arganee world</h1>
<h2 id="site-description">#????u?? ?o??p</h2>

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().

jQuery(document).ready(function(){

	function update_wisdom( koans ) {
		// update the message div with a random json result array from input
		// a posts get query from WP API
		
		//give us a random array item
		var wisdom = koans[Math.floor(Math.random()*koans.length)];

		jQuery('#mysterymsg').html(wisdom.content.rendered);
	}
	

	// Let's get some posts!
	jQuery.ajax({
	  url:'http://arganee.world/wp-json/wp/v2/posts/?per_page=25',
	  jsonp:"cb",
	  dataType:'json',
	  success: function(data) {

		// save the results in array we can use later
		quotes = data;
		
		// go to work!
		update_wisdom(quotes);
		
		// update every so often
		setInterval(update_wisdom, 16000, quotes);

				
		} //success
	  }); //ajax
	  
});//ready

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

 Share this barking on social media

If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon