How to implement “Equal Height Blocks in Rows” jQuery in WordPress

In one of the website projects I am currently working on, client is using Easy Digital Downloads plugin which outputs list of products in a grid with 3 blocks per row. The problem is that each block has a different height due to the amount of content in it.

Screenshot:

All Tutorials -- Balloon Academy

I wanted to find a way to calculate the height of tallest block in each row and set the height of every block in a row to that. A quick google search landed me on this article on css-tricks.

Here’s how jQuery code given in the above article can be incorporated in a WordPress site.

But first, a screenshot of the result:

All Tutorials -- Balloon Academy

Here’s how this can be achieved in WordPress:

Step 1

Create a file named say, equalheight.js having this code into your site’s root/assets directory.

In the code, make sure to replace .edd_download with the CSS selector that is common for each block.

Step 2

Add this in child theme’s functions.php:

// http://css-tricks.com/equal-height-blocks-in-rows/
function my_equal_height() {
	if (is_page('16454')) {
    	wp_enqueue_script( 'equal_height', get_bloginfo('wpurl').'/assets/equalheight.js', 'jquery', null, true );
	}
}
add_action( 'wp_head', 'my_equal_height' );

Because I wanted the script to load only on a particular page having the products grid, I specified its ID in the above. You should change the ID or remove the if conditional as you see fit.

That’s it.

Source: http://wordpress.stackexchange.com/a/46692

Comments

  1. Thanks for this great information. I expect to use this code in a project I will be starting soon. As always, your advice and code is perfect and so nicely explained. Thanks:-)

    • You are welcome.

      It should be possible to use this method for making widgets of a widget bar module to have equal height as well.

Leave a Reply