This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
One of the defining characteristics of Thesis are “teasers” — areas that can show a linked post title and an image thumbnail, among other options.
You’ve probably seen teasers and thumbnails on Thesis showcase sites, and you may use teasers on your own domain.
But… have you used the code that generates teaser-style output in other ways?
What if you could create a line of thumbnails and post titles that highlights specified posts, where these posts are displayed in an area such as your feature box — or after your single posts?
With proper implementation, featuring a selection of posts in this way can increase the time visitors spend on your site, the number of pages they view, and generally improve your user experience.
Custom WordPress data queries make this eye-catching opportunity possible.
Let’s make a flexible PHP function that leverages the code “behind” teasers to create a new section of posts that look like this:
The code above will run “outside the loop” — in other words, this code will not change your existing WordPress settings for posts per page, nor will it change the order or what is selected to appear in your existing teasers.
Your site will behave just as it currently does, with the new addition of three custom “teasers” showing a thumbnail image and the post’s title (as a link).
Starting simply, we can restrict output to the home page with a condition, and we’ll grab the three most recent posts, minus one — this is called an offset.
Offsets determine where the query begins, and here, we want our three posts to not include the most recent post, because the first post, presumably, is already visible on the home page.
By using thesis_hook_before_content, our three posts will appear before the “loop” posts on the home page. You can change the hook to experiment with other locations.
Thumbnail and Post Title Query — Three Posts with Offset
To get the effect, add this to custom_functions.php:
function three_teasers_recent_posts() {
if (is_home()) {
$custom_loop = new WP_Query('posts_per_page=3&offset=1');
echo '<div class="home-teasers-set">';
if ( $custom_loop->have_posts() ) :
while ( $custom_loop->have_posts() ) : $custom_loop->the_post();
$post_image = thesis_post_image_info('thumb');
echo '<div class="home-teasers"><a href="' . get_permalink() . '">';
echo $post_image['output'];
echo '</a>';
echo '<div class="home-teasers-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></div></div>';
endwhile;
wp_reset_query();
echo '</div>';
endif;
}
}
add_action('thesis_hook_before_content', 'three_teasers_recent_posts');
In the above, you could modify the is_home() condition, choose a different hook for location purposes, increase or remove the offset number, or even change the number of posts_per_page that appear — changing the number of posts would require modification of the CSS also.
For initial formatting purposes, add this to custom.css:
.custom .home-teaser-set { font-size:10px; display:block; clear:both; height:auto; overflow:visible; }
.custom .home-teasers { display:block; width:30%; float:left; padding-right:1em; }
.custom .home-teasers a img { text-align:center; padding:0.6em; }
.custom .home-teasers .home-teasers-title { clear:both; font-size:1.2em; line-height:1.8em; }
Not so hard, right?
As with the PHP, you can modify the CSS to suit your taste for the font sizes, colors, and so forth.
Thumbnail and Post Title Query — Specific Categories
What if you want to display thumbnails and post titles for three posts from three different categories — ones you choose specifically?
Also not so hard — though it is more code, as each query will run separately to allow for easy adjustments to category selection.
To get three posts from any three categories, add this to custom_functions.php:
function three_teasers_three_cats() {
if (is_home()) {
$custom_loop = new WP_Query('posts_per_page=1&cat=1&orderby=date');
if ( $custom_loop->have_posts() ) :
while ( $custom_loop->have_posts() ) : $custom_loop->the_post();
$post_image = thesis_post_image_info('thumb');
echo '<div class="my-home-teasers"><div class="my-teasers left-side"><a href="' . get_permalink() . '">';
echo $post_image['output'];
echo '</a>';
echo '<div class="my-teaser-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></div></div>';
endwhile;
wp_reset_query();
endif;
$custom_loop = new WP_Query('posts_per_page=1&cat=2&orderby=date');
if ( $custom_loop->have_posts() ) :
while ( $custom_loop->have_posts() ) : $custom_loop->the_post();
$post_image = thesis_post_image_info('thumb');
echo '<div class="my-teasers middle-side"><a href="' . get_permalink() . '">';
echo $post_image['output'];
echo '</a>';
echo '<div class="my-teaser-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></div></div>';
endwhile;
wp_reset_query();
endif;
$custom_loop = new WP_Query('posts_per_page=1&cat=3&orderby=date');
if ( $custom_loop->have_posts() ) :
while ( $custom_loop->have_posts() ) : $custom_loop->the_post();
$post_image = thesis_post_image_info('thumb');
echo '<div class="my-teasers right-side"><a href="' . get_permalink() . '">';
echo $post_image['output'];
echo '</a>';
echo '<div class="my-teaser-title"><a href="' . get_permalink() . '">' . get_the_title() . '</a></div></div></div>';
endwhile;
wp_reset_query();
endif;
}
}
add_action('thesis_hook_before_content', 'three_teasers_three_cats');
Your category identifiers will change in three places — unless you happen to want categories 1, 2, and 3 — and the offset from the previous example is removed under the presumption that duplication is not an issue — if it is, you can add an offset as needed.
The orderby=date is technically not needed, as this is default. However, you could change this parameter from “date” to “rand” if you wanted random posts from one or more of the categories when the page loads.
Finally, the conditional statement can be changed as well — in the function above, the three-pack of posts will only run on the home page.
For “starter” formatting, add this to custom.css:
.custom .my-home-teasers { font-size:10px; display:block; clear:both; height:auto; overflow:visible; }
.custom .my-teasers { display:block; width:30%; float:left; padding-right:1em; }
.custom .my-teasers a img { text-align:center; padding:0.6em; }
.custom .my-teasers .my-teaser-title { clear:both; font-size:1.2em; line-height:1.8em; }
Congratulations, you now have three “mini posts” from different categories, where the title of each links to the full version of the post.
As you can see, custom WordPress queries are a powerful way to manipulate content.
The example shown here of pulling thumbnails and the linked post title is one of infinite possibilities — pulling a desired set of data with a custom WordPress query can do just about anything related to your content data.
In other words, have some fun — be sure to try your ideas for custom queries!