Build Your Own Business Website header image

How to Use a Thesis Feature Box to Display HTML

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, we show how to insert a function in custom_functions.php to display HTML (text and an image) in a Thesis feature box.

Video Transcript

Rick: Showing my screen and now the next thing we’re going to do is talk to Dennis. Dennis, I’m going to undo your microphone. Good evening, Dennis or good morning, Dennis, I guess… down under.

Yes, it’s morning here, Rick. Can you hear me okay?

Rick: I certainly can, yes.

Okay, my question is regarding the feature box and how to put steady content in there. I mean, what’s the one you used in there?

Rick: I used the Dynamic Content Gallery plugin in there but… and so, you want something like this? You want to be able to you know, maybe put a little web format and some text and maybe some image and that kind of thing, right?

Yeah, exactly.

Rick: Okay, well it’s actually quite easy and we’ll go ahead and do it on that same site that we were just working on. Let’s see, do I have that custom functions file up here? This is Larraine, yes I do have that up.

Okay so, we’ll just start up here at the top and start by creating a function and I’m just going to call it my feature box content. Okay so now, we have a valid function name and we’ve got it in parentheses and I mean, once we’re done with this function, we’re going to hook it to the Thesis hook feature box. So we’re just going to go ahead and start that right now, just add action Thesis hook feature box and then this name, my feature box content. And then, you just put in whatever HTML you want to put in.

So for example, in this case, while we need to escape the PHP in order to put HTML in so there’s our little escape tag and we may as well come down here and return. Yeah, you definitely have to escape PHP in order to go to HTML. But now that you’re there you know, you can… let’s see, we’re going to do a div class red box and then… that was supposed to have given me a new div. Okay, div and then in this, we could just… I don’t know. We’ll just put some text here and then… fact…we’re going to grab some text.

Dennis: It’s quite… I’ve got to do some table in there so you can get the image in one section and…

No, it’s a very bad idea to do it that way. You would want to… if you want the text and the image side by side, you want to use CSS. You do not want to use a table for that kind of stuff. It’s very old technology and it’s not reliable technology. And so, we’ve created a div here that we put text in and now, if you want to put an image that would say beyond the right-hand side of this… let’s just say that we want to use… let’s come back over here. Let’s use this image right here.

Dennis: Eventually, you’d use the same HTML as you would in the post image location, right?

Rick: Yeah, well we’ll just…we’re going to go Edit Post to get this image and we’re going to scroll down here to the post image and grab that URL. And then, imgsrc equals and then we put the http you know, the URL address here. And then perhaps, we want to put an alt equals and here is some alt text. And then… pardon me, slash that and oh, we want to… let’s give it a class, class equals align right. That, is a Thesis alignment class and let’s say that the width is 200 px and the height is 200 px. Okay, so there’s our image tag and we could use a custom class here too. I’m just going to use the align right because it automatically moves… it floats the image to the right. We could… so that’s what we’re going to do.

Now we save this here and we’re going to… it’s going to start out with a block of text and then an image in the feature box. What we’ll do then is we’ll give red box a definition that floats it left. This will float right up beside it then.

Dennis: Okay.

Rick: An alternative to that actually… well no, we’re going to keep it just like it is as if I did it just like this. So we’ve saved that so let’s see, I want to go to Larraine. I am still at Larraine, okay upload and then here we are at Larraine. So let’s go to home… of course, I haven’t activated the feature box yet but it’s going to be sitting right up here once I activate it. Oh actually… yeah, it’ll be right up here.

So we come back over here to Thesis Design Options and down to feature box placement, we’re going to use the feature box, full width…. Well, let’s just do it in the content column. Which one do you want me to use?

Dennis: Above content. It doesn’t really matter…

Rick: Right. And we’ll do it on the front page only.

Okay and then hit save and then we can go look at the site and then it’s… oaky so there’s the text and there’s the image, right? And so, if we come look at it over here in Firefox, there’s our text in our image. And then all we need to do is… let’s see, what did I say that was? That was red box, inspect the element. Well actually, the first thing I want to do is .custom #feature_boxand I’m going to give it a font size of 14 px. Okay, I’m going to give it a padding colon of 15 px. Okay and then I’m going to say float: none and then we’re going to…

Dennis: Are you going to adjust the background color or whatever is there as well?

Rick: Yeah, well I’m just going to leave the background color as grey here.

Dennis: That’s okay. What I meant was you can address that…

Rick: Yeah because the grey is from the feature box div, right. And so then we’re going to say custom .redbox…okay and we don’t care about…well, we’re going to float left and we’re going to give it a width. Let’s call it 600 px and then well, I guess the feature box needs to float left as well. And the thing is that if you want a container of something that is floating to wrap all the way around it, that container needs to have a float property as well. And I was thinking that…maybe inherit will work here. I didn’t really want to make it… it’s not going to work. I actually have to say float left. Okay, I didn’t really want to make it float left but… I mean, it’s fine like that.

You know, so you’ve got this kind of thing. You could easily put a heading up there. You could easily turn this image into an image link that links off to something.

Dennis: (12.00)

Rick: Exactly. And if you’re in this area you know, you could also add a you know, script for a signup box or anything like that. So do not use tables for layout.

Dennis: I didn’t find that… because I’ve got a list training in the last webinar where we’re discussing tables and images trying to…and the flv file.

Rick: Well, the video is probably going to be posted tomorrow. I had a little bit of turnover here this week in staff and so, we got a little behind in posting videos. But it should be up there soon now because I saw it in the pipeline.

But did that answer your question about this?

Dennis: Yes, that’s brilliant. Thank you.

Rick: Okay.


Rick: Well, I’m glad to have helped.

Dennis: Thanks, Rick.

Rick: Okay, you betcha. Talk to you later.

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 comments… add one
  • Derek Goodyer November 8, 2012, 9:53 pm

    In your Thesis 1.85 to 2.01 demon on Wednesday 7th I think you used Meteor as the slider plug-in. Do you have a preferred slider for a responsive site as I see that you have referred to a number of of different slider plug-ins such as SH Slideshow, Next Gen, and Dynamic Content Gallery?

    • Rick Anderson November 10, 2012, 1:25 pm

      I prefer the Orbit slider for a responsive site. I will be publishing a helper box for it shortly.

Leave a Comment