In this session, we continue the discussion from our session on How to Display a Phone Number as a Link that Mobile Devices Can Call where we show the structure of a telephone link tag. Here we add the telephone link tag to a widget so that it displays in the Thesis header. We do this using our BYOB Thesis Simple Header Widgets plugin. This method does not require any coding work in your custom-function.php file.
Rick: Now having said that, that’s sort of the how of the telephone number itself. And I gather, it’s not actually the question you asked… were asking. It’s how I interpreted your question but the question you’re really asking is how do you take this and put it into the header. And the way I would do that is use my Simple Header Widgets plugin and you can find that by going over to Plugins, add new. And then if you just search for Thesis, all the plugins that are associated with Thesis show up here and BYOB Thesis Simple Header Widgets plugin is the one that I’m referring to. And this is my only plugin that’s currently on the plugin repository. All the rest of my plugins are accessible from the website. But this one is in the plugin repository.
And so we’ve installed it and now we activate it. And I’m just going to show you what it looks like once it’s activated. What it does is it replaces the default Thesis behavior with this one widget area. Now if you want to keep the… well, what this plugin however lets you do is create a couple of different sections and have some Thesis defaults on one section and a widget area in another. And in this case, what I would do is just scroll down here down to BYOB Thesis Plugins and we’re talking about the Simple Header Widgets Plugin here. And the first question really is how many different header areas you want, we’re just going to create two header areas. And if you hit save, what you’ll have now is this little header layout box that’ll show you 2 header areas. And because we haven’t specified a width for either of them, they stack on top of each other so if we come over and look at this again, now you have 2 widget areas stacked on top of each other.
But what we’re going to do here is we’re going to have… we’re going to retain the Thesis default in the left side. We’re going to put the phone number in the right side. So in terms of our left header area here, we’re going to say that we want to retain the Thesis default functions in this header area and we don’t need to choose… we don’t need to include the nav menu or the search bar in that. But let’s give it a width. Let’s say that we want this to be… the left header area to be say, 700 pixels wide. If we save that now, what happens is these things show up as if they’re side by side. And so what happens is if you specify a width for the left header area then the right header area takes up the rest of the space and pops up to the right of the left header area. If you don’t specify a width for the left header area then the areas stack on top of each other and take up the full width. So that’s how this function works.
And then if you use a Thesis default or I mean, if you retain a Thesis default in either the left or the right side then it takes away the widgetized element of that side. So if we come back over here and refresh now, you’ll see the left side doesn’t have this little widget box anymore. It just has this Thesis default functionality which is the title and the tagline. But now we’ve got this widget area on the right here that we can put the telephone number in.
And so the way you do that then is you come over to your Appearance and Widgets menu and you have this new sidebar here called right header area widgets where you can grab the text widget. And then you can just take that link text a href = telephone number blah blah blah and paste it inside the text widget. And if you hit save, come back over here and refresh it, it’s going to show up here in the right hand side. So there’s my phone number now and if you were looking at categories.byobwebsite.com in a mobile device, you could click on this and it would call my phone number.
Jim: That’s brilliant. It’s exactly what I need.
Rick: Now there’s plenty of ways in which for you to style this and move it around and that kind of stuff. So… I mean, there are other parts of this plugin to explore besides this sort of simple things I just showed you. But I have plenty of videos on the site about how to use the… if you go to member benefits and plugins, I have a whole bunch of videos here on the site about how to use this Thesis Simple Header Widgets plugin.
Jim: Great. (05.50) and it looks amazing. So I’ll be exploring it now in the next while.
Rick: Well, great. You know, you’re welcome to join us anytime. I’m glad to have been of help.
Jim: That’s brilliant. I’ve been struggling with that particular problem now for quite a while so that’s really helped me a lot. Thanks. I appreciate it.
Rick: Well, you betcha. You have a great day, Jim.
Jim: Cheers. Thank you.
Rick: Bye bye.
Okay let’s see so the next question we are going to address here is… let’s see, actually, Ken asks, “Is there a space between the f and the equal sign in the telephone number?” No. If you look at this… let’s bring this over here again real quickly. No space here. No space there, no space there. I’m not sure what the result of having spaces in there is but you definitely need a space between the a of the anchor tag and this property href but you don’t need a space inside of these things.
And yes, I mean, you can size this… come back over here for just a second. I’m looking at this. If you want this to be a larger size, all you have to do is say so. If we go back over to Simple Header Widgets, now this plugin is not… this is the Simple Plugin so it’s not really designed to style text. I mean the most that it does is that it gives you text alignment. So for example, you could set it to the right. And what this really does is just configure alignment for the elements inside this widget area. You can use other of my plugins to style this text differently or you can use your custom CSS file. Now you can also even include inline styles but I don’t recommend that, but you could use inline style inside of your text widget. You could even you know, give it a… oh, I mean just for example, without even using inline styles, you could just give it a tag, right?
So if we come back down here to widgets and look at the right header area widget you know, you just give it an h3, right? h3 and a closing h3… and actually, let’s just make it h4. h3 has a more specific SEO. Import… but they’re you know, it makes it stand out stronger now. But anyway, any of the CSS classes that you would ordinarily use can be used for this. And or you can use something like my BYOB Thesis Widget Styles Plugin. So the Widget Styles plugin which I also have a whole bunch of videos on will give you the opportunity to give, to provide a whole bunch of styling for you know, all different kinds of parts of that widget. So if you don’t want to write out your CSS yourself so…