In How To Articles

How to make a Phone Number clickable in WordPress

You can offer detailed information about your services through your website. Despite all the information, potential customers sometimes prefer calling up the business to have their queries answered before they choose to invest in the service. A clickable phone number makes it easy for website visitors to reach out to you. This is particularly useful for mobile visitors of your website, who can simply tap on the link and call you through the phone app.

Adding phone links also allows you to offer personalised customer service to the customers and benefits both parties. This is an effective way to up your marketing game and improve sales, and can be particularly useful for small businesses. By adding a clickable number, you are also increasing your chances of generating more leads and converting the callers into actual clients. 

In this article, we will discuss two easy ways to add a clickable phone number to your WordPress site. 

  1. Manually (Involves writing some simple code. CSS customizations might be needed.)
  2. Using Plugins

We have also compared the two methods at the end to help you decide which method is better suited to your needs.

Manually adding a clickable Telephone Number

In this method, we will use some simple code to add a clickable phone link. We will demonstrate two different ways of doing this:

a) Using the WordPress Editor to add links

b) Using HTML code

a) Using the WordPress Editor to add links

This method relies on using the WordPress editor and its in-built functionality to add the clickable phone link. In this article, we will use the Block editor and Twenty-Twenty theme. You can use any WordPress theme with the WordPress Editor or Page builder of your choice.

Follow these steps to add custom links for phone calls:

1. From the WordPress dashboard, click on Posts and open up a new post. Or open up the post where you want to add the phone link.

2. Type the text you would like to link with the phone number (anchor text). Select the text and hover over it to reveal the menu and click the add link button as shown.

How to make a phone number clickable in WordPress

3. Enter the ‘tel:’ followed by the telephone number you want to add. For example, if the number you want to add is +9112345xxxxx, enter “tel:+9112345xxxxx”.

How to make a phone number clickable in WordPress

4. Press Enter to add the link. Publish/Update the post and the phone number link will be added.

The steps above will add a text link to the phone number. You can also use it to link images and buttons:

 

a) Linking Images: The following steps will help you add a clickable telephone number to an image –

i) From the WordPress dashboard, click on Posts and open up a new post.

ii) In the Block Editor, find and add the Image block. Upload the image you want to link with the telephone number. 

How to make a phone number clickable in WordPress

iii) Hover over the image and click the link button. Once again, enter the ‘tel:’ followed by the telephone number. Press Enter.

How to make a phone number clickable in WordPress

iii) Hover over the image and click the link button. Once again, enter the ‘tel:’ followed by the telephone number. Press Enter.

How to make a phone number clickable in WordPress

iv) Publish/Update the post and your contact number will be linked to the image.

 

b) Linking Buttons: The steps here will help you add a static button and link it with a telephone number. The process is quite similar to adding images. 

i) Open up a new Post. From the Block editor, add the Button element to the post.

How to make a phone number clickable in WordPress

ii) Edit the button text. Click on the link button and add tel: followed by the telephone number. Press Enter.

How to make a phone number clickable in WordPress

iii) Publish the post. Additional custom CSS might be needed to change the text color, background color, etc.

 

c) Adding clickable phone links to WordPress Navigation Menu:  You can also add a clickable link to your website’s custom menu so that visitors have easy access. Here are the steps:

i) From the WordPress sidebar, go to Appearances and click Menus. 

ii) From the Menu, select ‘Custom Links’. 

iii) Add the telephone number preceded by ‘tel: ‘ in the URL field. Enter the Link text. Click ‘Add to Menu’.

How to make a phone number clickable in WordPress

iv) The item will show up in the menu items list. Click Save Menu to finalise the changes.

How to make a phone number clickable in WordPress

b) Using HTML code

This method is similar to adding regular links using HTML. It requires a few lines of code and can be used to add clickable phone links anywhere on your WordPress website. 

1. The first step is to open the Post or Page where you want to add the phone link. Find and add the Custom HTML block. 

How to make a phone number clickable in WordPress

2. We will now add the code to this block. Keep the contact number and the anchor text handy. Add ‘tel:’ followed by the contact number in the href attribute and add the anchor text between the opening and closing <a> tags. You can simply copy the following line of code and edit the number and the text:

<a href="tel:+911234567890">Call Us Today!</a> 

3. Paste the code in the HTML block. Publish the post.

How to make a phone number clickable in WordPress

Note: Enter the telephone number in the proper format. Ensure the correct country code and area code (if applicable). Do not add any dashes or spaces in the link and ensure the colon after tel (“tel:”). The method can be used for WordPress Pages as well.

Using a WordPress Plugin

If you prefer using a plugin to add clickable links to your phone number, the WP Call Button might be worth trying out. 

This section will help you setup the plugin and get it up and running on your website:

1. Install and activate the WP Call Button plugin.

2. In the WordPress sidebar area, click settings and then click WP Call Button to configure the Plugin. 

3. To add a sticky call button, click on the required tab on the WP Call Button page. Toggle the Call Now Button Status and set it to active. Enter your contact number in the Phone Number field, and edit the button text.

How to make a phone number clickable in WordPress

4. The plugin also allows you to change the position of the button and its color. You can also choose to show the button on specific pages or only on mobile phones. 

5. Once you’re satisfied with the settings, click Save Changes and the button will be visible on the web pages you have selected.

How to make a phone number clickable in WordPress

6. You can also add a Static Call button using this plugin. Simply go to the Block Editor, search and add the WP Call Button block to the page or post where you want the button to appear. You can also copy the shortcode for the static button from the plugin settings and paste it into the desired location. 

How to make a phone number clickable in WordPress
How to make a phone number clickable in WordPress

Which method to use?

Adding phone number links is a useful tool to establish solid customer relationships. It also gives customers the chance to connect better with your business and services. 

Smartphone users can tap on the phone link and connect with the website’s customer service. For desktop users, it works a little differently. Mac users are redirected to the FaceTime app, while for Windows users, it works like Skype call links.  

We discussed two methods to do this, to help you arrive at the easiest way. Between using some code and taking the help of a plugin, we would recommend the manual method. We will reiterate what we always say about plugins: adding a plugin comes with the risk of slowing down the website, and might introduce security vulnerabilities. This is obviously not the case for well-written plugins but for tasks achievable through a little bit of simple coding and minute tweaking, additional plugins aren’t necessarily the best choice. 

We hope you found this article useful. So go ahead, add that phone number to your website and get ready to receive phone calls from potential customers!