I’m fairly sure this blog post and the README write up a new WordPress Theme are going to take as long as it took to do the coding. That’s okay, it’s important.

The path I took was similar when I was looking for a simple landing for the main site of the WordPress Multisite for Networked Narratives. So many of the “simple” WordPress ones are feature bloated, or all look the parallax 3 big icon same.

I’m helping Mariana Funes set up her galaxy of sites into a newer domain, I got her profile site moved from one server, updated (this is a static HTML Treble theme I have used many places). We are moving a bunch of her sites into one multisite, and I suggested something simple like a calling card at the top, and sent her to look at the HTML5up themes since I had already experience converting one of them into a WordPress theme.

I suggested looking at Identity, I am using as my GitHub main entrance but I agreed with her choice that Dimension was a good choice.

It’s one screen, and the boxed links below each pull up a blurb in an overlay which could then link to external sites:

And rather than going back to square 1 with the excellent envato tuts+ guide I used before I could actually start with a copy of the arganee.world one I already did.

I went through first and changed the hard coded theme elements to link the stylesheets and Javascript libraries to use WordPress enqueues (and skipping jQuery since wordpress does that), and setting the dependencies as needed for jQuery

The way those buttons work in Dimension is hard coded into the template; the buttons are a list and all the content comes from divs that are invisible. I could slap it together and call ti done, but I dared myself to see if I could do it all as a general theme, that both Mariana and anyone else could modify from within WordPress.

So my first release of Wp-Dimension is now available and you can see it in (not yet filled in action) at http://marianafun.es.

In doing this, I for the first time made use of the WordPress Theme Customize API for the place you change settings. Pat Lockley had suggested to me in twitter eons ago, I am glad I finally listened to him. Now I can see how it’s much easier for my SPLOTs for theme settings.

The beauty of using the Customizer is you see a preview of the results of changing settings before they are saved. So in this new theme, the easy thing, was using the Site Identity (that already comes, those are from the WordPress Settings) for Site Name and Tagline:

Those are just built in WordPress functions, and the tagline is only displayed if it used:

And I also am making use of the built in Customizer settings for background image:

UPDATE: Feb 25, 2017 I switched this to using the built in Customizer settings for Set Header:

Using the header setting allows you to optionally have a pool of images chosen at random

I just manually added the CSS needed dynamically to the header.php template using the class ID that the theme uses:

But now, I was able to add my new sections to the Customizer using the code I found in a post from WP Beaches. This was easy to make it so there is a new Customizer section called Dimension Front Text, with one textarea that lets you add or edit the quote that appears below the subtitle and/or optionally change out the default footer:

This was almost too easy.

The next part bogged my down a bit more. The theme uses Font Awesome icons to out that little icon at the top, but I can see wanting a way to upload an image to use in its place. I got the CSS working to do this, and started using the Customizer’s Site Identity image using the Codex example code for Custom Logo. It worked on my test site, but kept failing in Mariana’s site (and another one I checked), until I realize this required WordPress 4.5 or higher to work.

So I went back and found some code to add an image uploader to a Customizer controller, and had that working in about 30 minutes:

That was mostly fine tuning and fumbling with some new code. The more tricky part was figuring out a way to set up the buttons and content it would load for the bottom row. I decided to use plain old posts to generate the content- the title becomes the button name, and featured image, content, and an optional button are all generated from post content:

Ahh, but how to control the order besides the hack of editing the dates… easy. You can add the same feature WordPress Pages uses to posts, that is a box to set the order. It’s as easy as adding to functions.php

so in the Post editor on the sidebar we get:

So just change the order to a higher integer to set the order.

This means I have to use a custom query for the main loop (including a clever hack to not include the inane “Hello World” post) – this gets up to 8 posts (4 or 6 is better) sorted by the order feature added above.

I even have a little message if it finds no non-Hello World posts to use:

Me so fancy!

I’ve already tossed enough code here, but I actually have to run through the Loop twice, the first time to write all the titles as button names, linked to a div with a matching ID, insert the featured images if set; and a second one to write out the content in that non-displayed div).

One more trick was added, since I wanted to have a button at the bottom be there if a URL was provided as post meta data (and also to link from the featured image). On my first past, I used custom fields, but went back and dusted off my chops at add a “meta box” (these are much easier for non techie users to manage). I went one step further and set a field to specify the class name of a Font Awesome icon for the button:

Anyhow, I think this is enough for now, I am pretty pleased I was not only able to convert an elegant, Creative Commons licensed static HTML 5 template into a WordPress theme, but have it fully customizable to anyone can make it their own.

This is a first release and I am fairly sure it is bug free… well you never know. The use cases I see are as in this one where a personal site in multisite needs a simple site at the top (or anywhere inside) or maybe an institutional server where you want to provide a simple info site template.

I might use it on my cog.dog domain, byt I frankly would likely go back to the source static html template there. People may have all kinds of requests, and if you really want it customized, the WordPress route is perhaps not ideal.

Heck I almost did it… because I can.

But give the new WP-Dimension a go and let me know if it works for you.

The demo screenshot for my new WordPress Theme, find it all at https://github.com/cogdog/wp-dimension. I made this from running my development site locally with Varying Vagrant Vagrants

The post "A New Dimension of a WordPress Theme" was originally pulled from under moldy cheese at the back of the fridge at CogDogBlog (https://cogdogblog.com/2017/02/new-dimension/) on February 19, 2017.

1 Comment

Leave a Comment

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

Creative Commons License
A New Dimension of a Wordpress Theme by CogDogBlog is licensed under a Creative Commons Attribution-Share Alike 4.0 License.