Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Add Clickable Phone Numbers for Smartphones in WordPress

Last updated on by
Follow WPBeginner on YouTube
How to Add Clickable Phone Numbers for Smartphones in WordPress

The number of users browsing websites from their phones is increasing every day. A lot of businesses put their phone numbers on their website, but it is not clickable. Recently, one of our readers who was working on a local restaurant site asked us if there was a way to convert phone numbers into clickable links for mobile users. This would allow the mobile users to tap and call the restaurant right from the website. In this article, we will show you how to add clickable phone numbers for smartphones in WordPress.

If a phone number is written in a recognizable phone number format, then most smart phones would automatically recognize the telephone number and convert it into a link. However, if you want the number to be replaced by an anchor text, or you want to link an image to a phone number, then you would want to manually create the link.

The proper format to write a telephone number is:

<Country Code> <(Area Code) > <Local Number >

Example: +1 (555) 555-1212

However, most smart phones would also recognize these formats:

  • +15555551212
  • +1.555.555.1212
  • 555-555-1212
  • 555 555 1212

Tapping on a properly formatted phone number opens dialer in smart phones

Writing phone numbers in proper format will automatically convert them into links for mobile phone users. However, users with older phones may not see the link.

<!--This link will work on Android and iPhone. It will be visible to desktop users but will result in an error when clicked -->
<a href="tel://+15555551212">+1 (555) 555-1212</a> 

<a href="tel://15555551212">Call Me</a>

The problem with the above link is that it will be visible to users on all devices. If someone on the desktop click on it, then it will do nothing on Google Chrome and will show an error in Firefox.

<!-- This link will open Skype on desktop and notebooks, on mobile phones it will ask users if they would like to open skype or dial this number using their phone -->
<a href="callto://15555551212">+1 (555) 555-1212</a>

In the example above we have used callto: protocol. This protocol is used by Skype along with skype: protocol. Using this has an advantage that smartphone users will be able to call the number using their phone service, while users on desktops and other devices will be able to make a call using Skype.

<!-- Link a number to an image -->
<a href="callto://15555551212" title="Call Me"><img src="/images/call-me.png" alt="Call Me" /></a>

The above example links an image to a number using Skype’s callto: protocol. The problem with this syntax is that a smartphone may recongnize the Skype protocol, but it may not recognize the phone number. Furthermore, it may not offer the user a chance to call using their phone.

You can also create links to Skype usernames and provide live chat support, or voice call support to your visitors.

<a href="skype:echo123">Skype</a>

We hope that this article helped you add clickable phone numbers for smartphones in WordPress. Do you use the tap to call feature when using mobile browsing? Let us know by leaving a comment below.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • James

    Thaks very much! very useful. though couldn’t get the callto protocol to work I used the tel protocol

  • Mandy Grigoriou

    Many thanks for this article …however, you don’t say which file we put the code in! To some of us that presents a problem :)

    • http://www.wpbeginner.com/ WPBeginner Support

      Mandy, these are hyperlinks, you can add them into your posts,pages, by either clicking on the link button in the editor. Or switch to Text editor and add them manually.

      • Mandy Grigoriou

        Many thanks :)

  • Jake Tyler

    Thanks, this is actually really helpful.

  • Travis Pflanz

    While this post didn’t bring anything new to light for me, it made me decide to double check all my websites… I found that one site (my main business website) was not clickable.

    I had a around the phone number, giving it a larger font-size than the surrounding text. the was not allowing the phone number to be clickable… So, thanks for putting in my mind to check!

    • http://www.wpbeginner.com Editorial Staff

      Glad it was able to help in some way :)

    • Travis Pflanz

      That was supposed to be a – I had a SPAN around the phone number

  • John Evans

    Hi,

    In this day and age I believe it is essential to have a phone number that is clickable. Especially given the amount of traffic a web site receives from mobile devices.

    I wrote a plugin last year that:
    1. detects a mobile device and makes the link clickable only if it’s a mobile device
    2. Can display alternative text if it is a mobile is detected. That is display “Call Us” instead of your number. Of course it will still link to your number so when it is clicked the number in question still gets called.
    3. It obfuscates the telephone number. Whilst this may not be a major issue for some, it is for others. I for instance have my mobile number on my site so the fact that it is hidden from robots suits me.

    What do I get out of this? Nothing, there is no financial incentive for me to link to my own plugin but I truly believe that within the context of this post the plugin could be a great help to some.

    The plugin can be found at http://wordpress.org/plugins/tel-link-obfuscate/

    Or by searching in the WordPress plugins directory for “Link/Obfuscate Telephone Numbers”

    I do all I can to help if anybody can’t get it working.

    • http://www.wpbeginner.com Editorial Staff

      Hey John,

      Thanks for sharing the plugin. In my opinion, you should never put your cell # on your website. Use Google Voice or something else.

      -Syed

      • John Evans

        Hi Syed,

        Thanks for replying. Normally I would agree with you but with the amount of traffic my site receives and the obfuscation I cannot see it being a problem (although I’m prepared to be proved wrong).

        Considering my mobile/cell is my business phone I feel it appropriate that I provide a way for people who like to communicate via voice to contact me. I know that I personally do not trust businesses that don’t provide a phone number as I feel they are trying hide something or avoid confrontation over poor services etc.

        i can see your point though

        • http://www.wpbeginner.com Editorial Staff

          You can direct your Google Voice to your cell number and control business hours. For ex: If someone on the other side of the world calls you in their day time which is 3 a.m in the morning for you, then you don’t want your phone ringing. I’m speaking from experience there :)

          So just to be clear, you are still providing them with a way to contact you. You are just using an alias number that is forwarding to your main number that the user never sees. Hope that clarifies my initial statement.

          -Syed

  • Brankica

    Coolest tip ever. I didn’t think about putting this on my site but now that I know how easy this is, I am adding it. Thanks

  • Gurjit Singh Khehra

    Yeah, Good to know this. But i am not going to implement it soon as i don’t think that i need a clickable phone number on my blog. But i’ll surely follow this guide when i need to.

    Thanks and Regards.

  • Frithjof

    Cool! This will be very helpful!
    I recently put a Google maps code into a client’s footer widget and noticed that in a phone browser a “phone” button appears that calls the Google maps number.
    I thought that is very cool!