I’ve taken a second stab at converting the elegant, Creative Commons licensed static HTML themes from HTML5 UP and baking it into a WordPress calling card theme.
The first one I did was based on the Dimension theme, and got a nice tweet from Dan who just put it to use
Holy crap! I have a website…https://t.co/kkk8JEixgy …still a work in progress, but thx to @cogdog for inspiration to get me started…
— Dan Zuberbier (@dpzuberbier) September 3, 2017
The need for that one originally was to have something at the top of WordPress multisite suite for Mariana Funes, but I’ve been more interested in offering this for people just starting their Own Domains.
The idea is to think of a domain as not just one blog, but a collection of sites. It makes sense to put a landing page or calling card at the top, not just a blog (ignore my own example! Do as I say, not as…). This was what I put into place for the Ontario Extend effort to start people with domains with a simple site that they should outgrow soon.
That was the case when @Nursekilliam jumped in with my Wp-Dimension theme (leading to useful updates). Then she DM-ed and said she really liked the Big Picture theme from HTML5 UP.
I offered no promise, but was curious what it would take to do a second creation of a theme from the HTML UP template. Voila! See the live demo
.
The theme may have a bit too much animation and parallax for some, but doing this was my own challenge. Now that it is done (first beta version on GItHUb now) I’m happy as the WordPress version is to me, more flexible than the original.
This is because the HTML5 Up theme is hard coded to a fixed number of sections in the page, and hard coded in the style sheets.
The top of the site, the intro, is all designed with the WordPress Customizer. The default background image of Kamloops is easily changed with the Header Image option in the Customizer; and that means one could upload many images, and use the setting to a random one is displayed on every page load.
And rather than having a fixed set of social media icons in the footer, my theme makes use of a plugin for creating social media menu items, where the choice, order, and links are all set in the Customizer.
But the real flex is in the sections below the top intro section, they are all simple WordPress Posts, with the order of appearance a user option. By using large sized image as a a featured image, generates output where content / background slide in as an animation, and have a simple block text of title (post title) and a small bit of content.
They are automatically alternated in left/right orientation.
And you can create longer content, whatever you can get in a blog post, but creating one that lacks a featured image. This gives room for whatever content, media you can cram in a post.
I even added a sneaky way to create a WordPress gallery, then modify the shortcode name, and BOOM! You get the animation / slideshow version you see in the original html theme.
The HTML5 UP animated gallery can be rendered in WordPress via a special shortcode
But see it all in action at http://lab.cogdogblog.com/bigpicture/#content.
The second one was easier in some aspects; I already had code I could copy from the first theme for setting up the Customizer, adding the post metaboxes. The structure of the theme is simple:
- Header template (
header.php) - Footer template (
footer.php) - index template (
header.php) - A functions template (
functions.php)
This theme took a bit of gymnastics to set up the IDs for each section, building menus out of that, and dynamically writing CSS in the top of the template. There’s probably more fancy pants programming ways to this!
But it’s beta, baby. Give it a spin. Loaded documentation here too.
Featured Image: It comes as a default header image for the new theme, it’s mine! Where the Rivers Meet flickr photo by cogdogblog shared under a Creative Commons (BY) license
This is awesome, I may have to try this out for my own calling card page. Groom, Jimmy Groom 🙂
Like Jim, I too have been taken by the simple but effective theme Alan. I have spun up sub-domain for it (https://home.readwriterespond.com/), thinking that if I ever work it a better home for it I can move it then. Beats my old-school ‘About Me’ page.
My only wondering is whether in the ‘Intro Blurb’ I could have some sort of dynamic text? (See Doug http://dougbelshaw.com/ and Ian http://wiobyrne.com/ calling card.) I guess that might be something for me to explore sometime.