How to Add the Feature Box Into Your Thesis Design (new download)

by Derek Halpern · 72 comments

By now you know how great the Feature Box is for growing a profitable blog.

(If not, just read this article about how the Feature Box increased our subscription rate by 51.7%).

The question is how do you create a Feature box?

We’ve whipped together some tutorials for you, but the output was simple. It worked, but some people wanted a fancier Feature Box design.

And now you can have that too!

Introducing A Brand-New, Well-Designed Feature Box for Thesis

We had our awesome designer Alex Mangini whip up a customizable feature box that you can add into your Thesis design, beginning today. Just download the files, and follow the directions.

Download this Feature Box

Here’s an example of what this Feature Box looks like…

And the best part?

This feature box comes with the same great opt-in forms we’ve released over the past few weeks. It’s built-right-in, and it’s modified to work specifically with this feature box.

(See this post here to see what the optin forms look like).

Of course, they’re compatible with AWeber, MailChimp, and Get Response, and installing them into this feature box is literally just copying and pasting some code into the Thesis files.

Additionally, the instructions manual has been documented well, so anyone can install the feature box and optin forms to their site with no problem.

What do you think of this solution?

What do you think? Are you going to use this Feature Box?

Or, if you’ve already been using the feature box, how has it impacted your conversion rates?

Just try using this Feature Box for a few weeks, and let us know how it worked by sharing your results in the comments.

About the Author: Derek Halpern ran marketing at DIYthemes, and is the founder of Social Triggers. To get more tips on how to be confident, sign up to his list here.

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

{ 72 comments }

Roseli A. Bakar

Loving the new feature box. Thanks

Mejuez

Wow! Nice feature box! Thanks yeah admin!

Sean Davis

Not sure if I should jump on this or not. I use Alex’s forms on both SuccessOnMyMind.com and IamSeanDavis.com but I use them in the sidebar. I have always wondered what I would do if I put the opt-in form in the Feature Box. Would I remove it from the sidebar at that point?

I’m kind of torn between my desire to have it in the FB on the homepage and having it in the place that has brought me 80% of my subs thus far.

Any advice?

Alex Mangini

Definitely worth experimenting with, but why not place them in both areas? You can even use the conditional tag is_single() to make the optin in the sidebar display only on post pages if you don’t want the feature box + sidebar optin show up.

Sean Davis

Not a bad idea. I actually considered that conditional and just never got around to it. I’m all about HTML and CSS so when PHP is needed, I tend to procrastinate.

Brad Dalton

The easiest way to add a custom feature box to Thesis and increase subscribers. Great solution for internet marketing. Much appreciated

Mark Horoszowski

Fantastic – thank you! Complete with best practices for opt-in form and bright accent colors to increase conversions – LOVE IT!

Steve Hobley

I have a love/hate relationship with the feature box.
It’s a great idea, but every time I try to do anything with it I destroy my site.

I just tested out the Zip file and it did not look like the image in this post. I’m a full time programmer and fairly computer savvy, but I cannot seem to get the feature box to behave at all.

Eventually I had to admit CSS defeat and use a brute force approach with tables to get the content to look correct on all browsers.

It’s been on my to do list to get the sign up form on the feature box for ages now, but I can’t seem to get it to behave.

One day, it shall be mine… :-)

phil

how do you make your feature image clickable (to a target URL)? thanks

Alex Mangini

Hey Phil,

Just wrap the IMG code with an anchor tag.

(remove the space after the first <)

Prospirity

Hmm!

I get error: Parse error: syntax error, unexpected ‘<' in /home/xxxxxx/public_html/wp-content/themes/thesis_182/custom/custom_functions.php on line 16

which is this line , so I have tried replacing with what is in the Mailchimp code

neither are working working.

I am assuming we need to put the long url taken from the form after form action= as in :
form action=”http://xxxxxxxxxxxxxxxxxxxxx.us2.list-manage1.com/subscribe/post?u=a45e4fba52a29738b70095017&id=05b9fe65e3″

Prospirity

comment form did not take the code so i meant

the line div….optin and tried mc-embed-signup

Alex Mangini

If you send me your custom_functions.php file, I’ll gladly check it out for you.

alexfrais(at)gmail(dot)com

Prospirity

Thanks Alex, will do right away

raj

Hi Alex,
I am getting the same error. Can you tell me how to fix it?
Thanks,
Raj

Tony

I’m getting the same error too.

Alex, can you please tell us how to fix it?

Parse error: syntax error, unexpected ‘<' in /xxx/xxxxx/public_html/mydomainname.info/wp-content/themes/thesis_184/custom/custom_functions.php on line 11

Will

Hey, looks awesome! Can’t wait to try it!

Chris

Very nice! I just wish I had this a while ago! I just went crazy figuring it out on my own site.

This does look a bit better though so I may throw it in to give it a go!

Thanks!

Dave Doolin

Looks handy. I was just about to code up an “Offers Box” for myself. Hopefully, now I won’t have to.

Naveen Kulkarni

Thanks so much Derek,
Just a question, will this work with non thesis themes as well?

Jai

I feel the power of feature box in very less utilized by thesis users. In future thesis upgrades i request more options to increase future box usage. I use thesis 1.8 and its still a puzzle for me..

Thanks

Lisa Goodwin

Help!!

Added the code and this is what happened, now I can’t even revert back to normal!!
Parse error: syntax error, unexpected ‘<' in /home/content/90/8574190/html/wp-content/themes/thesis_182/custom/custom_functions.php on line 25

Derek Halpern

Log in to your FTP, and remove the code you added into the custom f unctions file. It sounds like you didn’t paste it in the right way.

Derek Halpern

Or you can just email alexfrais(at)gmail(dot)com and he’ll help you out.

Apolline

Hi Lisa!

Same happened to me : seems we make a mistake in that file, the site is unavailable.

To revert back to normal, I used FTP to delete the custom_functions.php file I had altered pasting the code, and uploaded again the original one.

Just make sure to copy any (correct) previous changes you made previously to paste them again in the newly uploaded custom_functions.php file.

Hope I made myself clear…i’m not tech savvy at all!

Maybe someone can tell us why we’re having the same problem?

Rick

Apolline,

It’s a common problem when copying and pasting. Sometimes a just one bit of coding is missing and Kaboom! there goes the site.

I find many of the tut’s offered here geared for the mid to advanced coders.

Apolline

Thank you for your answer.

I did try again today to copy & paste and…it worked!

I guess you’re right, one bit of code must have been missing :-)

Now i can’t figure out how to change the picture…might try and get some help on the forum!

Ryan

Derek (or Alex),

Can the opt-in code section be easily altered so that visitors don’t have to include their name when opting in?

Ryan

Apolline

Hi!

Thanx for the tutorial :-)

But same as Prospirity, after I paste the lines in the custom_functions.php, I get this message :

Parse error: syntax error, unexpected ‘>’ in /home2/apolli4/public_html/wp-content/themes/thesis_182/custom/custom_functions.php on line 76

Unlike Prospirity though, I know nothing about coding and have’nt tried fixing it…

Hope maybe you can help?

Thanks

John Falchetto

Thanks Derek; adding it tonight.

Richard

Just installed this, really easy to do. I had to remote into a far away system and do it via cpannel and it was really easy to follow the instructions.

Now for some creative editing…Anyone have code to set new posts in the feature section or auto-rotation?

Bill Montgomery

hi Derek,
here’s the error message I got when I tried to upload the Feature Box.zip file:

“WHOOPS! The file you attempted to upload is not a valid Site Options file. Please try uploading the file again, or else download a new, valid Site Options file.”

Amandeep Singh

Good stuff Derek… Can I use this with Feedburner as well??

Thanks!!

Nicole

Thank you! I’m very new at Thesis, so this is a huge help. I installed it and it works with Aweber! Awesome!

Lisa

I have been trying to install your feature box script but aweber is no longer using the same code you describe; I’m getting an iframe script and when I install I get the white page of death (no doubt php problem). I can’t get this to work and really would like to install the feature box. I always seem to have issues with this in Thesis but I’d like to get it going. This is my exact code from Aweber:


</iframe

Lisa

I’m so lonely I could cry, I’m the only one with a reply and it’s I, I, I.

Oh, woe is me. (LOL)

Raaj Trambadia

Lisa …I’m sure you must have enabled the “Enable Sign Up through Facebook” option. Make sure your UNCHECK that option in the 2nd step in the Aweber Web Forms.

Once done, the “div” codes would then be available.

The whole code is very long. So just “CTRL+F” and find the div code.

You’re good to go now!

val

Yikes I am not even going to try!

Marelis

Hi Derek,
I used a feature box for 2 months after reading another tutorial here about it. It was really good for about a month, but then people got blind about it. I think the layout of the feature box should be updated every now and then, before it goes unnoticed.

Chris

That is awesome thank you Derek — If you were a chick man I would ask you out lol !

Chris

Sorry Alex — Just realised I didn’t include kudos to you my friend — great job !

Yael K. Miller

I’m confused. What do you mean by a “feature box”? I can’t really tell from that picture.

Michael

Take a look at Derek’s site: http://socialtriggers.com/ at the top of the home page, where the questions and sign up form and person with the transparent head are is an example of a “Feature Box.” It’s kind of like an interactive header.

Usman

OK I have implemented it with Feedburner. You can see it on my homepage only. I get a lot of visitors on my homepage so I think it is a very good strategy to have a signup form in front of them when they visit the site.

Thanks for sharing the trick and the download.

Jupiter Jim

As much as I love a little bit of coding, I like the idea of just download and plug and play even better! Leaves me time to do other things. Can’t wait to check this out and use it. Thanks for doing all the heavy lifting!

THANKS!

Jupiter Jim

Juzaily

Not everyone’s a techy. I learn better with videos. Is there a chance that we can have video instructions on how to do this? Really hope to make full use of my Thesis theme but I can’t seem to work this feature box thing… Thanks.

Sean Mal @ TruthGalore

Thank you Thank you! You’re making life a little easier for us :)

Danny Cruz

I was inserting the some of the Aweber forms in from one of the previous posts and it all works well. I then went and installed the feature box from this post and after a bit of tweaking the CSS, it all looks the part. HOWEVER,

For some reason, the form is not working… When I click submit to test, I keep getting the window from Aweber saying the fields haven’t been filled out… Although I have. O.o Can’t seem to figure out what’s wrong.

Danny Cruz

I got it working… Actually there might be something wrong with the form code for the Aweber Feature Box form #1. I don’t know about the others, because I didn’t try those.

See, I looked at the code in the form I used for hook_after_post (which works – Form #7 from the Aweber only forms post from a few weeks ago) and I noticed it has an input name=”name” and input name”email” parameter for the input fields.

The code provided with Aweber form #1 in the Feature Box download is missing that parameter for both the name and email fields. As soon as I added it, the form started working.

Hope this helps some of you guys that might be stumped.

Alex… You might want to look into that. I’m not a programmer or coder, but I can figure stuff out by looking closely and I managed to get mine working.

By the way… The site in question is not the one I always sign my comments with. It’s the one below one just in case you want to take a look at the forms…
http://floatways.com

-Danny

Lisa

THANKS Danny – just your short post helped me identify the problems I was having (which were many). I ended up looking at the Aweber html page (included in the iframe) and ripping the tags from there and then adding the “name” and “email” so the form would work. The code was a start but not the finish line. Hope others can implement it and tame the details like you and I have. Again, thanks so much for your post and feedback as I was getting nowhere!

JaxRolo

I am having the same problem. But I use GetResponse. I tested it and got a reply back that the email was invalid. Can someone help!!!

JaxRolo

I like it but having a hard time with the instructions.

I have some editing to do but my main problem are the images.

Tomos

Awesome post, I already tweeted a link earlier about how I’m integrating the box into my blog redesign.

I decided to try out GetResponse, and after signing up, I followed the instructions in the text file, but got an error. It would take my details, but when it hit the getrsponse server would throw up an error. So I dug into the code you get from getresponse when creating a form and noticed something was missing. I managed to solve the problem by adding some tags to the form. Chances are my HTML will be stripped, so I went ahead and added my edited code on Pastebin:

http://pastebin.com/BwEVWeN2

If you take a look above, I simply added name=”name” to the name input, and name=”email” to the email input.

Hope this helps.

JaxRolo

You are a Genius!!!

I followed your advice and it works great!!!

Thanks a Billion!

Omar

Thanks! You rock! :D

Timo Kiander

Ok, any possible reasons why I can’t make this work?

I enabled the Feature Box, tweaked the custom_functions.php, uploaded the image and modified the CSS file.

Feature box not visible …

Cheers,
Timo

Michael

Did you try emptying your cache? Are you in ‘Design Mode?’ Those are two things I’d check while troubleshooting.

Matt

I am having a little trouble; any idea how to fix?

I copied and pasted the feature box code into the custom_functions.php; but I must have copied too much or too little, because now my entire site is not accessible. All I can see is a white page when I go to my site, and even if I go to my wordpress login, it is also white, so I can’t go back in and edit. Whoops! Any help in at least getting back to normal would be appreciated. Thanks so much.

Matt

Raaj Trambadia

Hey Matt…Go to your FTP Client or your web host and delete the custom_functions.php file and then add the original one which you got with the thesis folder.

Let me know on raaj(at)raajtram(dot)com if you can’t figure it out.

Lloyd Adams

Thank you so much for all this extra stuff you give us. It’s really going to help us design a visitor experience that’ll keep em coming back.

Lloyd

Raaj Trambadia

I seriously can’t make this work! Have tried it like 10 times …everytime my custom_functions.php is messed!

I just couldn’t figure out the problem in the code right now!

Do I have to remove the previously added code from FEATURE BOX MANUAL?

Please advice!

Janice Bennett

Love the concept! However, I seem to be hitting a SNAFU. I’ve downloaded the zip file, however having trouble installing it. I’m assuming that it is a plugin, but it fails when unpacking. Am I doing something wrong?
Thanks

Michael

It isn’t a plugin. You have to go to your dashboard and add the code with the ‘Custom File Editor’ in Thesis. Unzip the file to your desktop, or some other equally easy-to-find spot on your computer, and open the FeatureBoxManual.txt file. That will get you started.

James Prescott

Okay Derek – how do you add a feature box to Standard Theme on Wordpress? I don’t have the time or training to change everything on my blog, but I do want to add a feature box. Is there a way to add a feature box to this theme? To be honest I’m getting annoyed with everyone saying how easy it is, when it isn’t. Please help.

Ahmad

Is there anyway that you can make a quick video on installing the feature box in thesis?

Evanthia

You say that the feature box is compatible with AWeber, MailChimp, and Get Response, but is it also compatible with the Wordpress Jetpack subscribe feature?

Michael

The guys didn’t provide the code for JetPack; just those three services. MailChimp is Free and pretty easy to use, and gives a lot better analytics.

tori

Hi, do you also have to download the optin forms that you linked to that are on another page?

Michael

If you want your forms to look like theirs: http://diythemes.com/thesis/aweber-email-signup-forms/

Jeremy Maher

You asked what type of conversions current users of the feature box are getting:
I have 6 different different optin forms on my blog (mostly from the advice from you and the DIY themes tutorials.

The Feature box converts better than any of the other 5 forms. (right sidebar, bottom of posts, lightbox, about page, footer optin)
The Feature box converts twice as high as all the forms except the About page. the about page converts second highest, but still 1.5% less than the feature box. Awesome conversions!

Thanks for always providing actionable content. Looking forward to Thesis 2.0!
-Jeremy

Jeremy Reeves

Hey guys,

First – awesome stuff :)

Any chance this works with other autoresponders, such as Office Autopilot?

Jeremy Reeves

Jeffrey Bunn

Hi everyone,

Question. The feature box is showing up after the paste the code into customfunctions. However, I can’t seem to get the image feature_box.png to show. All i get is the broken picture icon.

It says to upload the file into /images/ folder via FTP. My question is, which images folder? Is it the one in wp-admin? Or wp-content/themes/thesis/images? Or wp-includes/images? I pasted it in every image file I could find, and it still doesn’t show up. I’m not very techy!

Thanks in advance!