Add the Masonry Effect to Thesis Teasers

The Masonry effect has become popular among different web sites to achieve a unique layout. Using the jQuery Masonry code, I’ll show you how to get this effect with Thesis teasers.

What is jQuery Masonry?

Taken straight from the site:

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS floats. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically then horizontally according to a grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.

To give you an even better idea, check out these sites:

• The Inspiration Stream | Veerle’s blog 3.0
• Chromeography
• Scaffold Theme

Download the Code

First, you’ll need to download the jQuery code and move it to your site.

Download it here and move it to a new folder in your Thesis custom folder, called scripts. Make sure the file has the .js extension and not a .txt or .htm extension.

Use Teasers and Enable jQuery

In order for this to work you’ll  have to disable featured posts and use teasers. Go to your WP Dashboard and to your Thesis Design Options. Find Featured & Teasers and change the value to 0.

We’ll also have to enable jQuery for the homepage, so under that option find JavaScript and enable jQuery library.

Design Options

You’ll probably also want to make a few other changes in Thesis Options (if you haven’t already have it set this way). Under Site Layout, change the HTML Framework to Full-width framework and drop down Body (and Content Area) and uncheck Show interior layout borders.

Write the Function

Now you’ll need to open up custom_functions.php found in your custom folder and add the code below somewhere in that file:

add_action( 'thesis_hook_after_html', 'scripts' );
function scripts() { ?>
  <script type="text/javascript" src="<?php echo get_bloginfo(template_directory); ?>/custom/scripts/jquery.masonry.min.js"></script>
  <script type="text/javascript">
    $('#content').masonry({
      singleMode: true,
      itemSelector: '.teaser'
    });
  </script>
<?php }

At this point the code is in place and your teasers will be Masonry-ed, however they probably don’t look the best so we’ll look at styling them.

Style the Teasers

Finally, open up your custom.css file, again found in the custom folder. Add the code below to get a better set of teasers:

.prev_next { position: absolute; bottom: -25px; width: 100%; }
#content { padding-bottom: 30px; position: relative; }
.teaser { padding: 5px; margin: 6px; background: #eee; }

What this CSS code does is simply adds some spacing background around each teaser and fixes the previous/next post navigation. Now you should see the final product, similar to the attached screenshot.

It doesn’t end here though- the Masonry plugin is very powerful and can do much, much more then just stylishly line up your teasers. Check out the documents and demos to see the full effect of Masonry and try something new with your Thesis site.