Eventually? Now… a New WordPress Calling Card Theme

I’ve had the itch for a while to do another in my series of WordPress themes based on HTML5Up templates. Here is the first demo version of WP-Eventually, built up the original HTML one that calls for hand coding.

The compelling feature of the original is the subtle sliding images in the background. I’ve used it for a few sites, including the opening site for an Open Ed presentation and a demo site used for an Ontario Extend Domain Camp activity for learning how to install static sites in your domain.

I find the HTML5Up themes easy to modify for my uses, but digging into manual HTML is not everyone’s cup of tea. And the tricky thing about the Eventually theme is that the place where the images are defined is buried in the javascript code loaded into the theme (that means burrowing down to /assets/js/main.js and once even in there, knowing how to edit an array, maybe to add new files?

// Slideshow Background.
(function() {

	// Settings.
		var settings = {

			// Images (in the format of 'url': 'alignment').
				images: {
					'images/bg01.jpg': 'center',
					'images/bg02.jpg': 'center',
					'images/bg03.jpg': 'center'
				},

			// Delay.
				delay: 6000

		};

Without editing this for your own, you can only change out the default images the theme provides and you are limited to 3.

To make this work, I wanted to use the part of the WordPress Customizer where you can upload header images; these are typically done to be a pool of images a theme can use, even randomized like we do on the Virtually Connecting site.

So first I found a tip on how to access all of the images that have been uploaded as header images. That’s pretty simple. But I was also interested in having the theme come with a default set of images. This came from a WPBeginner post on adding them to the Twenty Ten theme, which tells you how old the tip is (and like WordPress, it still works).

My theme defines four my default (all are CC0 images from my flickr, because I can).

function eventually_default_header_images() {
	return array(
		'aspen' => array(
		'url' => get_stylesheet_directory_uri() . '/images/headers/aspen.jpg',
		'thumbnail_url' => get_stylesheet_directory_uri() . '/images/headers/aspen-thumbnail.jpg',
		/* translators: header image description */
		'description' => __( 'Aspen', 'eventually' )
		),	
		'open' => array(
		'url' => get_stylesheet_directory_uri() . '/images/headers/open.jpg',
		'thumbnail_url' => get_stylesheet_directory_uri() . '/images/headers/open-thumbnail.jpg',
		/* translators: header image description */
		'description' => __( 'Openness', 'eventually' )
		),	
		'through' => array(
		'url' => get_stylesheet_directory_uri() . '/images/headers/through.jpg',
		'thumbnail_url' => get_stylesheet_directory_uri() . '/images/headers/through-thumbnail.jpg',
		/* translators: header image description */
		'description' => __( 'Through road', 'eventually' )
		),	
		'turntable' => array(
		'url' => get_stylesheet_directory_uri() . '/images/headers/turntable.jpg',
		'thumbnail_url' => get_stylesheet_directory_uri() . '/images/headers/turntable-thumbnail.jpg',
		/* translators: header image description */
		'description' => __( 'Turntable', 'eventually' )
		),
	);
}

This is called into action on a function hooked into the after_theme_setup.

I got these parts working, but then figured out there was two ways to get these images as arrays; one is the array provided from the tip above if images had already been uploaded. But what about the first set up? This would be empty. So I have a helper function that first sees if there are any uploaded images; if not, it sends the default set the theme defines.

function eventually_get_backgrounds() {
	// first look for uploaded header images
	$backgrounds = get_uploaded_header_images();
	
	// if none found use the defaults
	if ( !$backgrounds ) $backgrounds = eventually_default_header_images();
	
	$headers = array();
	
	// construct array with urls as index, format used by template
	foreach ($backgrounds as $image) {
		$headers[$image['url']] = 'center';
	}
	
	
	return ($headers);
}

It returns a rather funky kind of associative array where the keys are the urls for the images and the values are a crop setting of center. That’s because it’s what the Eventually theme uses in Javascript.

And this is where that little bit of experimentation for another project paid off- that using wp_localize_script means I could pass the arrays I was generating in PHP to the Eventually Javascript function, without really needing to rewrite it too much.

My theme sends the script this data (after testing that a PHP associative array ends up in a similar object structure in JavaScript). As I do in these themes, I enqueue the HTMLUp scripts, in this case I inserted a function to send it this array im a global JS object known as theTransporter

	wp_register_script( 'eventually-main' , get_stylesheet_directory_uri() . '/assets/js/main.js', array( 'jquery' ), false, true );
	
	// send to the script an array of the header images
	wp_localize_script(
	  'eventually-main',
	  'theTransporter',
	  array(
		'backgrounds' => eventually_get_backgrounds()
	  )
	);

	wp_enqueue_script( 'eventually-main' );

which means the hard coded defining images above now is much shorter, and dynamic:

// Slideshow Background.
(function() {

	// Settings.
		
		var settings = {

			// Images (in the format of 'url': 'alignment', in this theme they are transported in from WordPress).
				images: theTransporter.backgrounds,

			// Delay.
				delay: 6000

		};

If that’s too much code, here is the interface for adding images i n the Customizer.

Like the other themes in the mix, this one makes use of a Font Awesome 4 Menus plugin (the original one is abandoned and frozen with the Font Awesome 4.7 menus, I forked it and made a version that works with the version 5 ones) to enable a social media set of icon links that is managed as a WordPress menu.

The managing of the theme is done in the WordPress Customizer; as mentioned earlier images are uploaded there to become the set of ones shown in the background. I also create a means to run a site in different “modes” for where the content comes from:

I originally thought of making the main content be an editor in the customizer, even removing Posts completely. But then it seemed more useful to have the site’s front come from Posts. So only one post is shown on front, the most recent. There are options for how one could run the site:

• The latest post appears all by itself (shown above). This makes for a simple one screen site, like a landing page / calling card / event splash. Or if it was content that was updated, like announcements, the site is updated with just adding a new post.
• Paging Through Posts. This works the same, except with simple arrow navigation links so visitors could step through previous content. There might be a use case for stepping through a series of screens.

• Random. This was neat to toss in. It’s the same as the first option, there’s only one place to go on the site, but this could be a collection of things like quotes, trivia, historical facts, and they are all posts. When the site loads, you get one at random.

So Posts run the show. There is a Page template, so you could create more content that is linked from the front (there are no built in menus beyond the social media icon one).

A few other nice tweaks in the Customizer as I play with the Range control in the customizer (why the BLEEP does it not display the range values? I’ve seen some hacks worth trying.). Sometimes the images behind seem dark, so there is a slider to change the opacity:

And there is also one to control the size of the social icons, this ought to fold into my other themes soon.

I think it’s pretty nifty, and at this point, I have it pretty well sorted how to set these themes up using HTML5up templates. You can find the others hanging in my Github home http://cogdog.github.io/#wpcards (itself using one of the themes). Three of them are available to Reclaim Hosting customers as one click installs from their cpanel.

What I like about doing these in WordPress is that it makes them much more accessible for others to use without needing to manually edit HTML, but I am able to extend the capability of what can be done in a site.

Got a template you’d like to see as a WordPress theme? I’m available for hire! Tips accepted too.

---

Featured Image: