Blog

Blog Updates

Add the Masonry Effect to Thesis Teasers

October 19, 2010 · 17 comments

Post image for 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:

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; }

Click above for a larger shot.

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.

{ 16 comments… read them below or add one }

Avi D October 24, 2010 at 3:13 pm

How would I apply this only for category archives?

Reply

Puneet Sahalot March 20, 2011 at 4:18 pm

try this
add_action( ‘thesis_hook_after_html’, ‘scripts’ );
function scripts() {
if (is_category()) { ?>
<script type="text/javascript" src="/custom/scripts/jquery.masonry.min.js”>

$(‘#content’).masonry({
singleMode: true,
itemSelector: ‘.teaser’
});

<?php }
}
Haven't checked it. But, it should work this way 🙂

Reply

Jason Davis October 18, 2012 at 6:20 pm

Matt, the original worked great. Tried adding the same for archives but php error “Cannot redeclare scripts()”

I think this would work in an else; else if; statement. Think you could / would provide that? Thanks so much.

@jasonbdavis

Reply

Jason Davis October 18, 2012 at 6:26 pm

Scratch that, silly me. I should have renamed the function. Haha it worked!

Side note*** do not forget to set your archives to “everything’s a teaser” in your design options.

I also understand this is all “post 2.0” but I’m running it in 1.8.5. Just have had zero time to relearn the platform on 2.0.

rob | relocation to atlanta October 31, 2010 at 9:05 pm

That’s pretty cool looking….sort of….but what does it do for your SEO efforts, especially if you go with the all image implementation.

I’m pretty open, but not personally feeling this.

Reply

Jules November 24, 2010 at 5:53 am

This was on my todo list to find out, thanks for writing this up!

(actually found this while looking for something else. Bookmarked!)

Reply

Rob December 7, 2010 at 5:33 pm

Hi Matt,

Great post, got it working in no time! Thanks.

Reply

Qoheletter December 8, 2010 at 1:15 pm

Is there way to do this and still have one feature post up top? I’d love to have a longer, full-column preview of my latest post, followed by tiled features excerpts.

Reply

Sam Killermann May 20, 2012 at 4:48 pm

Just set the .teasers_box to relative and you should be able to feature as many posts as you want up top.

.custom .teasers_box { position:relative; width; 100%; padding: 0; margin: 0;}

Reply

Stu - Danske Båten February 23, 2011 at 4:43 pm

I have been looking for something like this. Thank you, this tutorial was incredible easy to understand and Implementing.

Reply

Martyna Bizdra March 2, 2011 at 8:36 am

Matt

Nice to meet you, just came over from Kristarella’s site.
Would you be so kind to help me with the social media share plugins on Thesis?

I use Thesis on Wordpress.

How and where, in the files and folders of my site, should I add a code for LinkedIn Share Button?
http://www.linkedin.com/publishers
they say:
“Copy and paste the code below into the HTML for your website”

where exactly?
What I want is to have linkedIn share button on my posts, after the content, the plugins I have found so far are not what I need.
thank you!

Martyna

Reply

shashank chinchli August 17, 2011 at 10:36 pm

God ! this is great tutorial man! gonna try this on my blog ! thanks for rolling out such a great post!

Reply

James Burgos September 7, 2011 at 6:40 pm

How might this work on the genesis framework?

Reply

MItch October 9, 2011 at 4:36 pm

Does it have to be set to full-page?

Reply

Jason Davis October 18, 2012 at 6:52 pm

Hey I notice that thesis stuffs my first 2 posts in Masonry inside the div “teaser box top” and the rest of the posts in the div “teaser box”

So it displays everything as Masonry except the third post, etc… clears the first two and does not float or flow as it should.

check it out here http://flyertemplates.me

I’m checking it in firebug and the first two are hooked? inside box top. What’s the best work around here?

Thanks

@jasonbdavis

Reply

Sarah Novak October 4, 2013 at 5:38 pm

Hi – Your link to the code on Github isn’t working. Can you please update it? Thanks!

Reply

{ 1 trackback }

Leave a Comment