How To Hack Thesis To Have More Than Two Teasers Per Row

I have a client who has specific requirements regarding their home and archive pages: the home page needed to show 3 teasers with titles and thumbnails but no text; and the archive page needed to show a single teaser per row that included title, thumbnail and text excerpt.

Out of the box, Thesis shows two teasers per page: this is hard coded in the thesis/lib/functions/loop.php file. Not good. It gives two teasers a page but I need 3 on the home pages and 1 on an archive page. I feel a hack coming on…

Anyway, having looked for some time at doing something clever in custom_functions.php I eventually gave up and decided to make minor tweaks to Thesis core.

Changes to loop.php

As well as adding some new elements to custom.css I modified thesis_home_loop as follows to remove the hard coding of two teasers per row but still defaulting to two teasers per row – in other words the normal behaviour is unchanged:

function thesis_home_loop() {
    $post_count = 0;
    $teaser_count = 0;
    global $teasers_per_row;
    if (empty($teasers_per_row)) $teasers_per_row = 2;

    while (have_posts()) {
      $post_count++;
      the_post();

      if (thesis_is_teaser($post_count)) {
        $teaser_count++;
        $top = ($post_count == 1) ? ' top' : '';
        $open_box = "";
        if (($teasers_per_row== 1)
        || (($teaser_count % $teasers_per_row)== 1))
            $open_box = '<div class="teasers_box' . $top . '">' . "\n";
        $close_box = ($teaser_count % $teasers_per_row) == 0?'</div>':'';
        $right = (($teaser_count % $teasers_per_row) == 0) && ($teasers_per_row > 1) ;

        if ($open_box != '') {
            echo $open_box;
            thesis_hook_before_teasers_box($post_count);
        }

        $classes = $teasers_per_row==2?"teaser":("teaser teaser".$teasers_per_row);
        thesis_teaser($classes, $post_count, $right);

        if ($close_box != '') {
            echo $close_box;
            thesis_hook_after_teasers_box($post_count);
        }
      }
      else {
        $classes = 'post_box';

        if ($post_count == 1)
            $classes .= ' top';

        thesis_post_box($classes, $post_count);
        $close_box = "noteaser";
      }
    }
    if (($teaser_count > 0) && ($close_box == ''))
      echo '</div>' . "\n";
}

Changes to teasers.php

I also changed one line in wp-content/themes/thesis/lib/functions/teasers.php so it handles the input parameter $classes.

$classes = 'teaser';

is replaced by

if (stripos($classes, 'teaser') === false) $classes = 'teaser';

This means the input parameter $classes is not ignored and can be set externally, to either teaser1 or teaser3 depending on how many teasers per row I want to display.

Changes to custom_functions.php

The final PHP change is in custom_functions.php as follows:

add_action('thesis_hook_before_content_box','set_teasers_per_row');
$teasers_per_row = 2;
function set_teasers_per_row(){
  global $teasers_per_row;
  $teasers_per_row = is_home()?3:(is_category()?1:2);
}

This means that on the Home page we have 3 teasers per row; on a categories page we have 1 teaser per row and on any other page we have the default on two teasers per row.

Changes to custom.css

The additional lines in custom.css were as follows to set the column appropriately according to the number of teasers per row:

.custom .teaser1 { width: 55em; }
.custom .teaser3 { width: 20em; }
.custom .teaser3 .myteaser {display : none}

The first line handles one teaser per row; the second line allows 3 teasers per row; and the third line hides any content qualified by the myteaser class where 3 teasers are being displayed, i.e. the home page: this last point was a requirement of my client where she wanted only a title and an image to appear for teasers on the home page.

Creating a Teaser For Display As One Per Row Or Three Per Row

A typical teaser/excerpt is as follows consisting of a left aligned thumbnail and some text.

<img style="float:left;padding-right:10px" src="http://client-xxx.com.s3.amazonaws.com/thumb1.jpg"/><div class="myteaser"><h2>Latin Tips</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc quam lacus, imperdiet in mollis eget, pellentesque sit amet mauris. Pellentesque euismod sodales metus ut consequat. Sed a neque eget orci pharetra dignissim. In hac habitasse platea dictumst.</p></div>

On an archive page the teaser appears as a thumbnail with some text with a single teaser per row but on the home page only the thumbnail appears and we have three thumbnail per row.

Suggested Improvements For Thesis

Ideally I would like Chris Pearson to amend the teaser handling so it is more flexible.
I would suggest he removes the hard coding of 2 teasers a row and updates the teaser settings on the Thesis Design Options page so the user can choose between 1, 2, 3 or 4 teasers per row. Hey, I have done the coding, all he needs is a little ‘cut and paste’.

Tagged as: teaser