There are many tutorials out there about adding a feature box to Thesis, but they all have one fatal flaw: they tell you to use a “Featured” category. This seems innocuous enough, but it causes unwanted results for my clients: they now have a category that shows up in widgets and other areas of the blog. In this tutorial, I will show you how to implement the feature box by using custom fields.
First, we will need to set up the code for the feature box. You do this by going to your WordPress admin area and selecting “Thesis” >> “Custom File Editor”. Once there, select “custom_functions.php” from the dropbox near the top of the page, just above the text area. Then click the “Edit Selected File” button just to the right. Now, copy the following code and paste it into your text area below everything already there:
[php]
function featurecontent() {
$my_query = new WP_Query( 'showposts=20' );
while ( $my_query->have_posts() ) {
$mypost = $my_query->the_post();
global $id;
$do_not_duplicate = $id . “,”;
if ( get_post_meta( $id, ‘featured-post’, true ) == “yes” ) {
if ($i==0) {
?>
Featured Posts
}
?>
array( $do_not_duplicate ) ) );
}
}
add_action( ‘thesis_hook_feature_box’, ‘featurecontent’ );
[/php]
Click the “Big Ass Save Button”, and get ready for the second step.
Now, we need to add some styling to the feature box so it stands out. Go up to the select box, choose “custom.css” from the dropdown list, and click “Edit Selected File”. Now paste the following into the text area below everything already there (of course, you can change these settings to suit your taste):
[css]
.custom #feature_box {padding: 0; border: 1px solid; width:650px;}
.custom #my-feature-box {color: #CCCCCC; padding:10px;}
.custom #my-feature-box h2 {font-size: 1.6em; margin: 0 0 15px 0; color: #C92800; }
.custom #my-feature-box h2 a {font-size: 1.6em; color: #003399; text-decoration: none; }
.custom #my-feature-box h2 a:hover {color: #667A00; }
.custom #my-feature-box .featuredheader {font-size:2.0em; background: #333333; color: #FFFFFF; }
.custom #my-feature-box p {font-size: 1.4em; line-height:1.571em; text-align: justify;}
.custom #my-feature-box .featurereadmore {padding: 22px 0 0 0; }
.custom #my-feature-box .featurereadmore a {font-size: 1.2em; text-decoration: none; }
[/css]
Click the “Big Ass Save Button” and move on to the last step.
Last step: adding the custom field to the posts you want to feature. Click on “Posts” >> “Edit” on the left-hand toolbar of your admin dashboard. Select a post to edit, and go to the post edit screen.
In the custom fields section, enter “featured-post” in the name field and “yes” in the value field, and click “Add Custom Field”.
That is all there is to it. You should now have a feature box and the top of your content area on the homepage of your Thesis powered WordPress blog.
Having trouble understanding or need help? Post a comment and I will lend you a hand.
UPDATE: 06/26/2010
Biobrain asked how to display the featured posts in two columns. See the code below to do this:
[php]
Featured Posts
if is_int($i/2) {
?>
} else {
?>
}
?>
[/php]
Of course, you can change the width paramaters to suit your feature box. You can also use classes instead of inline styles.
Then at the bottom add another div closing tag:
[php]
4 Responses to How do I Add a Feature Box to Thesis (Without using a Featured Category)?
Leave a Reply
[/php]
.custom #feature_box {padding: 0; border: 1px solid; width:650px;}
.custom #my-feature-box {color: #CCCCCC; padding:10px;}
.custom #my-feature-box h2 {font-size: 1.6em; margin: 0 0 15px 0; color: #C92800; }
.custom #my-feature-box h2 a {font-size: 1.6em; color: #003399; text-decoration: none; }
.custom #my-feature-box h2 a:hover {color: #667A00; }
.custom #my-feature-box .featuredheader {font-size:2.0em; background: #333333; color: #FFFFFF; }
.custom #my-feature-box p {font-size: 1.4em; line-height:1.571em; text-align: justify;}
.custom #my-feature-box .featurereadmore {padding: 22px 0 0 0; }
.custom #my-feature-box .featurereadmore a {font-size: 1.2em; text-decoration: none; }
[/css]
Last step: adding the custom field to the posts you want to feature. Click on “Posts” >> “Edit” on the left-hand toolbar of your admin dashboard. Select a post to edit, and go to the post edit screen.Featured Posts
if is_int($i/2) {
?>
?>
?>
[/php]
Of course, you can change the width paramaters to suit your feature box. You can also use classes instead of inline styles.
Then at the bottom add another div closing tag:
[php]
Thanks for this help– I used your example in custom.php, but now I want to display the featured post in its entirety. Is there a way to adapt the the php so the excerpt and ‘div class=”featurereadmore”‘ don’t come into play? Thanks in advance!
Simply replace the_excerpt with the_content and it will show the full post.
To remove the “Read More” link, just cut out the ‘div class=”featurereadmore”‘ line down to the closing /div tag.
I hope that helps.
You are correct about the posts being duplicated. I forgot to add the following line of code:
query_posts(array(“post__not_in”=>array($do_not_duplicate)));
Please note its location near the end of the function.
With regards to displaying posts in columns, this is easily done. You can either use a table (old school) or divs (much nicer). Please note the update at the end of the post.
How I can display two posts in two coulmns?
I have tried your code. It is working fine but posts are still duplicated.