How To Make a Phone Number Clickable in WordPress

If you run a business with a contact number, then you should know how to make a phone number clickable in WordPress. You may have several mobile visitors who are already impressed with you to create a new call.

Is it necessary?

You can find you the number of mobile visitors on your site from the webmasters. Out of them, there will be customers who want to interact with you directly in the phone call.

When they are browsing the site from the mobile device, wouldn’t it be customer friendly if they can contact you with a click?

How would it be if they need to manually dial your number when they are browsing with a mobile?

Saying this, you need to understand that the phone numbers should be in a visible position so that it comes in the eye of the visitors.

Is a plugin necessary?

You do not need a plugin to add a clickable phone number. You can create a hyperlink with the help of HTML or with a visual editor.

How to make a phone number clickable in WordPress

There are two ways to make your phone number clickable. Let’s discuss each of them in short.

How To Add a Clickable Phone Number with hyperlink

Select the text where you want to add the phone number.

In this example, Call Us Now is with the highlight.

After highlighting the text, in the URL field type tel: followed by the international country code and the telephone number. 

In place of this example, country code and phone number, you can enter the number that you wish your visitors to contact. Finally, save the changes.

Now, if you have a look at the post, you will find that you have just generated a clickable phone number.

How to make a phone number clickable in WordPress with HTML

You can also edit HTML to create a hyperlink to call the number.

Use this HTML code to create a link in the phone number.

<a href="tel:+19876543210">Call Us Now</a>

It is similar to what we did in the visual editor above.

Additionally, you can also create a link to receive SMS from your site.

Don’t fret! It’s not a challenging task. You have to change the protocol tel: to sms: with the desired anchor text.

<a href="sms:+19876543210">Message Us Now</a>

However, you can also link a phone number to the buttons in the Gutenberg editor for better visibility.  

To add a button block, at first, add a new button.

There are two existing styles, fill and outline while creating buttons.

You can select text and background colors in the button block settings. While choosing the color, you can either select the pre-existing colors or prefer a custom color that matches your requirement. If you know the hexadecimal value of color, you can also enter the code to select the desired custom color.

The border-radius of the buttons can be manually adjusted to make the curved ends. If you do not need a border-radius and want the square button, you can enter border-radius 0.

Additionally, you can set to open the link to open in a new tab or the existing tab.

To link the number in the button, click the link icon and enter the URL code for the phone number, as we discovered earlier in this post.

Adding a clickable phone number in the WordPress Menu

At first, Go to Appearance > Menu.

Choose the menu where you want to keep the phone number. Depending on the site, it may have multiple menus. So, choose the right menu that you want to edit.

In this window, Go to Add menu items > Custom Links

Here in the URL field, enter the phone number in the correct format. Once you save this page after entering the URL and Link Text, it will become clickable.

In the URL field, write the phone number in the international format, as we discussed earlier in this post. In the LinkText field, you can either keep words like Call Us / Contact Us or the phone number itself.

Wrapping Up

After learning how to make a phone number clickable in WordPress, you can implement it in the post, page, or menu according to your need.

Further Reading

1. Create WordPress Anchor Links
2. Edit CSS in WordPress
3. Change WordPress Author