How To Create A WordPress Post-List Wonderwall – The Colorizer

Yesterday, we looked at creating a card-flipping post-list wonderwall. Today, we’ve got something a little less fiddly to implement, a bit more subtle and, perhaps, a little more classy.

This technique turns all of the images on a page black and white and transforms an image back to color on hover.

Welcome to The Colorizer.

First, take a look at this website created by one of WPMU DEV’s own designers. What we are going to recreate here is the monochrome images turning back to color on hover.

At the heart of this technique is the BlackAndWhite jQuery plugin by Gianluca Guarini. All we need to do is add the required Javascript libraries (jQuery and Modernizr), add some styling and, of course, output the post listing HTML.

There’s a download at the bottom of this article, which contains a child theme based on the TwentyTwelve WordPress theme.

Step 1 – Create a Child Theme

As always, the customisations are going to be added to a child theme. If you don’t know how to set up a child theme then read this article in the WordPress Codex.

Step 2 – Add the Custom Styling to Style.css

After you’ve created your child theme, you need to create a style.css file. Open it up and copy and paste in the following CSS:

.post-item-wrapper {
display: inline;
float: left;
width: 150px;
height: 250px;
margin: 5px;
}
canvas { display: inline-block; *display: inline; *zoom: 1; }
.post-title h5 a { color:#888; text-decoration:none; text-transform:uppercase; }
.bw-wrapper {
position:relative;
display:block;
width:100%;
}
.bw-wrapper canvas { margin:1px 0 0 1px;}
.bw-wrapper a, .bw-wrapper a:hover { padding:0; display: block; background-color:transparent; width:300px; }

The only consideration here is in the very first declaration, .tpost-item-wrapper, where the width and height  is set – you’ll need to set these appropriately depending on the size of the post image that you want to use in the post listing.

Also, the margins (right and bottom) are set to 5px, providing a fairly narrow gap between the images. You might want to enlarge this or remove it completely if you want the images to sit right up against each other.

Step 3 – Include the Javascript

Gianluca’s plugin obviously requires jQuery, but we also need to add Modernizr to check the capabilities of the browser. It’s probably worthwhile checking to see if your theme uses either of these libraries already.

To add these libraries to your pages, open or create a functions.php file in your child theme and add the following code:

function cf_load_javascript() {

wp_enqueue_script( 'modernizr', 'http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js', false, false, false );
wp_enqueue_script( 'jQuery', 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js' , false, false, false );
wp_enqueue_script( 'plugins', get_stylesheet_directory_uri() . '/plugins.js' , false, false, true );
wp_enqueue_script( 'scripts', get_stylesheet_directory_uri() . '/script.js' , false, false, true );
}

add_action( 'wp_enqueue_scripts' , 'cf_load_javascript' );

We are pulling the jQuery and Modernizr libraries from CDNJS just to make it easier.

The plugin.js file contains Gianluca’s code and sits in its own file in our theme. I’ve also put the Javascript to hook the BlackAndWhite effect to the images in its own file (script.js). However, it’s very small so you could insert it on the wp_footer action if you prefer:

// after images loaded
$(window).load(function(){
$('.bw-wrapper').BlackAndWhite({
hoverEffect : true,
webworkerPath : false,
responsive:true
});
});

Step 4 – Change the Content.php Template to Generate the HTML

The last step is to ensure the required HTML is output for the listing pages. To do this we only need to alter one template, content.php, to output different HTML for a post if the home page, a category listing or an archive page is being generated.

Copy content.php from the parent theme to the child theme. Open it and add this code immediately before the <article> tag:

<?php
if ( is_category() || is_home() || is_archive() ) { ?>

<div>
<div>
<a href="<?php the_permalink(); ?>"><?php echo get_the_post_thumbnail( $post->ID, 'thumbnail' ) ?></a>
</div>
<div>
<h5><a href="<?php the_permalink(); ?>"><?php the_title() ?></a></h5>
</div>
</div>

<?php
} else { ?>

Close the if statement by adding the following to the bottom of the template:

<?php } ?>

Activate and Test

Your child theme should now consist of five files: content.php, functions.php, style.css, plugins.js and script.js. Activate this child theme and jump to the site. You should now see your post listings as black and white images (with titles underneath) then become full-color on hover.

In the final instalment of this mini-series, we’ll look at the Bounce Pop, a technique inspired by one of my favorite themes, Origin from Elegant Themes.

Do you have a favorite site that uses a post-listing wonderwall? If so, let everyone know by posting a link in the comments below.

Download: coloriser-2012-child (zipped theme, requires TwentyTwelve)

Code Credits: Gianluca Guarini

Tags:

• CSS
• thumbnails