In the growing digital world, there are an increasing number of people surfing Internet with their smartphones. Thus, more and more webmasters tend to make their sites mobile-friendly and leave some contact information on the mobile site to facilitate contacts. To make visitors’ life much easier, we suggest you to make phone number clickable so as to put people through with one click.
And now, the clickable phone number has been accepted by a large number of webmasters who are running a website with mobile phone version. If you would like to become one of them, you are required to follow the guide as below, which introduces two valid methods for you, in terms of the use of WordPress plugin and HTML code.
Make Phone Number Clickable with WordPress Menu Function
In fact, adding the phone number is an easy task with WordPress. To do this, you only need to enter your WordPress admin and click Menus button under the Appearance tab. In this page, you can find a lot of labels from the left hand side, such as Pages, Categories, Links and many more. Here, click the Links label.
Now, you can enter your phone number into the URL and the Link Text. By default, the URL section starts with “https://”, but now, you should replace it with “tel:+”, which tells the smartphone that this is a phone number that can be clicked. After the plus symbol, you should enter the number to be dialed. As for the section of Link Text, you can enter either the phone number or some words like “Call Me”.
After that, you can click the Add to Menu button to add this special link into your navigation menu. As you can reorder all your main menus by dragging them, here, we highly recommend you to place the phone number at last, not in the central place of all the menus and not displayed as a sub-menu item.
Make Phone Number Clickable with WordPress Plugin
The plugin selected in the following guide is Telephone Number Linker, which is a solid option for making phone number clickable on mobile devices. Note that, it works with a shortcode that is used to add a link to your phone number and the let the click-to-call text show on the mobile site.
Here, we are going to install and activate Telephone Number Linker via WordPress Dashboard. Go to Plugins > Add New and seek this plugin out.
Since you have made this plugin into effect, you can get started to take a good use of it by enclosing your phone number with the shortcode [telnumlink]. For example, we would like to add a link to the phone number 12345678. And then, the shortcode should be written as [telnumlink]12345678[/telnumlink]. For the mobile site, the shortcode is converted to the following example automatically.
If you wish to hide the phone number and replace the text to other words, then you need to refer to the following shortcode.
[telnumlink "12345678"]Dial this number now: 12345678[/telnumlink]
In this way, the text shown to visitors is “Dial this number now: 12345678” and then shortcode summed in the mobile version looks like as below.
<a href="tel:12345678">Dial this number now: 12345678</a>
You are allowed to display the clickable phone number on both desktop website and mobile site. Besides, the text enclosed in the shortcode can be modified according to personal needs.
Make Phone Number Clickable with HTML Code
If you prefer to make use of HTML code, then the second method is created for you. Even for beginners, the following lines of code are easy to use. You just need to replace the phone number and domain name to your own.
<a href="tel:12345678?>Click Here!</a>
Note that, the text “Click Here!” can be replaced to any other words as you want, such as “Dial this number”, “Call Us Now!”, “Tap to Call”, and so on. Perhaps, if you plan to make the phone number public, you can enclose your phone number in the code.
To make the click-to-call link vivid, you can replace the text to a premium image. Before everything, you should select an image from the Internet and resize it properly. And then, upload the resized image to your website via WordPress Dashboard > Media > Add New. Copy and paste the image URL to the sample URL included in the following HTML code.
<a href="tel:12345678?><img src=”http://yoursite.com/images /click-to-call.png"></a>
Likewise, you should replace the phone number to your own and make sure that the image matches with your website perfectly. The last step is to click the link and test if you have successfully made your phone number clickable.