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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// enqueue the scripts'n styles... do it right! function dimension_scripts() { // dimension CSS wp_register_style( 'dimension-style', get_stylesheet_directory_uri() . '/assets/css/main.css' ); wp_enqueue_style( 'dimension-style' ); // dimension no script CSS wp_register_style( 'dimension-scriptless-style', get_stylesheet_directory_uri() . '/assets/css/noscript.css' ); wp_enqueue_style( 'dimension-scriptless-style' ); // custom jquery down in the footer you go wp_register_script( 'dimension-skel' , get_stylesheet_directory_uri() . '/assets/js/skel.min.js', array( 'jquery' ), false, true ); wp_enqueue_script( 'dimension-skel' ); wp_register_script( 'dimension-util' , get_stylesheet_directory_uri() . '/assets/js/util.js', array( 'jquery' ), false, true ); wp_enqueue_script( 'dimension-util' ); wp_register_script( 'dimension-main' , get_stylesheet_directory_uri() . '/assets/js/main.js', array( 'jquery' ), false, true ); wp_enqueue_script( 'dimension-main' ); } add_action( 'wp_enqueue_scripts', 'dimension_scripts' ); |
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:
|
1 2 3 4 5 |
<h1><?php bloginfo( 'name' ); ?></h1> <?php if ( get_bloginfo( 'description' ) !== '' ) { ?> <h2><?php bloginfo( 'description' ); ?></h2> <?php } ?> |
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:
|
1 2 3 |
<style> #bg:after {background-image: url("<?php header_image(); ?>");} </style> |
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
|
1 2 3 4 5 6 |
// add menu order to posts function dimension_posts_order() { add_post_type_support( 'post', 'page-attributes' ); } add_action( 'admin_init', 'dimension_posts_order' ); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// custom query for posts listed by menu order // exclude Hello World $exclude_hello_world = array( 1 ); $the_query = new WP_Query(array( 'post_type' => 'post', 'post_status' => 'publish', 'post__not_in' => $exclude_hello_world, 'orderby' => 'menu_order', 'order' => 'ASC', 'posts_per_page' => 8, ) ); |
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
That’s beautiful! Good work you.
It’s a beautiful theme, but I’m having some difficulties with it. For instance, none of the lovely landing page structure appears to be available. I’ve set up a series of posts, but there are no buttons for them. I’ve set the header image, site id, dimension logo, everything through the customizer, and all I have available when I load the site is the header image w/ the “home” page overlay showing.
If I try to set the landing page to “most recent posts” rather than static page, the whole site goes blank and the page says, “Fatal error: Can’t use function return value in write context in /home1/username/public_html/theroadinspain.com/wp-content/themes/wp-dimension-master/index.php on line 114”
Sorry about the trouble, but I can’t diagnose much w/ seeing the site and I’ve checked it on a few other sites where it is running. You should not use static page with this theme,it is always latest posts. Are you sure you created Posts and not pages? Were they all published? I’d be glad to help but can only make wild guesses.
Hi – No need to apologize. Actually, I should be the one apologizing–I’m not aware enough of what’s happening to ask clear questions.
I probably set it up incorrectly in some way. I can try the standard installation again.
To see if it helped, I tried the Instant Site package, but it wipes out my login credentials. I’m not sure why that’s the case.