In order to have a phone number available for calling from a smart phone the number needs to be inserted as a text link rather than as part of a graphic image. The example sites asked about here have the phone number as part of the header graphic which was inserted using open hook. We discuss how to correct this with a two different methods for replacing the graphic and then adding the text link over the header.
Select the link below to watch a high definition version of this video
[S3VIDEO file=’public/liveanswers/LA12-13-10a-phone-number-in-thesis-header.mp4′ bgimage=’https://www.byobwebsite.com/wp-content/uploads/2012/09/LA12-13-10a-phone-number-in-thesis-header.jpg’ displaymode=’overlay’]
Rick: Gail had a question about adding a Call Me button. So Gail you’re on now. Would you like to explain what it was you’re trying to accomplish?
Gail: Yes in the website that I put a phone number in the header, I did nothing specific. And if you press it from a smartphone, it calls. In Thesis, it does not. And I was wondering what we needed to do to make that happen.
Rick: So can you give me a URL so I can take a look at it?
Gail: Yes, abespestcontrol.com. I don’t know if it has changed but on my Droid because I think I have it in parentheses. It will work directly from my Blackberry if I press one of those numbers and I did not program it directly in any way for that to happen. This is what I’m talking about, from a smart phone. So on my Blackberry, I press it and it gives me the option to call. On my Droid, it does not and I think it’s because I put the area codes in parentheses, but this is not an option in a header for Thesis. It says Google has changed with that little magnifying glass to see window of the website so I would like to have that option for Thesis as well.
Rick: Yeah, I’m opening it up on my Blackberry so I can see what the behavior is you’re talking about. I’m not sure I understand why it would not work in Thesis.
Gail: I used the formula to create a header that you had on YouTube which has worked very successfully for me. I didn’t know if because I put a phone number in there, that it has created as artwork. I just don’t know how to make this happen in Thesis and I think it’s very wise for a smart phone to be able to press them in the header and have the call made.
Rick: Oh I see because the one you created was actually a… it was a graphic image, not text.
Gail: Probably, I’m guess. I don’t know.
Rick: Okay, well actually, that would be…I totally get what you’re talking about now because it’s absolutely right. I’m sitting here with my Blackberry and on your site and if I hover over it, it asks me to call. Now, the problem with my Blackberry is, I just hovered over the phone number and clicked on it and it’s asking me, “Do I wanna call 746-2237?” Now obviously, that one I didn’t mean to get because my Blackberry is area code 206 and you wanna call… and so I think that does have something to do with the way that the area code is displayed here.
Gail: And I know that. I figured that out actually but here’s the funny part. When I built this website, I didn’t know they automatically ask you what to call. So I need the area code smaller, etc. I’m going to correct that now so that’s a possibility from smart phones so I know how to correct that here. My question is, how do I make that reality in Thesis because if you go on to my website, you’ll see several of the blogs that I have built with Thesis and every one of them because of the smart phone feature has the phone number in the header but it isn’t allowing the call to happen as it does on this website.
Rick: Can you give us an example of one of those sites that’s got the phone number but it doesn’t work?
Gail: I’m going to give you a site that I built with your header, let me think. Well try my site: adviceonadvertisingblog.com.
Rick: Okay advice on advertising for the Internet and Yellow Pages and this is the phone number you’re talking about right here?
Rick: Okay, let’s see.
Gail: If you press that from a smart phone, it does not ask to call.
Rick: Sure. We’ll look at it in Firefox so I can tell exactly what’s happening here. Okay, so that is… this image right here.
Rick: And it is an image, it is not a phone number. Did you use the method that I have on YouTube? Is that the open hook method? I mean did you use open hook?
Gail: Yes. I’m not sure if I used the open hook and now I created the image, I loaded it in Sandbox 1, put it on there, converted it to HTML.
Rick: Yes that is, that would be using open hook. And so, we’d have to use a different method for doing that and if you will log on to the forum and post this question on the forum… let’s see, how much time do we have? We got about 13 minutes. The way to do that is to make this not an image…. this part right here but to make it a piece of text. And in fact, it might make sense to make this little section right here, also a piece of text. But even if you don’t do that… but to make this piece of text, it’s on top of this banner. That’s how I would approach doing that and I can give you some code. Essentially, what you wanna do is, you’re gonna uninstall open hook and you won’t use that for this process. What you’re gonna have to do is use your custom functions PHP file to do this. But what you’ll do is you’ll create this header in a way very similar to… well, you’ll have this header image, just without the phone number in it and you’ll make that a background of the header and then you’ll make a text area inside of that header that will… that you’ll put this phone number in. And so, this phone number will sort of over the top of the rest of this image and I can provide you with some code on the forum that you could plug in your custom functions PHP file and make it work for this. So I guess what I’m suggesting is that, just you know, briefly post this question on my forum…
Gail: Your forum or your DIY forum?
Rick: No, no. On my forum. And do that under Thesis PHP you know, just to… sort of point you in the right direction… that would be under the forum here.
Gail: I haven’t been on there in a very long time, I’m not sure I remember how.
Rick: Well all you have to do is just log in to my site, once you’re logged in to my site, you’ll be right here… the dashboard and once you’re there, you can just come over to the forum and then scroll down to Thesis PHP and post your question there on the Thesis PHP and I’ll do a little thing on how to make that happen.
Gail: Okay. Well now that Thesis has the 1.8, you don’t have to go through the steps that I had to go through prior to 1.8. It has a place for you to just upload the header.
Rick: It does but that’s not get you a text phone number.
Gail: I know.
Rick: And so, now you could… if you want to use that method… if you wanted to use the Thesis image header method for inserting the header but you wanted then, to overlay a phone number over the top of that, I can also show you how to do that.
Gail: Okay, great.
Rick: And somebody else just recently asked me a question, it was very similar to that… that I didn’t really fully answer but I’d be happy to do a little tutorial on how to use that custom image header but overlay something on the top of it. Whether it is overlaying a search box which is… I think what they were asking… how you put the search up there but also how we could put a phone number up in that place.
Gail: I don’t want just a phone number. I want a phone number that has the call phone sign.
Rick: Well, actually all of this is a phone number. It’s an actual piece of text phone number that your phone recognizes as a phone number.
Rick: And so, all we need to do is put it up there so that the phone recognizes it and when the phone recognizes it… that’s all you really need, right? You just need the phone to recognize it as a phone number and I’ll definitely show you how to do that.
Gail: Okay and for this, I said that already that I want to make corrections. Will the instructions work as that also?
Rick: Oh sure. You bet.
Gail: Would I need to go in and take that old banner out with the phone number that exists?
Rick: Oh that’s… what I would do is I would take the old banner out, remove the graphic phone number from it then use the Thesis 1.8 header feature to put that phone number back in or put that graphic back in and then we’ll use PHP to put the phone number back in the same spot you wanted it in the first place.
Gail: Okay. And as far as buying with advice on advertising, I have loans above and below it for future purposes.
Rick: You can move your lines there, just take out the phone number.
Gail: Just take out the phone number?
Rick: Yeah, if you just take out the phone number, then what I will do is I’ll move the phone number up so it is in between the lines.
Gail: And then you don’t need to do anything then to allow it to…we don’t have to make a statement about click to call or anything of that nature?
Rick: No. People who are using their smart phones already understand how that works, right? And if you put a click to call there otherwise, what happens is the person thinks, “Oh well I can call this phone number if I just click on this and talk to you through my microphone and speakers.” That’s a different… and in fact, when you ask that question, that’s what I thought you were asking originally way back when. And so I tried to find a solution that would allow a person sitting in front of their computer to click on and use their microphone and speakers to talk to you. I’ve tried a couple of them and that didn’t work. So I was gonna suggest Google Talk or Skype for that but…
Gail: Right. If you look at all the links that I have there, everybody has a phone number in their header but none of them function so…
Rick: Right and the reason they don’t function is because it’s not a phone number. It’s a graphic image and so all they have to do is remove the graphic element and put a phone number there in its place. And I will definitely work on that for you so that you can see how to replicate that. In fact, I’m gonna do it with this banner. I’m gonna seal your banner, take the phone number out of it, you know, use that as my example and then we’ll put that up on a demonstration site so that you can see what it looks like. We’ll do a little video on how it got there with the code that we’ll use and you can see how it’s done.
Gail: Okay, now is this gonna be a premium video or is it gonna be a video for everyone?
Rick: I generally make these premium videos. But if you need it to be a free video, I’ll be glad to make it for you for a free video.
Gail: Okay, thank you.