More Than Two Teasers Per Row In Thesis

Having produced an earlier solution 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 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 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_head', '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==4) || (i==8) || (i==9))  {
         jQuery(this).clone().appendTo(jQuery(this).parent().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

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Tagged as: jQuery, teaser