Three Teasers Per Row Without Hacking Thesis

As promised this is the non-hack solution to 3 teasers per row problem which involves only changes to custom_functions.php and custom.css- no changes to Thesis core code are required. This version should therefore survive upgrades to Thesis.

The solution uses jQuery and applies a simple algorithm. Firstly, remember that Thesis makes a ‘teaser box’ for each row and puts two teasers in each teaser box. My goal is to have 3 teasers in each teaser box.

Algorithm To Put Three Teasers in Each Teaser Box

The jQuery below processes every third teaser box starting at the second box and

• copies the first teaser into the previous teaser box
• copies the second teaser into the next teaser box
• removes the teaser box

The PHP code below is set up to have 3 teasers per row on the home page and 1 teaser per row on archive pages. Where we have 3 teasers per row it also shortens the post titles at the last complete word in the title to avoid wrapping text across multiple lines.

Also CSS is used to set the width of each teaser and on the home page to suppress the teaser text to leave just the title and the thumbnail image.

function add_jquery_stuff () {
 if (is_front_page()) {
?>
<script type="text/javascript">
function shorten(sometext,maxlen) {
  if (sometext.length<=maxlen) return sometext;
  var s = sometext.substr(0,maxlen);
  return (s.lastIndexOf(" ")<1?s:s.substr(0,s.lastIndexOf(" ")))+"...";
}
</script>
<script type="text/javascript">
jQuery(document).ready( function () {
  jQuery('.teaser').each(function(index) {
     if ((index % 6) == 2) {
         jQuery(this).clone().appendTo(jQuery(this).parent().prev());
     }
     if ((index % 6) == 3) {
         jQuery(this).clone().prependTo(jQuery(this).parent().next());
     }
  });
  jQuery('.teasers_box').each(function(index) {
     if ((index % 3) == 1) {
         jQuery(this).empty().remove();
     }
  });
 jQuery('.teaser').each(function(index){
    jQuery(this).addClass('teaser3').removeClass("teaser_right"); //3 teasers per row on home page
  });
 //shorten titles
 jQuery('.teaser a[rel=bookmark]').each(function(index){
    var t = jQuery(this).text();
    jQuery(this).text(shorten(t,24));
  });
});
</script>
<?php
 }

if ( is_archive()) {
?>
<script type="text/javascript">
jQuery(document).ready( function () {
  jQuery('.teaser').each(function(index){
    jQuery(this).addClass('teaser1');  //one teaser per row on archive pages
  });
});
</script>
<?php
  }
}
add_action('wp_head','add_jquery_stuff');

As with the earlier examples we tweak the CSS with classes teaser1 and teaser3 for where we want 1 and 3 teasers per row respectively. You need to set these widths according to the width of your page.

.custom .teaser1 { width: 55em; }
.custom .teaser3 { width: 193px; padding-right:6px; }
.custom .teaser3 .format_teaser p { display : none }

The last line in the CSS hides the text – the client just wanted to display an image as the teaser on the home page where we have 3 teasers per row.

Sample Home Page Teasers

Sample Archive Page Teasers

Potential Issue with thesis_hook_before_teasers_box Hook

I have not tested this solution where the ‘thesis_hook_before_teasers_box’ hook is being used. This badly named hook actually inserts content at the start of the teaser box before the first teaser rather than before the teaser box as its name suggests. I suspect that my solution will not work well if you use this hook.

If anyone has a problem with this jQuery solution please email me and will add a fix to handle this scenario – unless Chris Pearson decides to change the ‘thesis_hook_before_teasers_box’ hook to run before the teaser box first.

Tagged as: jQuery, teaser