How to Make Phone Numbers Clickable for Smartphones in WordPress

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"><imgsrc="/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.