What else to do on a chilly, blustery, snowy day, sitting on the couch, in front a warm fireplace, side by side blogging with my Cori… then to fiddle with my WordPress themes?
Yeah, as she says a compliment, I am weird.
This week I was helping my friend Mariana do some revamps, web site cleaning on her domain, and it was the main entry for her WordPress multisite that got me making the first version of WP-Dimension, a WordPress version of the nifty static site by HTML5 Up.
While I am geeky enough to want to be edit and update my own HTML version of the template, that’s not everyone’s idea of fun. And like the others I have done, when making WordPress versions there are things that make it easier to expand the original theme, such as having any number of front page links, adding social media icons just via a WordPress menu, all of WordPress’s media handling, and having stand alone Pages for longer content.
Mariana and I agreed to condense another longer portfolio site I had made that was itself just HTML, and winnow it down to a WordPress page that could live on her WP-Dimension site.
As I was working, a few minor improvements occurred to me that are now just rolled into the current version of WP-Dimension:
Rebranded Posts: Each of the boxes of content on the front page (clicking one brings up content in an overlay layer) is itself a separate WordPress post. Inside the editor, it seems not appropriate to call them Posts, so with some code I use elsewhere, they still use the Post Content type, but I am able to label them in the dashboard to be known internally as “Front Boxes”:
Posts are renamed “Front Boxes”, and the menu order paramater added to the post type allows a user to control the order of appearance.
To be extra fancy, I can even change the status messages when updated.
|
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 |
// change the name of admin menu items from "Posts" to be "Front Boxes" // -- h/t https://wordpress.stackexchange.com/a/9224/14945 // change the prompts and stuff for posts to be relevant to Front Boxes add_action( 'init', 'dimension_change_post_object' ); function dimension_change_post_object() { $thing_name = 'Front Box'; global $wp_post_types; $labels = &$wp_post_types['post']->labels; $labels->name = $thing_name . 'es'; $labels->singular_name = $thing_name; $labels->add_new = 'Add ' . $thing_name; $labels->add_new_item = 'Add ' . $thing_name; $labels->edit_item = 'Edit ' . $thing_name; $labels->new_item = $thing_name; $labels->view_item = 'View ' . $thing_name; $labels->search_items = 'Search ' . $thing_name; $labels->not_found = 'No ' . $thing_name . ' found'; $labels->not_found_in_trash = 'No ' . $thing_name . ' found in Trash'; $labels->all_items = 'All ' . $thing_name . 'es'; $labels->menu_name = $thing_name . 'es'; $labels->name_admin_bar = $thing_name; $labels->attributes = $thing_name . ' Properties'; } // edit the post editing admin messages to reflect use of Front Boxes // h/t http://www.joanmiquelviade.com/how-to-change-the-wordpress-post-updated-messages-of-the-edit-screen/ add_filter( 'post_updated_messages', 'dimension_post_updated_messages', 10, 1 ); function dimension_post_updated_messages ( $msg ) { $msg[ 'post' ] = array ( 0 => '', // Unused. Messages start at index 1. 1 => "Front Box updated.", 2 => 'Custom field updated.', // Probably better do not touch 3 => 'Custom field deleted.', // Probably better do not touch 4 => "Front Box updated.", 5 => "Front Box restored to revision", 6 => "Front Box published.", 7 => "Front Box saved.", 8 => "Front Box submitted.", 9 => "Front Box scheduled.", 10 => "Front Box draft updated.", ); return $msg; } |
The other thing that has been counter-intuitive on this theme, is when you edit a Post Front Box, there was no single.php template to view it, because they are never really viewed singly (the content is in the main index.php template as a series of divs that are not displayed until a button is clicked.
So if you clicked to view/preview an entry, you just would end up seeing the front page (thank you WordPress template hierarchy). I started to create a full template, but really noticed that all you need to know is the div’s id to show it; e.g. http://lab.cogdogblog.com/dimension/#writing or http://lab.cogdogblog.com/dimension/#about.
So this was interesting, check out the new single.php template, rather cleve if I say so myself.
|
1 2 3 4 5 6 7 8 9 10 11 |
// get a value of the button label $button_label = get_post_meta( get_the_ID(), '_button_label', true ); // set the proper ID to find on index page $go_link = ( empty( $button_label ) ) ? ? sanitize_title( get_the_title( get_the_ID() ) ) : sanitize_title( $button_label ); // weeee, go there! wp_redirect ( get_site_url() . '/#' . $go_link ); exit; |
The last little thing to add was for documentation, there is a shortcode that lets you put link buttons in any content.
That’s all fine, but what I really liked was when I decided to see if there were some more examples I could add to the theme’s readme… I was able to triple the previous list.
Again, like I did for WP-Big Picture, I was able to search on a unique phrase in the footer, e.g. “WP Dimension Based on HTML5 Up”.
Quite a few calling card sites for folks here and there; two examples were for people into Yoga. And nifty project sites like Science in the Learning Gardens and Origin the Coventry University Art and Design Research Hub.
I’m hopeful soon we can make WP-Dimension a new one click install via the Reclaim Hosting cpanel.
I have a soft spot for WP-Dimension, because it was the first of now four that I have made WordPress versions of the beautiful, elegant, and openly licensed HTML5 Up templates. The things I learned making this first one made numbers 2,3, and 4 much simpler to do.
There likely will be more.
Featured image: Pixabay image by 4047295 shared into the public domain using Creative Commons CC0
.
