(This tutorial is specifically for the Thesis theme, but can be adapted to work with any WordPress theme).
Thesis comes with an undeveloped feature called the Feature Box. By going into Design Options and turning it on, you’re given an additional content area at the top of the page, and the ability to modify it using the hook thesis_hook_feature_box.
A client (Harvest Eating) wanted a way to showcase featured posts on the homepage while maintaining Thesis’ most recent posts listings below. I used the Featured Content Gallery plugin (with a few modifications) inside the Feature Box. I’ll walk you through the process.
Note: Right now this will only work if you have it set to Individual Post or Page ID’s. Using the category option will cause Thesis to think you’re on a category archive page, and display only those posts. In the future I might rebuild this plugin with Chris Bratlien to function in both modes.
First, install the Featured Content Gallery plugin (from now on, referred to as FCG). Go to Settings > FCG and set it up how you like. Here’s how I have it on my client’s site:
- Individual Post or Page ID’s,
- Randomize post display
- Gallery Width/height: 480/270
- Text overlay height: 60
- Slide Display Duration / Fade Duration: 9000 / 500
- Simple Fade
Once you have the settings how you want them, it’s time to add the FCP to the feature box. First, go to Design Options and turn on the feature box. Then, go to your custom functions file and add this code:
function custom_featurebox(){
global $post;
include (ABSPATH . '/wp-content/plugins/featured-content-gallery/gallery.php');
}
add_action('thesis_hook_feature_box','custom_featurebox');
Then you use CSS to customize the look and feel of the feature box.
There’s one problem: FCP uses a custom field called “articleimg” to store the URL of the displayed image. But Thesis uses a custom field called “thesis_post_image,” and I didn’t want to have two custom fields listing the image URL. FCP also displays a description of the post on the image. If you use the custom field “featuredtext” it will display that; if not, it will display the first part of the content. But, we’re already writing excerpts for these posts, why not reuse them?
I modified the FCP code to take care of these two problems. Here’s what you need to change.
In the gallery.php file (in the FCP plugin directory), change this:
get_a_post($post_or_page_id); ?>
<div>
<h2><?php the_title() ?></h2>
<?php
if(get_option('gallery-use-featured-content')) {?>
<p><?php $key="featuredtext"; echo get_post_meta($post->ID, $key, true); ?></p>
<?php
} else {
?>
<p><?php the_content_rss('', 0, '', $wordquantity); ?></p>
<?php
}
?>
<a href="<?php the_permalink() ?>" title="Read More"></a>
<img src="<?php $key="articleimg"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" />
<img src="<?php $key=$imgthumb; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" />
</div>
To this:
get_a_post($post_or_page_id); ?>
<div>
<h2><?php the_title() ?></h2>
<?php $desc = get_the_excerpt();?>
<p><?php echo $desc; ?></p>
<a href="<?php the_permalink() ?>" title="Read More"></a>
<img src="<?php $key="thesis_post_image"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" />
<img src="<?php $key=$imgthumb; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php $key="alttext"; echo get_post_meta($post->ID, $key, true); ?>" />
</div>
That should do it. Now you can use FCP without having to mess with any custom fields – it will just use the one’s generated from Thesis.
All Thesis Tips:- Adding “nofollow” to Category Links
- Thesis Tip #18 – Full Width Navigation
- Thesis Tip #17 – Adding Content Between Posts
- Thesis Tip #16 – Redirect Pages
- Thesis Tip #15 – Custom Author Pages
- Thesis Tip #14 – Add Related Posts Before Comments Link
- Thesis Tip #13 – Using Gravatars in WordPress
- Thesis Tip #12 – Adding Custom Headers to Category Pages
- Thesis Tip #11 – Clickable Logo in Header
- Thesis Tip #10 – Filter Categories from Homepage
- Thesis Tip #9 – Custom Options Page
- Thesis Tip #8 – Change Next and Previous Post Text
- Thesis Tip #7 – Import and Export Your Design
- Thesis Tip #6 – Print Stylesheets
- Thesis Tip #5 – Featured Content Rotator
- Thesis Tip #4 – Adding Classes to Body
- Thesis Tip #3 – Multiple content areas
- Thesis Tip #2 – Additional Sidebars
- Thesis Tip #1 – Custom Images and Category Pages
Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis or Genesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).
{ 1 trackback }