Make a Phone Number Clickable in WordPress

Make a Phone Number Clickable in WordPress


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 “T L” and it has
a ; 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’s two examples here.
There’s 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. Telephone-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 thelink. Instead of normally doing a full path, (a link of where a file or maybe another
page on the internet sits right here) we’re telling it “phone number.” 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!

About the author

Comments

  1. Way 2Cool and thanx for yet another top tip – was just thinking that it may not be immediately apparent that the number is clickable, so would an option be to add a png 'call to action graphic' with the associated url being tel:000000000000

  2. What's your favorite WP theme you like to work with? I see that you're using the Bridge WP theme in this video. Thanks!

  3. Just wanted to thank you for this video. You answered a question that has bugged me for quite a while. I use an awesome WP visual editor that can't be beat for it's interface and simplicity of use. However, whenever I would construct a lightbox with a phone number, the clickableness is gone off the number that would normally be there when I'd put the number into a regular page. Learning this little bit of coding has resolved that problem and I once again am using the best WP visual editor in the industry.

  4. Great tip. Works great on a smartphone. But do you know of a way to make NOT clickable on a DESKTOP computer? (or tablet or other device that's not able to dial.) It shows as a link in the browser and gives an error or prompts to ask what program is needed to open the link. Users may get confused.

  5. Short, to the point and very easy to understand and perform, Shapoo.

    Regarding desktop computer, my own solution on my computer is using Skype to call but it's the surfer responsibility to have Skype.

  6. How do you keep it black and no link on the PC but blue and clickable on mobile? The code took me to a 404 page. Must not be compatible with all themes.

  7. thanks for the tips, It was helpful! I am using elementor plugin and putting "tel:number" or "mailto:email" is working perfectly 🙂

  8. 2018 works great with Elementor phone button! I added "tel:(myphonenumber)" in the link area of the elementor phone btton. Works great ~Thank you! I'd love to know how to make the call to action revert to email during certain hours.

  9. Hi Kori, Thanks for the great videos! I tried "tel:(my phone number)" on an astra theme with elementor and it did not work. I tried it in different formats like tel:+15555555555, tel:15555555555, tel:5555555555, tel:555-555-5555, tel:1-555-555-5555 but none of them worked. I was tested on iphone 6 and iphone 7 with safari, chrome and firefox. Do you have any ideas why? or fixes?

  10. Hi Kori
    I am very new spent a couple of months learning I just want to point out there is are no steps for how to get to that point to make it more efficient for dummies like me you need to do it in a step by step process Hope that helps you thanks for your advice

  11. I was in love with Ellen. I am in love with you now. I came for numbers and got emails too. I am a new subscriber .

  12. I am from Sri Lanka. That's exactly what I wanted. you are the one who explained that clearly. Thank you soooooooooooooooooo much Kori.

  13. What a great tutorial! Simple, to the point, and concisely explained. You're getting a double on me (like and subscribe). Thank you for taking the time.

Leave a Reply

Your email address will not be published. Required fields are marked *