Build Your Own Business Website header image

Thesis 2.1 Launch Party – Part 7 – Add Sitewide Video, Images or Text with the Thesis 2.1 Text Box

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

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

Now that we’ve got our basic customization for the Thesis Classic Skin done, the next thing we’re going to do is use this text box. This Thesis 2.1 text box is incredibly powerful and we’re going to use it to embed site wide video, will do some text, some images and we’re even going to use it for a slider here.

Sidebar Text Box

This text box is actually a box that sits on top of the sidebar and if you come over here to this content options, that is this right here, Sidebar Text Box. Now, we can choose first off over here under Sidebar, we could choose simply not show it. Turn off the text box, say okay and you’re not going to have a link to it here and it’s not going to show up in the sidebar anymore. If you do that, text box is gone now. But we don’t really want the text box to be gone, we want to use this text box because this is actually quite powerful.

What You Can in the Text Box

In that text box, you can put any kind of HTML you want. So for example, you can just come in here and say, “Here is some random text” and if I don’t disable p tags, it’s going to be wrapped in HTML paragraph tags and it’s going to show up in the sidebar just like that. So something that’s worth noting is that, any kind of HTML can go in this.

If you’ve got a little snippet of Javascript that you want to put in there that does something, if you’ve got a whole bunch of HTML you want to put in there, it doesn’t matter, any kind of HTML can go in this thing and as you’re going to see in a minute, we’re going to use it to add an image.

Embed Videos Using the Text Box

One of the totally cool things is that you can use it to embed videos. So we’re going to come over here to Vimeo and I’m going to use a friend of mine’s video which I think is well worth watching. So I click embed for his video and now I’ve got this embed options here and I’m going to set up my embed options.

If you’ve watched my videos in setting up a Vimeo account, you know that I like this Vimeo Plus because it does restrict where videos can be displayed. And I’ve just given myself permission to display Tom’s video. Anyway, we come back over here to Embed and let’s see, go to the Share button and show those options. Because the sidebar is 300 pixels wide, that’s how wide I want the video to be displayed and I took the liberty of adding my blue color here to the label.

I’m turning off the text link so all it’s going to show is just this. Then I’m going to come up here and grab this embed code, come back over to my text box, paste that embed code. I’m going to disable the automatic p tags because I don’t need this wrapped in a paragraph tag. Save the options and refresh our page.

Now this very useful video is now available for playing on the site. I’m taking up a lot of my own bandwidth here obviously but if we refresh this in the Responsinator, you can see it works perfectly, it just goes in there to fill the space up, it fits nicely in that video, it’s perfect. So you can put any HTML that you want inside of this text box and an iframe of course is HTML.

Can You Use PHP in the Text Box?

Somebody asked whether or not you can put PHP in there and the answer is, no. PHP is not HTML so it will not parse the PHP. However, you will be able to put shortcodes in as I will show you here in a moment. Before I put any shortcodes in I want to show you how to put an image in.

Using a Sandbox Page to Generate HTML

Now, this is assuming that you don’t already know how to write your own HTML. Many folks don’t know how to write HTML but as luck would have it, WordPress actually gives you the ability to write HTML in the visual editor without actually having it to know any. And the way I recommend people to do that is to create themselves a sandbox page and keep it private.

Add an Image Using the Text Box

Let’s just come over here and take that nicely formatted text and place it in the text box and it’ll look like that or what I can do is insert an image. The way I’m going to do that, actually, I’m just going to start off by deleting everything here then I’m going to say, Add Media. The image I’m going to add is this one right here although I don’t want the big version, I want a smaller version of that image.

I’m going pick the smaller version from over here and I’m going to add Alt Text “Visit us locally in Edmonds”. I’m going to put that inside the title as well, although it doesn’t really matter there. I’m going to link it to nothing. Alignment is going to be None, Link to None, Medium Size, Insert it into the Page.

Now that I’ve got this in the text editor of my sandbox page, you can see the image is here but it creates all this HTML. I’m just going to copy that HTML, come over, paste it, save it, refresh it and there you have it. The image automatically gets inserted into this.

Using Shortcodes in the Text Box

Now, the last thing I want to demonstrate is using a shortcode. I have the meteor slideshow set up and it has these slides in the meteor slideshow. If you look at the settings, you see that they give you the shortcode for inserting the slideshow.

I’m just going to grab the shortcode for that slideshow and then come back over here and instead of this, I’m going to paste the shortcode. Refresh it and now the slideshows are going to play. Give it just a second here, you can see now it’s transitioning from slide to slide based on that shortcode.

Something you may not have observed because I jumped through it very quickly was that these slides are actually 600 x 300 or something like that. And all the slides are that size but you can see that because of Thesis’ responsive abillity, this was scaled down.

Let’s take a look at it over here in the Responsinator, again we have the nicely scaled size that fits inside of the mobile device. This is one of those examples of the scaling that happens because of its responsive abilities.

It’s totally cool what you can do with the text box. It’s a totally cool tool and you can do all kinds of different things with your text box including not using it at all and simply hiding it all together.

2 Comments… add one
2 comments… add one
  • Gary Sanders February 8, 2014, 8:29 am

    I’m a new free member. I love the website! Thank you.
    But every time I try to go in and access the free videos it logs me out… then I click elsewhere and I’m logged back in again. Am I doing something wrong?

    • Rick Anderson February 16, 2014, 9:05 am

      Gary that happens when your browser stops communicating properly with the website. This is easily remedied by logging in with a different browser.

Leave a Comment