The Ultimate Guide to the Thesis Theme Framework Feature Box

by John Sexton · 120 comments

If you power your website with the Thesis Theme Framework, there is a powerful, but often under-used, feature called the Thesis Feature Box.

In short, the Feature Box can highlight just about anything! Do you want to greet your visitors with a welcome message? Feature box is perfect for that. Do you want a large video that spans across your content and sidebar? Feature box does that too.

Until now, the Feature Box was reserved for coding ninjas because it takes custom code to implement. However, in this article, you’ll find seven examples of different uses for the Feature Box, and how to implement them.

If you don’t use the Thesis Theme Framework, now may be the time to check it out. The Feature Box can help you push your website to new and exciting directions.

Either way, Let’s get started!

Before We Begin…

…Make sure you activate your Feature Box in the Thesis Options Panel. To activate, go to the WordPress Dashboard -> Thesis -> Design Options ->. When there, expand the Feature Box area on the far right column and choose where you’d like to display the box.

Note, for this tutorial, I set the box to display site-wide and full-width above the content and sidebars. If your needs are different, select the configuration that works best for you.

Thesis Design Options - Feature Box Options

Thesis Feature Box Example 1 – A Static Welcome Message

We will start with something very simple—using the Feature Box to display a welcome message with text.

To keep things basic for now, we will hard-code the message into our custom_functions.php file directly (your custom_functions.php file is located within your /wp-content/themes/thesis_18/custom folder in your WordPress installation on your FTP server).

With the code below, the welcome message will display everywhere you have assigned the Feature Box to appear. If you chose to have it appear site-wide, this message will appear throughout your site.

See Thesis Feature Box Example 1 live on GroupmindMedia.com

Code for your custom_functions.php file

//-----------------------------------------------------------
// Example 1 - Static Welcome Message
//-----------------------------------------------------------

function static_welcome_message() {

?>

<div id="welcome-message" class="format_text">

     <h2>Hello! This is a large welcome headline.</h2>

     <p>This message and the headline above are coded directly into the custom_functions.php file.</p>

</div>

<?php
}

add_action('thesis_hook_feature_box', 'static_welcome_message');

Results of Example 1

Thesis Feature Box Example 1 Result

Thesis Feature Box Example 2 – Editable Welcome Message

In the previous example, you learned how to add a custom welcome message in the Feature Box. However, who want’s to dig around code every time you change or update that content? Not me… so now I’ll show you an easier way to update your content.

In this example, I’ll show you how to create a WordPress query that populates your Feature Box with content from a WordPress Page (in this case, a page called “Welcome Demo Page”).

This all sounds much more complicated than it really is. In reality, it’s just as easy as the first example, you just need to follow a few additional steps, and the result is great. You can edit your welcome message right from the WordPress Dashboard.

Specifically we are outputting that page’s title (using <?php the_title(); ?>)
and the Page’s content (using <?php the_content(); ?>).

Although we have kept it very simple here and are just using text, you could put anything you want into that page’s content — text, images, a video, etc. That content would then show up in the Feature Box.

See Thesis Feature Box Example 2 live on GroupmindMedia.com

Code for your custom_functions.php file

//-----------------------------------------------------------
// Example 2 - Welcome Message Editable from a WordPress Page
//-----------------------------------------------------------

function welcome_message_from_page() {

     $welcome_query = new WP_Query('pagename=welcome-demo-page');

     while ($welcome_query->have_posts()) : $welcome_query->the_post(); 

?>

<div id="welcome-message" class="format_text">

     <h2 class="page-title"><?php the_title(); ?></h2>

     <?php the_content();

     endwhile; ?>

</div>

<?php }

add_action('thesis_hook_feature_box','welcome_message_from_page');

Results of Example 2

Thesis Feature Box Example 2 Result

Thesis Feature Box Example 3 – A Featured Image

This is similar to Example 1, except now we will feature an image instead of text. You might want to display a featured image across your entire site (perhaps instead of the standard header background image approach), or, more powerfully, you could use conditional statements to have specific featured images appear on specific posts or pages (as we will see in the next example).

Though this is example isn’t especially complicated, it serves to remind us that the Feature Box can be home to images and other multimedia content as well as text or posts.

Notice also that the image we are using here is automatically generated from the website www.dummyimage.com, which is a handy service for generating placeholder images for use in examples like this!

See Thesis Feature Box Example 3 live on GroupmindMedia.com

Code for your custom_functions.php file

//-----------------------------------------------------------
// Example 3 - Featured Image
//-----------------------------------------------------------

function featured_image_feature_box(){
?>

	<img src="http://dummyimage.com/897x300/000/fff&text=Featured+Image+For+Example+3" />

<?php } 

add_action('thesis_hook_feature_box','featured_image_feature_box');

Results of Example 3

Thesis Feature Box Example 3 Result

Thesis Feature Box Example 4 – Feature Box with Conditional Content

We have previously mentioned using WordPress conditional statements to display different content in the Feature Box on different posts and pages. In this example we will learn how to do just that.

Using the code below, the Feature Box will display either a featured image (the same as in example 3) or a featured video depending on the current page. Since we’ve already seen the featured image in example 3, let’s see what it looks like with a featured video embedded from Vimeo.

Notice also that here and in subsequent examples the page names we are using (e.g. ‘feature-box-example-3′) do not correspond to actual pages, but are meant to keep the code readable. If you were implementing this on your own site, you would enter the names of your own real pages there.

See Thesis Feature Box Example 4 live on GroupmindMedia.com

Code for your custom_functions.php file

//-----------------------------------------------------------
// Example 4 - Conditional Feature Box Content
//-----------------------------------------------------------

function conditional_feature_box(){

	if (is_page('feature-box-example-3')){ ?>

    	<img src="http://dummyimage.com/897x300/000/fff&text=Featured+Image+For+Example+3" />

    <?php } elseif(is_page('feature-box-example-4')){ ?>

    	<iframe src="http://player.vimeo.com/video/14844291?byline=0&amp;color=ff9933" width="897" height="505" frameborder="0"></iframe>

<?php } 

}

add_action('thesis_hook_feature_box','conditional_feature_box');

Results of Example 4

Thesis Feature Box Example 4 Result

Thesis Feature Box Example 5 – Multimedia Box Inside Feature Box

We have shown that we can display any sort of text, images, or video in the Feature Box, and that we can do it with a high degree of control by using the Feature Box Settings on the Thesis Design Options screen and the use of WordPress conditional statements.

Now let’s have some fun by combining the Feature Box with another cool feature of Thesis – the Multimedia Box! Like the Feature Box, the Multimedia Box is essentially a container for arbitrary content (text, images, videos, code, etc). And, fortunately, the code for adding it to the Feature Box is as simple as could possibly be.

One thing the Multimedia Box has that the Feature Box lacks, though, is the ability to directly control what displays in the Multimedia Box on a post-by-post or page-by-page basis from the WordPress Dashboard. We’ll get into that in the next example; for now let’s simply place the Multimedia Box inside the Feature Box using the default behavior of rotating images (these images are taken from your themes/thesis_18/custom/rotator folder).

Thesis Design Options - Multimedia Box Options

Note that if you changed the Multimedia Box’s behavior on your Thesis Design Options panel, what you see might be different from what is above. You can always go back to Thesis Design Options -> Multimedia Box to change what the Multimedia Box displays by default.

See Thesis Feature Box Example 5 live on GroupmindMedia.com

Code for your custom_functions.php file

//-----------------------------------------------------------
// Example 5 - Using Multimedia Box inside Feature Box
//-----------------------------------------------------------

function multimedia_feature_box(){

	thesis_multimedia_box();

}

add_action('thesis_hook_feature_box','multimedia_feature_box');

Results of Example 5

Thesis Feature Box Example 5 Result

Thesis Feature Box Example 6 – Multimedia Feature Box Override

As mentioned, the real power of using the Multimedia Box inside the Feature Box is the ability to specify content for the Multimedia Box on a post-by-post or page-by-page basis from the WordPress Dashboard, yet still use the default Multimedia Box behavior if you do not have specific featured content for a given post or page.

In this example, the Multimedia Box is hooked into the Feature Box and is set to show rotating images by default. On this particular page we have over-ridden that behavior by specifying an image in the Multimedia Box Options panel on this post’s Edit page on the WordPress dashboard. We could have easily done the same with a video or other code.

Thesis Post Options - Multimedia Box Image

The example code here is the same as in Example 5, but this time we have included a conditional statement to highlight that we have one page which uses the default Multimedia Box behavior (example 5) and another page with a manually specified image (example 6).

See Thesis Feature Box Example 6 live on GroupmindMedia.com

Code for your custom_functions.php file

//-----------------------------------------------------------
// Example 6 - Using Multimedia Box inside Feature Box
//-----------------------------------------------------------

function multimedia_feature_box(){

	if (is_page('multimedia-feature-box-example-5') || is_page('multimedia-feature-box-example-6') ) {

		thesis_multimedia_box();

	}
} 

add_action('thesis_hook_feature_box','multimedia_feature_box');

Results of Example 6

Thesis Feature Box Example 6 Result

Thesis Feature Box Example 7 – A Featured Portfolio Page

Now we will apply what we have learned to create something a little more sophisticated. This example shows how you could create a nice looking portfolio section within your Feature Box by using WP_Query to grab six posts which are in a specific category (“Work” here, but might be “Portfolio” or something else for you). In this example we are further restricting our query to posts which are also tagged “Featured” – however for your own purposes you could include just a category, just a tag, both as we have done here, or include neither and simply grab your most recent posts.

This example also uses Thesis Post Images, so make sure to define post images for any posts you plan to use with this example. Covering Post Images is beyond the scope of this article, but there are many great resources explaining how to use Thesis Post Images both on DIYthemes.com and elsewhere on the web.

The output from this example is complex enough to require some CSS to look nice (provided below).

See Thesis Feature Box Example 7 live on GroupmindMedia.com

Code for your custom_functions.php file

//-----------------------------------------------------------
// Example 7 - Portfolio Page
//-----------------------------------------------------------

function get_featured_work_demo() {

if (is_page('portfolio-page-example-7')){

     $portfolio_query = new WP_Query('tag=featured&category_name=Work&posts_per_page=6'); ?>

		<h2 class="welcome-headline">Here are some of our favorite projects.</h2>

     	<ul class="portfolio-list-demo">

          <?php

               $count = 0;

               while ($portfolio_query->have_posts()) : $portfolio_query->the_post();

               $post_image = thesis_post_image_info('thumb'); 

               $count++;

           ?>

            <li class="demo-item" id="item-<?php echo $count; ?>">

                      <a href="<?php the_permalink(); ?>">

                           <?php echo $post_image['output']; ?>

                       </a>

                       <h3 class="featured-project-title">

                            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

                       </h3>

                       <p class="featured-project-summary">

                              <?php // the_excerpt(); ?>

                       </p>

          	</li>

          <?php endwhile;

          //Reset Query
          wp_reset_query();

          ?>

     </ul>

     <?php }
}

add_action('thesis_hook_feature_box','get_featured_work_demo');

Code for your custom.css file

/* EXAMPLE 7 - PORTFOLIO PAGE */

.custom #feature_box ul.portfolio-list-demo{
	margin-top: 2em;
	padding-top: 1em;
	list-style-type: none;
	overflow: hidden;
	border-bottom: 1px solid #ddd;
	}

.custom #feature_box ul.portfolio-list-demo li{
	float: left;
	margin-right: 25px;
	width: 285px;
	}

.custom #feature_box ul.portfolio-list-demo li img{
	width: 285px;
	}

.custom #feature_box ul.portfolio-list-demo li#item-3,
.custom #feature_box ul.portfolio-list-demo li#item-6{
	margin-right: 0 !important;
	}

.custom #feature_box ul.portfolio-list-demo li h3.featured-project-title{
	margin-top: 1em;
	margin-bottom: 2em;
	font-size: 16px;
	}

.custom #feature_box ul.portfolio-list-demo li h3.featured-project-title a{
	color: #555;
	}

Results of Example 7

Thesis Feature Box Example 7 Result

Conclusion

That’s it! I hope you’ve enjoyed this tutorial on the Thesis Feature Box and that it has given you some new ideas for use on your sites or those of your clients.

Thanks to Chris Pearson and the DIYthemes.com crew for creating an awesome product in Thesis, and thanks to Derek Halpern for giving me the opportunity to share some ideas with the Thesis community.

Please let me know if this article was helpful to you and if you’d like to see more!

About the Author: John Sexton has been working exclusively with Thesis for several years. He recently founded Groupmind Media, a web design and consulting company specializing in Thesis customization. He also has a Ph.D. in Biomedical Engineering, does brain research at Emory University, and can see your thoughts with MRI. You can connect with him through Groupmind Media or on Twitter.

If you enjoyed this article, enter your email below to get free updates!

{ 120 comments }

Tracey Selingo

John-
Thank you, thank you, thank you for this wonderful tutorial! I’m in the process of redoing my site right now…the timing couldn’t be more perfect.

Your code, clarity and breadth of examples is appreciated more than you’ll ever, ever know.

John Sexton

Thanks Tracey! Be sure to post your results here when you’ve implemented the Feature Box stuff on your site!

tracey

John-
Your tutorials were awesome. I was able to set up example 4…check it out: http://www.inkengage.com/

Thanks again!

Travis

John:

I hate leaving comments that don’t really add to the discussion, but as a Thesis user and subscriber to your newsletter, I wanted to let you know I LOVE these “how to” posts so please keep them coming!

I’m not a developer or technical person at all so posts like this make my subscription to Thesis even more valuable than it already is. The more I can learn how to tweak Thesis on my own, the better!!

Keep up the good work.

Travis

John Sexton

Thanks Travis, I think comments like these definitely add value to the discussion. Besides making me feel awesome, it shows that this kind of content is valuable to the Thesis community!

If the response to this article is enough, I may consider writing another in-depth post like this — so if you want more, share it and tell your friends!

letmebuzz

Of course, you wrote wonderful tutorial and it is what thesis user love. Most of them bought thesis theme because they don’t have coding knowledge and as you know that thesis gives you power for easy customization.

I like your tutorial, mostly way you explained and number of options to use. Totally straight forward. I have seen many tutorial, which gives additional information like how they come up with this type of customization and normal guys doesn’t have clue for which code to use for their need.

Thanks!!!

HighPoint SEO

Yeah! Really excited to see this post this morning. I’ve been looking for more tutorials on the use of the Featured Hook and this is spot on!

Will be implementing these techniques on many sites to come in the near future. Thank you for a great post!
Chris

John Sexton

Thanks Chris, I’ll look forward to seeing what you come up with!

Turid

Hi – and thanks for the tutorial! Going to try some of this stuff soon. But before that I just wanted to tell you that example 7 didn´t show up as expected. I used Firefox, then Safari, on my Mac; in both cases I could only see one of the images.

John Sexton

Hi Turid,

I had re-arranged some of our tags recently on Groupmindmedia.com and that caused some of the featured posts to drop out of the Porfolio example for a little while. As of right now there are 3 posts showing in Example post #7 on Groupmind Media.

Is that the issue you were having or was it something else?

Anonymous

Great post on how to utilize the Thesis feature box! Thanks for the cool examples, they are always very useful :)

arramuse

great stuff and thanks for your explanation, I’ll try on my blog asap heh.

Jonathan

Great finally working out a plan for the feature box, always liked the idea of it didn’t quite know what to do with it.

John Sexton

Thanks Jonathan — that is exactly why I wrote the tutorial!

I think a lot of people feel that way about the Feature Box: it’s cool, but what do I do with it? Hopefully this will be a starting point that can prompt people to try a whole bunch of new stuff in their Thesis designs!

David

Hi John,

Very illuminating use of the Feature Box. I shall certainly be putting some of this very well explained and welcome coding into future websites.

Thank you.

Rob @ Atlanta Real Estate

Very cool. I use the MM box all over my site but not the FB.

May be time to give this a whirl.

Justyna

How can I express appreciation for putting all that together!!! I’ve been working with feature box on some of my Thesis sites but now thanks to this article, so many more options come up for me :-)

Big time saver!
Thank you.

James

Awesome tutorial and a great resource!
Keep up the good work.

John Sexton

Thanks for the great feedback everyone! I am happy that this is a resource that many of you seemed to be wanting.

If anyone has any difficulties with implementing the examples shown here, please leave a comment and I’ll answer as soon as I can.

If you come up with any clever or unusual uses for the Feature Box, please post those too so we can all benefit!

Martin Malden

John, hi,

Many thanks for this excellent tutorial. I use the Feature Box a bit on my site but being able to add dynamic content through the hooks and conditional statements takes it to a whole new level :)

Cheers,

Martin.

M. Teirney

Thanks John,

Someone else coded my site because I’m so techie-useless… but you explained the feature box framework so simply that even I “get it”.

Please keep future tutorials easy like this.
Cheers

Jarkko Haarala

Hi,
Thanks for the tutorial. This been asked in forums many times and I never got it to work. This is something I’ve missed a long time. Keep ‘em coming :)

Jarkko

Joi

For sites that do reviews, the feature box is ideal for linking to recent reviews. I use this area to do just that on my food blog. However, with your tips, I can go back and restyle them now to look better.

Thanks for all the time and effort you put into this post. With 7 Thesis-based blogs, tutorials like this are caffeine to my brain!

Is there a slider (such as dynamic slider?) that could be placed in the feature box? I tried one once on my self help blog but it bonked royally.

Thanks again!

John Sexton

Hi Joi,

Sure, you can literally put anything you want in the Feature Box.

My advice for a slider or something with lots of “moving parts” so to speak is to try it out somewhere else first, like on a test install of WordPress, to make sure it is working exactly how you want before you plop it into the Feature Box. That way if something goes wrong you can isolate where the problem is.

But nothing about the Feature Box would preclude a slider or anything else for that matter. It’s literally a container for arbitrary content.

Kathy Hassan

Amazing tutorial! I’m developing my own portfolio site so this tutorial answers a lot of my questions. Thank you!

John Sexton

Great Kathy! Example #7 is the one to work through for a portfolio, but I would also recommend stepping through the others as well so you can get a clear idea of how everything works.

Don’t forget to post your Feature Box portfolio here when you’re done!

Joe Mudd

Thanks for the great post. I’ve always wondered what that feature box thing could do.

Just a small request. Could you link the images for the “favorite projects” you show to their websites? I love getting some Thesis inspiration.

Stacie Wells

I’m dying to try Example 7 but can’t get it to work. I activated the Feature Box, tagged the posts as featured and categorized them as work. Copied and pasted code. Nothing shows up. What am I doing wrong? Any ideas?

John Sexton

Hi Stacie, it’s difficult to tell without looking at your site or your code.

You can email me at heyjohnsexton@gmail.com with details and I’ll try to help you out.

Judi knight

Imagine my surprise as I was doing a presentation on Thesis to the Atlanta WP Meetup group and saying what a great post I just read on the elusive and much maligned Featured Box, when I find out that John Sexton, author of said brilliant and well documented article, was sitting right there not ten feet away! Thanks for the great post John.

John Sexton

Haha! Thanks for the great presentation Judy.

Looking forward to getting the whole of ATL on board with Thesis together :)

Emily

Love Thesis and use it on many of my client’s sites (as well as my own). I have a question about the Feature box however. In your tutorial above you have a screen shot of the Feature Box placement options and it doesn’t look like the same options I have on my site. I’m running 1.8 which I believe is the most current version. On my Feature Placement Options I only have “On homepage only” and “sitewide”. Am I missing something?

John Sexton

Hey Emily, I’m not sure about this one, that sounds odd to me. As far as I know the Thesis 1.8 options always appear as they do in the screenshot above!

Emily

It is really odd. It’s the same on all my sites as well. See screen shot here of my options panel:

http://i273.photobucket.com/albums/jj227/ewhites/BLOG%20FAIRY/Picture1-1.png

Any clue how I can fix/change this???

Kari

You need to update to Thesis 1.8.2 :) I noticed that earlier with my own site, updated to the newest 1.8.2 version, and mine’s the same now :)

Al

Hello,

I implemented the 7th one exactly in my blog, but there is nothing coming up at all, either in homepage, or sitewide. Can you advise?

John Sexton

Hi Al,

It could be that you didn’t change the name of the page in the first “if” statement, or that you don’t have a category called “Work” on your site. If you don’t have those fields changed to something appropriate to your site, you won’t see anything.

Robert

Hey John,

Great post! Very helpful for someone who does not know how to code. I was thinking about adding a image slider to the feature box. How would you go about that?

Thanks
Robert

John Sexton

Hi Robert,

Sure, that is no problem. You would just place the slider code inside a function like we’ve done on the examples above.

For example, start with example 3, but instead of that image just paste your slider code right in there.

Annamarie

Thank you. Just what I needed as I think about how I really want my site to look.

Niks

How do I add 5 or any number of posts ( of my choice ) in the feature box ??

Milan

Is there any way to have the feature box appear only for new visitors?

It would be cool to have a way to provide a little introduction to the site, but I don’t want regular readers to see it on every page.

Alexandra

Lots of great info here, John – thanks!

However, when I put the Multimedia Box inside the Feature Box, as described in example 5, I ended up with *two* MM boxes: the new one and the default one in the sidebar …

In order to get rid of the default Multimedia Box I then added the following to my custom.css:

/* No Multimedia Box in the sidebars */

.custom #sidebars #multimedia_box {
display:none;
visibility: hidden;
}

I thought this might help someone else.

Cheers
Alex

mccall

That’s really helpful Alex, I ran into the same thing immediately!

tracey

Thanks for sharing! I was searching for this for a site I’m working on. :)

Samantha @ Sand Solutions

Thank you Alexandra, that is the fix I was looking for!

Kim Solga

Question on Ex 5 – Using Multimedia Box inside Feature Box
Looking good so far, but now how do I turn off (ie. disappear, get rid of) the multimedia box in the sidebar (or can I only use this multimedia-box-version of the feature box with a no-sidebars design???)
See http://test.himalayanoutback.com/
Thanks for all the ideas!

Kim Solga

Oh oh oh – never mind. I just saw Alex’ solution right after I hit the comment button. All is well.

Mike

John,
I’ve followed your instructions for ex. 2, but nothing shows up on my blog.
I entered your code at the end of the existing code in the custom_functions. php folder. Is that the wrong place to put the code? Where should your code be placed in the folder?

John Sexton

Hi Mike,

Are you sure you’ve got the right page name? In this line of code:

$welcome_query = new WP_Query(‘pagename=welcome-demo-page’);

It depends on you having a page called “Welcome Demo Page”

If you don’t have that, it won’t load anything.

Mike Turco

I had the same problem. One (or both) of these things fixed the problem:

1) I used hyphens in the title for the post. I removed them.

2) I had to publish the post, not just save it as a draft.

Casey Hunsaker

I have the same issue… Nothing showing up… Tried both those quick fixes, and nothing. The code he provides goes under the

/////////////////////////////////////////////////////////////
// Have custom functions to add? Put them below this line! //
/////////////////////////////////////////////////////////////

And before

//////////////////////////////////
// DO NOT EDIT BELOW THIS LINE //
/////////////////////////////////

Right?? Or does that code go below EVERYTHING on the custom_functions.php file? Any help would be greatly appreciated. Just cant get anything to show up…

Thanks!

Casey

Spyros Pan

Thank you for this great tutorial!!!!

John Sexton

You are very welcome Spyros! Let us know if you make use of any of these tutorials by posting a comment here!

Andrew

Fantastic tutorial! Been looking at how to add in an area to display my portfolio on the homepage without having to use a plugin or slider. Will give it a shot and see if I can get it to look as good as the Ground Mind Media website!

Thanks so much!

John Sexton

Thanks Andrew! I’m always excited to see what other people do with these tutorials, so please post your examples here when you’re finished!

Jim

Hey John,

I just stumbled across this article on my email and I’m so glad I read this. Good to know that you have created this article to maximize the use of the feature box. I’ve long wanted to use it but just don’t have the coding skills to make full use of it. I’ve got to try doing it myself.

John Sexton

Hi Jim,

Yep, the Feature Box certainly has a lot of untapped potential. My big hope with this article was to inspire the community to try some new things and push Thesis-based designs forward! I’d love to see what you come up with!

John

Mark Hockenberry

Thanks John for this series of tutorials not only showing how to display the Feature Box, but also utilizing the Multimedia Box inside of the feature box, wow! I’ve been lost for a while on this and now I can start using these features with a lot more understanding.

John Sexton

Thanks Mark! Indeed using the Multimedia Box inside the Feature Box gives you some very fine-grain control on a post-or-page basis. I’m experimenting with this myself right now and love to see what other people come up with. If you’ve got an example, post it here!

John

Ahmad Wali

I tried the example 1 code and I am getting the following error

Parse error!!

chris

Is there any way to resize the feature box?

John Sexton

Hi Chris,

Yep, you can control the dimensions of the feature box with CSS. Just define the height and width just like you would with any other HTML element.

John

Kevin

I would love to use the Portfolio format on just my home page and have it pick up a few of my pages rather than posts. Unfortunately, I have no idea what to change in the php to make that happen. Thanks in advance for your help.

John Sexton

Hi Kevin,

Sure, you can grab pages with this too. This is the you’ll want to change:

$portfolio_query = new WP_Query(‘tag=featured&category_name=Work&posts_per_page=6′); ?>

If you aren’t sure how WP_Query works, just google it and you’ll find plenty of resources.

Kevin

Thank you. I will give it a shot.

Drew Burks

this is great info, but can you tell me where I paste this code into the custom_functions.php folder?

Jake O'Callaghan

It would be awesome if you could have the feature box produce the same effect of the What Would Seth Godwin Do plugin.

Robert Schrader

Pasting the codes from Example #7 into my site produces no result.

John Sexton

Hi Robert,

The examples call specific page names and categories that may be different from what is on your site.

For example, look at these lines:

if (is_page(‘portfolio-page-example-7′)){

$portfolio_query = new WP_Query(‘tag=featured&category_name=Work&posts_per_page=6′); ?>

They depend on a page with slug ‘portfolio-page-example-7′ and a category called ‘Work’

You’ll need to replace those with the corresponding page and category from your own site.

John

Lenzfire

Your example 7 is the one which I was searching for all way long. But how to make it to move from left to right, like moving slides one by one

John Sexton

That would require some javascript which is outside the scope of this particular tutorial, but I may add an advanced version with sliding panels at a later time.

Hayk

Hi,

I’m having trouble with this feature box.

After enabling the feature box from the thesis design options and adding the code from Example #1 – The box is shown where it’s supposed to but it just gives me this error:

“Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘static-welcome-message’ was given in /…/wp-includes/plugin.php on line 405″

Does anyone know how to fix this?

Thanks
Bye

John Sexton

Hi Hayk,

This sounds like it is mis-interpreting your code somehow. Perhaps due to a cut and paste error or another function that is not closed somewhere else? I haven’t seen this kind of error before.

nithya

This is a great article – thanks! I tried #7 on my blog, and I have two problems:

1 – Image #3 (the first in row two) is dropped down below Image #4 and #5. Any idea why this is happening?

2 – I had to change my thumbnail size settings to get the images in the feature box to show up without looking distorted. I changed my default settings from 66×66 to 250 which makes them appear in the features box ok. But then they are way too large for the teasers which I show at the bottome. Also I have more than one picture in many posts, and the teaser showed the first image (which I input as a Thesis Post Image) plus the other images plus the text excerpt.

Any suggestions?

Thanks again!

John Sexton

Ni Nithya,

For your first problem, it sounds like a CSS issue. You’ll need to adjust the CSS of the image layout to fit within the dimensions of your content area to prevent that wrapping.

For your second problem, you could try using the Thumbnail Image instead of the Post Image if you are having consistency issues with using Post Images in the Feature Box vs. Post Images in teasers. This is more of a content planning issue than a technical issue, so unfortunately there isn’t much I can do to help if you have a bunch of existing content which uses images in a particular way.

Alternatively you could try specifying a brand new image size in WordPress and using that for the Featured area. See here for more information:

http://codex.wordpress.org/Function_Reference/add_image_size

Mike Corso

Wow! Bravo! I’m going to play with this right now and add it to Cool Site of the Day.

Thanks,

Mike Corso
Cool Site of the Day
Boost Your Website Ranking
http://budurl.com/fastcool

Mike Corso

Wow! Bravo! I just added to Cool Site of the Day and have one question; how can I disable the social sharing buttons (plugins for google+ and bookmark & share/onlywire) from appearing within the featured box Page (I went the ‘sample #2′ route).

Thanks,

Mike Corso
Cool Site of the Day
Boost Your Website Ranking
http://budurl.com/fastcool

nithya

Hi just checking in on my question to see if anyone has any thoughts. Thanks!

Mike Corso

Why is the background of the box grey AND why aren’t the hyperlinks blue?

See: http://www.cabletvproviders.info

Thanks,

Mike

John Sexton

Hey Mike, I think these are default Thesis styles for the Feature Box.

You will need to add additional custom CSS to override the default Feature Box styles.

Tom McD

I am redoing my site and found your tutorial awesome. I’m using it on several sites. Thanks,

Have you run into this problem.
http://www.ei-hpm.com/getappia/

i used code to add images to nav menu. looks good but drop-down is washed out over feature box. And on other pages with out feature box there is a huge space between header and nav menu.

Thanks again.

Tom

phil

how do i make an image i add to the feature clickable (ie making the image in example 3 clickable to a url i want to use)? thx

John Sexton

Hi Phil,

You would just need to wrap the image in an Anchor tag, like this:

//———————————————————–
// Example 3 – Featured Image
//———————————————————–

function featured_image_feature_box(){
?>

<?php }

add_action('thesis_hook_feature_box','featured_image_feature_box');

John Sexton

Hmm, that code got stripped. Let me try again:

//———————————————————–
// Example 3 – Featured Image
//———————————————————–

function featured_image_feature_box(){
?>

<?php }

add_action('thesis_hook_feature_box','featured_image_feature_box');

John Sexton

Well, it doesn’t seem to be working here.

Anyway, just put a hyperlink tag around the image and that’ll do it.

Craig White

Jason,
I have a really new site and have just uploaded some new products to it using market press lite as the e-commerce plugin. Do I substitute the {product-page} for (portfolio-page) and the product (category) for (work)?

thanks
Craig

wscga

I am trying to add a features box but every time I enter the code into the customs php and I click to see my page nothing changes. What am I doing wrong? I’ve followed all of the directions but I am missing something.

John Sexton

You may need to activate the Feature Box from the Thesis Design Options panel. The code only does something if the Feature Box is activated there!

federico

Hi, what is the code for (youtube video on the left and aweber optin box on the right )?

I want future box above sidebar and post sitewide.

thanks

Adam

Awesome post.Thanks for posting. I’m so glad i found this, i’m going to start implementing this advice straight away. I’ve been wanting to use the Thesis ‘Feature box’ for ages but didn’t no how. No i do wohooo! :)

John Sexton

Great, thanks Adam! If you decide to implement it, please post your results here!

Jenny

Wow, this has come at the exact right time for me. I’ve been watching Derek Halpern’s website critique videos on http://www.socialtriggers.com and have so many good ideas to improve my blog’s layout. I’m a newbie so this stuff is difficult to understand. Nevertheless, reading your easy to understand, step-by-step tutorial has given me the confidence to give it a go! Thank you very much! :-)

John Sexton

Thanks Jenny, much appreciated!

If you implement the Feature Box on your site, please let us know by posting your results here!

Clarence Johnson

Thanks John. I have been looking for this information for a while. I appreciated you detailing the numerous methods.

Nancy Hendrickson

This is great – but I’d really like to see a sample of how to add a photo on one side of the feature box and an opt-in form on the other. Thanks!

John Sexton

Ni Nancy,

For this, you could follow Examples #1, #2, or #3 above and just add the code for the opt-in form above or below the code for the Image. Then you would need to do a little CSS to get them to line up properly, but that’s basically it.

It may be easiest to do Example #2, and make a WordPress page that has your opt-in form and image inside it. Then the code from Example #2 would pull in that page and it should display the content as it would be seen on the page. (With the image floated left or right and the opt-in form on the opposite side, for example).

Deborah Acker

Love this tutorial. Thanks. Wondering if it is possible to have two MM boxes on one page. One imbedded in the feature box as above and one “standard” in the sidebar. If so, not sure how to specify which pages have which combo and what content goes in each.

I’m sure this is possible but I’m not comfortable with code and have to do “cutting and pasting” to the file editor.

Thanks!

John Sexton

Hi Deborah,

I believe you can call the function thesis_multimedia_box(); as many times as you want on a given page, and the MM box will show up everywhere you do.

You won’t be able to specify different contents for the different MM boxes on a given page, though, so I don’t know how valuable something like this would actually be.

dre

How would i change the code so it will display everything in a category, show a certain amount on one page then add a pagination to go to the next posts in the category?

John Sexton

Hi Dre,

For this you should study the basics of the WP_Query class:

http://codex.wordpress.org/Class_Reference/WP_Query

All the information you need is there.

Alex

I am following your tutorial closely I just can not seem to get it to work!!
Essentially I am trying to get a slider above the content and Sidebar and I just can not seem to get the feature box to display! Please help!

Many thanks

Alex

John Sexton

Hi Alex,

Are you sure you have the Feature Box activated in the Thesis Design Options panel?

James

I can’t remove the multimedia box from the sidebar. I try example 5, but then there’s two multimedia boxes, one in sidebar and one in page. What code can I use to move multimedia box from sidebar and insert into single page?

I’m really just trying to put a clean simple image slider in content column on home page. You wouldn’t believe how hard it is to find a working plugin to do this. I don’t need to feature or slide posts, just images. Any suggestions?

John Sexton

Hi James, to hide the MM box from the sidebar, the quickest way would be just this:

.custom .sidebar #multimedia_box{ display: none; }

That’s not the most bulletproof solution in the world, but it’ll get the job done in a single line of code!

John

Stephen

Thank you for this wonderful post… I am wondering how to get rid of the default grey background?

Is this something I do in the custom css?

Thanks again so much.

Stephen

John Sexton

Hi Stephen,

Yep, you are on the right track! To get rid of the grey background (to make it white, for example), you would just add this to your custom.css:

.custom #feature_box{ background: #fff; }

You could of course change the color to whatever you wanted, make an image background, etc.

Good luck!

Lise Halskov

Hi there. I’m a new Thesis user and not at all a tech wiz. I am trying to use the feature box, but I don’t really get what you mean by “To keep things basic for now, we will hard-code the message into our custom_functions.php file directly” Do you mean copy it and how do you do that? And to clarify, does it mean that I can copy a set-up from a page in Wordpress into that file, or what? Thanks!

Tony

I haven’t used the feature box on my site. I’ll try to add one, thanks for this detailed tutorial.

earl

Great post. I’m New to Thesis theme and I’m also trying to use the feature box.

Bogdan

Hi, I’m trying to use the Feature Box to create a Squeeze page for my blog.

My question is: can I insert a html page in there? E.g. I have http://www.castigatimp.ro and I’d like in the Feature Box to get the content of http://www.castigatimp.ro/carte . What code should I write in custom_functions?

Casey Meraz

Thank’s for the great Thesis Wordpress info. I love using Thesis on Wordpress and have several clients using this as well.

Daniel

Hello John,

Thanks for these tutorials, I could impletement the example 2, where you say it can be used for various content. However when I insert a slider short code, the home page only displays the Page title, what am I doing wrong.

Thanks
Daniel

Indira

hi, thanks for the post. I copied the code for example 7 and it didn’t work. I already create the category “work”. it doesn’t show up anything

David

Very helpful and follow-able, thanks!

Taha Ali

I am getting parse error please let me know anyone how to fix it
??

Doug

Downside to these tutorials is the absence of a date. Could be years-old by now. I note that several of the ‘referenced’ sites are actually purchased themes (i.e. no longer Thesis), which tells me this is old. Thesis badly needs an update to allow greater design flexibility. I have largely quit using it for some time now.

Casey Hunsaker

I guess my custom_functions.php file wont show up correctly, but I copied and pasted the code for option 2 between the
/////////////////////////////////////////////////////////////
// Have custom functions to add? Put them below this line! //
/////////////////////////////////////////////////////////////
and the
//////////////////////////////////
// DO NOT EDIT BELOW THIS LINE //
/////////////////////////////////

Is this correct?

indira

Hi, thanks for the tutorial. I try example 5, but there’s two multimedia boxes. I can’t remove the multimedia box from the sidebar. I already add
.custom .sidebar #multimedia_box{ display: none; }
to custom.css but it doesn’t work.

thanks in advance for your help

Russ Stewart

Basic question from a Newbie. Thesis 185

Why is is that I can load a jpg image as a header but can not do this to add an image to the Featured Box. Does an image have to be sent to my server via my FTP Manager to achieve this?

Thanks