Are you trying to add a clickable phone number to WordPress? More than half of most website’s visitors use a mobile device to access content now. This means that more than half of people could simply click to call rather than punching in your phone number. In this tutorial, we’ll show you how to make a phone number clickable in WordPress. The good news is that it is pretty simple – you don’t have to be able to do any advanced coding and you can significantly improve your user experience for your mobile visitors.
There are two ways you can add a clickable phone number in WordPress:
1. Adding a link in the link module
2. Editing the HTML
Adding a Clickable Phone Number in the WordPress Link Box
If you want to add a clickable phone number to a blog post or page in WordPress, you simply highlight the text you want to turn into a link and then add “tel+”, the phone country code, and the phone number. Here is an example for a US based phone number (country code = 1)
Adding Clickable Phone Number HTML
If you are not a web developer, the idea of you editing HTML might sounds a bit overwhelming. Don’t worry though. It is really easy to add this type of link in WordPress! Let’s get started by looking at what the code for a “normal” link looks like:
<a href="https://example.com">Anchor Text</a>In the example above:
- the URL goes in between the ” marks
- The “Anchor Text” is what is displayed
- The link would be rendered like this: Anchor Text
To make the link point to a phone number, and be clickable, we have to:
- Use the phone number instead of a link
- precede the phone number with “tel:+”
The HTML code to add a clickable phone number looks like this:
<a href="tel+15554443333">Click to Call</a>It is important to note that before the phone number, 555-444-3333, we need to add the phone country code. For the US, this is 1.
To add a phone number in WordPress, you’ll have to start by switching to the HTM view:
Next, you’ll want to wrap your anchor text with <a> tags and insert the +tel: and country code:
That’s it! When you switch to editing visually, your phone number will show up as a link:
This is an example paragraph. In it, we’ll add a click to call link here: Call us!
Adding a Clickable Phone Number in a Menu
If you would like to use a clickable phone number in a WordPress menu, this too is very easy. Simply go to Appearance > Menus in the left hand navigation. Then add a custom link and simply use the tel:+phone number in the link field
Alternative Phone Links
In addition to using “tel”, there are a few other phone-based protocol handlers that can be used as well:
| Protocol | Example | What it Does |
| tel | +tel:15554443333 | This will typically open a popup box asking the user to confirm they want to call the number. |
| callto | +callto:15554443333 | This works like the above “tel” link, but it will call with Skype rather than a mobile phone which can allow desktop users to call as well. |
| sms | +sms:15554443333 | This will open an sms message addressed to the the specified phone number. Note: There is less support for this protocol so it mat not work for all users. |