Thesis With More Than Two Teasers In Each Row

Having produced an earlier solution for Thesis to have three teasers per row, I have had a few requests for solutions for 4 and even 5 teasers per row. These small teasers are useful where just a title and a thumbnail is to be displayed but no text.

The approach I have adopted to keep the code tidy is to put the JavaScript in separate files called jquery.n_teasers_per_row.js and put this file in the custom folder where the n is either three, four, five or six. This approach keeps the PHP in the Thesis custom_functions.php simple.

Three Teasers Per Row

I put the JavaScript in a file ../themes/thesis/custom/jquery.three_teasers_per_row.js

function three_teasers_per_row() {
  last_teaser = jQuery('.teaser').size()-1;
  jQuery('.teaser').each(function(index) {
     if ((index % 6) == 2) {
         jQuery(this).clone().appendTo(jQuery(this).parent().prev());
         jQuery(this).remove();
     }
     if (((index % 6) == 3) && (index < last_teaser)) {
         jQuery(this).clone().prependTo(jQuery(this).parent().next());
         jQuery(this).remove();
     }
  });
  jQuery('.teasers_box').each(function(index) {
     if (((index % 3) == 1) && (jQuery(this).children().size() == 0))  {
         jQuery(this).remove();
     }
  });
  jQuery('.teaser').each(function(index){
    jQuery(this).addClass('teaser3').removeClass("teaser_right");
  });
}
jQuery(document).ready( function () { three_teasers_per_row(); });

Here is the CSS. You may need to tweak the width according to the size of your content area

.custom .teaser3 { width: 210px; padding-right:20px; } //change width to allow 3 columns
.custom .teaser3 .format_teaser p { display: none } //hide the text but not the teaser thumbnail

Here is the PHP to gi custom_functions.php. In this example I am enabling, three teasers per row on just the home page

function add_jquery_stuff () {
   if (is_home()) {
      echo ('<script type="text/javascript" src="'.THESIS_CUSTOM_FOLDER.'/jquery.three_teasers_per_row.js"></script>');
   }
}
add_action('wp_footer', 'add_jquery_stuff');

Four Teasers Per Row

I put the JavaScript in a file ../themes/thesis/custom/jquery.four_teasers_per_row.js

function four_teasers_per_row() {
  jQuery('.teaser').each(function(index) {
     if ((index % 4) > 1) {
         jQuery(this).clone().appendTo(jQuery(this).parent().prev());
     }
  });
  jQuery('.teasers_box').each(function(index) {
     if ((index % 2) == 1) {
         jQuery(this).empty().remove();
     }
  });
  jQuery('.teaser').each(function(index){
    jQuery(this).addClass('teaser4').removeClass("teaser_right");
  });
}
jQuery(document).ready( function () { four_teasers_per_row(); });

Here is the CSS that is similar to that above. You may need to tweak the width according to the size of your content area

.custom .teaser4 { width: 150px; padding-right:20px; }
.custom .teaser4 .format_teaser p { display: none }

Five Teasers Per Row

I put the JavaScript in a file ../themes/thesis/custom/jquery.five_teasers_per_row.js

function five_teasers_per_row() {
  last_teaser = jQuery('.teaser').size()-1;
  jQuery('.teaser').each(function(index) {
     i = (index % 10);
     if ((i== 2) || (i ==3) || (i==8) || (i==9))  {
         jQuery(this).clone().appendTo(jQuery(this).parent().prev());
         jQuery(this).remove();
     }
     if (i==4)  {
         jQuery(this).clone().appendTo(jQuery(this).parent().prev().prev());
         jQuery(this).remove();
     }
     if ((i==5) && (index < last_teaser)) {
         jQuery(this).clone().prependTo(jQuery(this).parent().next());
         jQuery(this).remove();
     }
  });
  jQuery('.teasers_box').each(function(index) {
     i = (index % 5);
     if (((i == 1) || (i==2) || (i==4)) && (jQuery(this).children().size() == 0))  {
         jQuery(this).remove();
     }
  });
  jQuery('.teaser').each(function(index){
    jQuery(this).addClass('teaser5').removeClass("teaser_right");
  });
}
jQuery(document).ready( function () { five_teasers_per_row(); });

Here is the CSS that is similar to that above. You may need to tweak the width according to the size of your content area

.custom .teaser5 { width: 120px; padding-right:15px; }
.custom .teaser5 .format_teaser p { display: none }

Six Teasers Per Row

I put the JavaScript in a file ../themes/thesis/custom/jquery.six_teasers_per_row.js

function six_teasers_per_row() {
  jQuery('.teaser').each(function(index) {
     if ((index % 6) > 1) {
         jQuery(this).clone().appendTo(jQuery(this).parent().prev());
     }
  });
  jQuery('.teasers_box').each(function(index) {
     if ((index % 3) > 0) {
         jQuery(this).empty().remove();
     }
  });
  jQuery('.teaser').each(function(index){
    jQuery(this).addClass('teaser6').removeClass("teaser_right");
  });
}
jQuery(document).ready( function () { six_teasers_per_row(); });

Here is the CSS that is similar to that above. You may need to tweak the width according to the size of your content area

.custom .teaser6 { width: 100px; padding-right:10px; }
.custom .teaser6 .format_teaser p { display: none }

Please feel free to make a donation is you find any of the above useful or you would like me to do for the tutorial for seven or more teasers per row.

Thanks

Russell

Tagged as: jQuery, teaser