Clickable Phone Numbers

[RecipeSocial]

Hi Bill,

I see you made the phone number clickable, however, where else do i enter the number apart from the contact section on the theme options.

At the moment when i click on the number i’m redirected to a page not found…

How do fix this?

Thanks,

Christian.

[Bill Robbins]

Christian,

Great question. The link there will only work on a mobile device unfortunately unless the computer clicking it has some type of telephony functionality built in. Otherwise it won’t pull anything up. It’s a bit of a trade off for having it work on a mobile phone.

The best fix for it is to hide it in plain sight so to speak. You already have the color set to be the same. You can also change the hover cursor so it doesn’t appear clickable. You can do that this way:

1. Go to the Theme Options page and select the Styling tab.
2. Scroll down to the Custom CSS box and paste this:

   
   a:hover.phone-number {
   	cursor: text;
   }
   

3. Update your settings.

See if that doesn't help. It will still be a link, but it won't look like one so hopefully people won't be likely to click on it.

Bill

[RecipeSocial]

Hi Bill,

I’m not sure if you understood what i’m after with the phone number. I added your code, thanks for sending it over, but it doesn’t produced the desired result.

What i’m after exactly is the ability to click on the phone number via a smartphone and the phone be able to recognise the digits as a phone number and then allow the person to call straight out without having to (copy and paste) the number into the call section of their phone. Is this an option?

Thanks,

Christian.

[Bill Robbins]

Gotcha. In the Contact section of the theme options, there is a field for the phone number link. That’s where you’ll need to enter your phone number which would follow this format:


tel://+15555551212


for a number that was (555) 555-1212 here in the states. I’m not certain of the correct formatting for the UK, but it should be something similar. That will make the link functional on a smartphone, but it will still not work correctly on a desktop if clicked since it’s not a phone.

Hope that helps out,
Bill

[RecipeSocial]

Hi Bill,

Thanks for getting back to me about clickable phone numbers. I’ve had a play around with this now and entered the international format for the cafe’s phone number, but i can’t get it to work. Have you had this feature work for you? I have seen a plugin that’s supposed to make numbers clickable, but not sure if it will clash with code you have already entered for this theme.

I’ve tried the following variations for the number but unfortunately, i’ve had no joy with any.

tel://+4401273684206

tel://+441273684206

+4401273684206

+441273684206

Any suggestions?

Thanks,

Christian.

[Bill Robbins]

To be honest, I’ve only tried it with US numbers. This is what worked for me there for the “url”

tel:+14038425558

That would break down this way:

1 — long distance
403 — area code
8425558 — local phone number

What you could do is look at some sites in your area that have clickable numbers. Then browse through their source code until you find it. Then copy their format.

[RecipeSocial]

Hi Bill,

Thanks for the tip.

I’ve sussed it.

Tip for you, on your next theme update add the following (tel://) to the phone link info section.

at the moment it reads: To make your phone number clickable on a mobile device, enter it here following this format: tel:+18008425558

It should read: tel://+18008425558

I hope this saves you some support time!

Christian.

[Author]

Posts