UPDATED in 2022: Still Works – Here’s the code needed to make your phone number clickable. Copy and Paste in your WordPress website and then replace the phone number with yours.
<a href="tel:000-000-0000">000-000-0000</a>Full Video Transcript
Hey y’all welcome to another WordPress Wednesday! My name is Kori Ashton.
Â
In this tutorial I’m just going to teach you very quickly and easily how to make your phone number on your WordPress website “clickable.” Really, this can apply to any website. It doesn’t have to be on WordPress- but I’m going to take you into a WordPress website and let you kind of see what that looks like.
Quick shout out to our awesome sponsors and partners in this industry:
- WP Engine for those who love WordPress hosting and need a great hosting service. Whenever you call them they actually know what WordPress is. Checkout WP Engine.
- WP Elevation- if you’re a freelancer trying to make a living with WordPress you need to check them out.
- WP 101- if you like more WordPress tutorials (like what I’m giving you right now) you need to checkout their library these are three awesome resources for you.
Just wanted to give you those ideas.
So, today as we’re looking at a website here example. Here is a phone number and it is “clickable.” That’s what we want to have happen. So as somebody comes to your website on a mobile device, they can just tap their screen and allow that to dial the phone number.
I’m going to scoot this screen just slightly here to the right. What I want you to look at is down here in the bottom, left-hand corner of the screen as I hover over the text (the phone number.) You get to see the little path show up in that bottom, left-hand corner of where this link would take us. Notice that it just says; “TEL” and it has a colon and a phone number. That is the “nerd-code” that we’ll basically be adding in. It’s not difficult at all, but if nobody shows you then how would you do it? Let me show you how to do it. Here we go.
We’re going to go behind the scenes in this particular page that I have created here.
This is the actual “nerd code” that you would write. I’m going to show you an even easier way to do this. Let’s do this. There are two examples here. There are two examples that you just saw. I’m going just do another phone number here.
It’s our WebTegrity line. Type that phone number in here. I’m going to go ahead and put an h2 tag around it so it’s nice and large font. Right? Then we’re going to go in the visual mode because I was actually just in the “nerd-code” mode. So both of these are the two phone numbers that you’ve already seen on the front side example that are “clickable” currently.
I’ve already put that code in there, but I’m going to show you how I did that. I’m going to highlight this link (or this text) and I want to link it. So I’m going to click on my “insert link” option. Right here I’m just going to write what we saw earlier.
Tel:-and then we’re going to type in the phone number. You can do dashes if you’d like, but you really don’t need to. (Phones are smart these days.) You will type in the area code (if it’s an international line you might need to add that as well.) We would say, “Add link” and now it’s going to type all the “nerd-code” that it takes behind the scenes for that link to take place. When we preview it and go to the front side of the website, again, we’ll have another phone number here. It’s completely clickable.
Of course, you would want to test this on your cellphone before you just leave it hanging out there for everybody to think that it’s working. You would want to activate this. Go look at this particular website on your cellphone. Click on the button and make sure that your smart phone can pick that up and that it dials correctly. That is it y’all! It’s just that little bit of code behind the scenes (I’ll let y’all look at it again.) This is the individual code that it’s writing for you. It’s the link. Instead of normally doing a full path, we’re telling it “phone number.”
<a href=”tel:0000000000″>000-000-0000</a>
Another thing that you might have seen something like this would be a “mail to” option and we would put an email address in there. That’s how we make an email address “clickable.” So very similar to that but this “call” that we need to be putting in there is a “tel” for telephone. How easy is that y’all? Who knew?
I hope this helped you and if you like using WordPress- please be sure to click on the little icon that looks like a play button here to subscribe to our channel. Every single Wednesday I’m doing a video just like this that’s going to help you become a crazy-cool nerd (like me) with WordPress! I hope you’re having a great week. See you next week. Bye, bye y’all!
