One of the new features released with Thesis 1.4 was the thesis feature box. Uses for the feature box are endless, however most poeple are using it on their blogs to highlight their best articles and featured posts. Although the feature box is available in Thesis 1.4, the only way to utilize it currently is through the use of Thesis hooks. For those that may be a little less “coding able”, I thought I’d share an article on how to quickly and easily utilize the Thesis feature box to highlight posts on your Thesis Wordpress blog.
Enabling the Thesis feature box
The first thing you’ll need to do in order to utilize the Thesis feature box is turn it on, or enable it. This is done by going into your Wordpress administration console, selecting Appearance on the left hand menu, followed by Design Options.
In the top corner will be a box titled appropriately: “Feature Box”. Using the drop-down menu below it, select “In your content column”. Please note that there are two other options available: Full-width above content and sidebars and Full-width above header only. These are just two more ways you can utilize the Thesis feature box.
Next, you’ll need to specify when you would like the feature box shown. This will depend on how your blog is set-up an what your preference. Most will want to select the default: on-blog page only. The third setting lets you select at what point on your blog page you’ll want to show the feature box. Most will want it at the top, and thus the default setting “Above All Posts” will meet your needs.
Once you’ve adjusted your feature box settings appropriately, navigate down and click on the Save button.
Create a “Featured’” category
The way we’ll determine which article to display in our featured section will be by placing that article in a category we’ll name Featured. Using your Wordpress admin console, create a new category named: Featured and save it. Find the post you want to feature, edit it and add it to the new Featured category. You’ll see how we’ll use this new category in next.
Adding the Thesis feature box hook
Next, we’ll open up the custom_functions.php file and add in our hook. There are various different ways to edit your custom_functions.php file, but I generally just ftp to my server using FireFTP, navigate to my custom folder, and edit the file using Notepad++ directly. Another easier option for those of you not as technical is the Openhook plugin, which allows you to edit your custom_functions.php and custom.css files directly within the Wordpress admin console.
Regardless of which option you select, you’ll want to add the following code to your custom_functions.php file:
Update:The code has been modified from the original as Thesis 1.5 added a DIV tag for the feature-box. Thanks to R.J. for pointing out the problem via a comment.
function featurecontent() { ?>
<div id="my-feature-box">
<?php $my_query = new WP_Query('category_name=featured&showposts=1'); while ($my_query->have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
<?php the_excerpt(); ?>
<div class="featurereadmore">
<a href="<?php the_permalink() ?>" rel="bookmark" title="Read the full article">Read the full article →</a>
</div>
<?php endwhile; ?>
</div>
<?php
}
add_action('thesis_hook_feature_box', 'featurecontent');
I won’t go into the gory details of what this code actually does, but suffice it to say it pulls the post placed in the Featured category and displays it as a partial post, adding the “Read the full article” link to the end.
One VERY important note. Make sure the same spelling and case is used in the code for “Featured” as you named it in your Category listing in the Wordpress panel, if you don’t your featured post won’t show.
Making your Thesis feature box look pretty
While that works, it won’t look very nice, so let’s style it by adding the following to the custom.css file:
/* Featured Post Formatting */
.custom #my-feature-box { font-family: Helvetica,Arial,sans-serif; color: #ffffff; background: #bbbbbb; padding: 22px 15px 22px 15px; }
.custom #my-feature-box h2 { font-size: 2.2em; margin: 0 0 15px 0; }
.custom #my-feature-box h2 a { color: #000000; text-decoration: none; }
.custom #my-feature-box h2 a:hover { 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: 14px; text-decoration: none; }
Save your file, refresh your site and you should have a featured post featured at the top of your site, which a light gray background! You of course will probably want to adjust the colors some to better match your site, but the hard parts done. I’ll discuss in a future article on how to add multiple articles to the Featured category and have your feature box scroll through them!
{ 18 trackbacks }
{ 48 comments… read them below or add one }
← Previous Comments
This is so cool!!Can you set up a test page to show us what it looks like??
And you gotta come up with the follow article pertaining to multiple articles!!
Thanks so much! Got this to work once realised = 1 = d your category number. Just used my name and worked a treat. Thanks very, very much. Just need to get it styled as want now!
How would this change with using the OpenHook plugin?
Hey Geof, instead of adding the code directly to your custom_functions.php file, you would just add the code within the function to the proper “hooK” section using OpenHook. The CSS would be added to the CSS code at the top of the Openhook plugin.
Hope this helps!
Hi Larry
hope you can help. Have just set up as described, pasting the code into the Feature Box in Open Hook.
This is the errror I get:
Parse error: syntax error, unexpected ‘=’ in /home/kf1945/public_html/wp-content/plugins/thesis-openhook/functions.php(320) : eval()’d code on line 8
I’m very new … as I’m sure you’ll gather from this request!
Cheers in advance!
Hi Kate, make sure you are only using the following code when pasting it into Openhook:
have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
<a href=”" rel=”bookmark” title=”">
<a href=”" rel=”bookmark” title=”Read the full article”>Read the full article →
Also, the font I was using in the article for the code messed up the single and double quotes. I’ve fixed that, so re-pasting the code using the above should resolve the issue. Thanks!
I am wondering if there was any way to have a page included in the feature box?
Thanks in advance!
m
Larry this is a well written tutorial thank you.
I was wondering what this code actually does though: $do_not_duplicate = $post->ID;
As my posts are definitely getting duplicated on the front page.
Hi Marc, excellent question. $do_not_duplicate is an array that gets set and contains IDs of posts that are duplicates as you loop through the query results. It can be used as part of a follow up loop to display the queried posts, and avoid showing dups.
When you say you are getting duplicates, are you adding more than one post to the “Featured” category? If so, that’s why. The code I put is really set-up for just one “Featured” post. To add multiples, a second loop to check the $do_not_duplicate array would be needed.
Hi Margaret, there sure is, here’s how:
function featured_content() { ?>
the_post();?>
<a href=”" rel=”bookmark” title=”">
<a href=”" rel=”bookmark” title=”Read the full article”>Read the full article →
<?php
}
add_action(‘thesis_hook_feature_box’, ‘featured_content’);
I didn’t actually try this, but in “theory” it should work! Just change the page_id to the actual ID of the page you want to display.
Got a new question. How do I remove it from full article pages? For example, if I click on the featured article “read the full article” link and the full article shows up with the featured article on top. Doesn’t look great.
I inserted this code into the OpenHook feature box field and it worked. Also added the CSS to Custom Stylesheet box.
have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
<a href=”" rel=”bookmark” title=”">
<a href=”" rel=”bookmark” title=”Read the full article”>Read the full article →
Actually the code above did not paste properly. Basically start with
div id=”feature_box”
code here
and end with
div
Thanks for the reply Larry, makes more sense now.
My “duplicate issue” is having the entry appear in the feature box and again underneath as a new post. Featuring older posts doesn’t have this problem of course but I thought the $do_not_duplicate array would have prevented this from happening with new entries.
Not a problem, I can work around it or just stick to Thesis’ own implementation of featured posts! Looking forward to see the article on how to scroll through posts in the feature box.
Oh my gosh, this article rocks big time, looking forward to having multiple Featured Articles rotating. This would make Thesis that much better.
Thanks for tips posted.
Jl
The post shows up but above it I have this error
have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?> Read the full article ?
How do I get rid of the error message?
http://laurelwreathsreflections.com/lorisbookreviews/
And there is some of the print below my feature box. How do I make the box smaller (more narrow?)
Hmm only one of my posts showed up, did you delete the first one?
How do I get rid of this error message:
have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?> Read the full article ?
Hi Lori, I sent you an email.
where can I see a sample of what the feature box looks like in action?
Hi Scott. Check out this site, he’s using a feature box at the top (box with gray background): http://www.goodfinancialcents.com/
You can of course style it however you would like.
Hi,
I’m having the same problem as Lori above. What is the answer you sent via email?
Cheers,
Adam
Sounds like something I could use. Does this work with phpBB3 forums? Where exactly would I put it at if it does?
Arrrrgh, I keep getting a syntax error. I created the “Featured” category and put my one post in there, copied the code exactly into the openhook box for the feature box… what am I missing?
Here’s the error:
Parse error: syntax error, unexpected ‘}’ in /home/drew91/public_html/wp-content/plugins/thesis-openhook/functions.php(356) : eval()’d code on line 17
Hey great tutorial. I wanted to point something out. While styling my feature box using your code I noticed that I was getting double borders. Looking through the code that goes in custom_functions.php, I was that the div id=feature_box. But since the feature box itself uses that exact div, anything styled as such in custom.css gets doubled. At least I think so. Anyway, the easiest workaround seems to be to rename the to or something like that. It won’t affect your custom.css since most people will likely want to style the box itself and not its content. However, I could be wrong about all of this, so please let me know if it’s out of line.
@R.J. – Updated the code. Looks like Thesis 1.5 added the DIV tag for feature-box. I just changed my tag to my-feature-box. Good catch and thanks for making me aware.
how about having it with multiple posts scrolling through and with an image displayed?
would be nice add a picture in the post.
I would like to be able to place more than one post in the featured category and have it randomly feature an article. Would be great if you are away on travel and such.
Thanks
Hello.
I keep getting this error when I try to add the code in the feature box using open hook. What am I doing wrong?
Parse error: syntax error, unexpected ‘}’ in /home/sweet67/public_html/wp-content/plugins/thesis-openhook/functions.php(417) : eval()’d code on line 12
For Openhook, only copy/paste lines 2-10 .
Is there a way to display an image that is associated with the post as well as the article excerpt?
Someone already asked this but no answer.
Thanks
This was such a great help, but I too am wondering the same thing as Jeremy above. I would like to pull a thumbnail graphic into the feature box.
Thanks!
Hessuca
Hi – I am trying to add a second and third “box” – do you know of anywhere I can find info on how to add additional boxes?
Also, I have tried recently to play with this code some more; I wanted fb above footer on most pages; which I did using this:
function featured_content() {
if (is_page(array(‘places’,'about’,'contact’,'appelations’,'chateaux’,'calendar’))) { ?>
have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
‘;
<a href=”" rel=”bookmark” title=”">
<a href=”" rel=”bookmark” title=”Read more”>Read more →
have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID;?>
‘;
<a href=”" rel=”bookmark” title=”">
<a href=”" rel=”bookmark” title=”Read more”>Read more →
<?php
}}
add_action(‘thesis_hook_feature_box’, ‘featured_homecontent’);
remove_action(‘thesis_hook_after_header’, ‘thesis_hook_feature_box’);
add_action(‘thesis_hook_before_content’, ‘thesis_hook_feature_box’);
You can see here (www.mamanmedoc.com) that the box now shows up twice on home page and I only want it once! Any ideas what I am doing wrong here?
Also (3rd question related to my 1st) – if I wanted to create an additional feature box with a different div id, and call an image into that do you know where I could find some info on that? Have searched usual suspects but can’t seem to find anything on additional boxes/ calling an image (via category call) into one of those.
THANKS for any direction here. I do realise 3 questions in one is greedy!
Your tutorials have been very helpful, but unfortunately I keep getting an error message when using the source code provided above –
Parse error: syntax error, unexpected ‘}’ in /home/content/64/4693064/html/wp-content/plugins/thesis-openhook/functions.php(417) : eval()’d code on line 12
What may be causing this issue? Thank you in advance!
Great stuff on this blog!
JM
http://www.jessemillsonline.com
Hi,
I’ve used this box on my site and it looks great.
How would I add “Featured Article” text like on this example
http://www.goodfinancialcents.com/
thanks in advance,
Callum
Hi,
I have installed the code and the feature box appears to be working ok, however the “Read the Full Article” link is not picking up the Featured Article Permalink, instead it is linking to the Permalink for the most current post. Can you tell me why? Thanks.
I also noticed that the installation of your code removed the TweetMeme plugin from each post. Do you have a fix for this?
Thanks for this code, I installed it and now all I have to do is the styling.
I’m having the same problem as The Falcon: the “read full article” is picking up the permalink for the most recent article instead of the featured article. Ideas?
Wow!! Works like charm !! thanks
Took me a lot of searching to find this tutorial but it’s *exactly* what I needed. Can’t wait to get home and try it out — thanks!!
Hi thanks for these helpful tips but I get an error using the code in my hooks area, check out my site here maybe you can tell me what the problem is. http://econdataservices.jttenterprise.com/
Thanks again
Tam
Tam, the error is occurring because you are using Openhook. The tutorial is written for editing the custom_functions.php file.
tried putting in the code in the customs_functions php file editor and now my site is completely gone, nothing is showing up, I am new to this and I have no idea how to get my site back, please help!!!
Hi Larry! I know this has been asked a few times, but did you say there was something we could do to keep the featured post from re-displaying underneath the featured post box? I know with regular ‘ol WP we’d just make a change w/in the loop.
P.S. I really like the styling that you have here for the feature box. Excellent! Very modern.
Great Tut! One thing though, it doesn’t display the image from my featured post. Is this because it is an excerpt? If so, please can you tell me how can I change this to show the whole post instead of an excerpt?
Thanks a lot !