How To Fix Things

clickable phone number

How to add a clickable phone number to WordPress

It is possible to allow your site visitors to call your office with a single click on mobile devices, you can create a clickable phone number to WordPress. It is called a click-to-call action, and it can be achieved by using the tel: scheme. In this article, you’ll learn how to make a phone number clickable on your site.

While many mobile devices can detect and automatically turn a phone number into an active link, using the tel: scheme will help to increase the accuracy of your click-to-call actions. If you already have an experience of creating regular HTML links then it should be pretty easy for you to create a click to call link.

In this article, I am going to use an imaginary phone number, for instance, 12344567890. You should use a more meaningful number on your live site, so your customers can reach you using their mobile devices.

WordPress navigation menu

First, I am going to show you how to add a click-to-call link to the navigation menu. It is not hard, and most importantly, it does not require any additional 3rd party plugins. We can do it by using the core functionality of WordPress:

WordPress dashboard: Menus page
WordPress dashboard: Menus page
  1. In your WordPress dashboard, go to Appearance → Menus page.
  2. Make sure you’ve created a custom menu for your site. Otherwise, you will not be able to add a link to the menu. To create a custom menu, click on create a new menu link. Then add a Menu Name and click on the Create Menu button.
  3. After that, click Custom Links in the left section to add a phone number link to the WordPress navigation menu.
  4. Remove the Http:// in the URL field, and add your phone number using the following format: tel:+number. Then enter your text to the Link Text field.
  5. Click on Add to Menu button to place your link to the menu.
  6. Finally, click on Save Menu button to save your changes, now you have a clickable phone number.

Once the menu is saved, your phone number should be displayed in the menu section on your site. Now when the visitor clicks a link with a phone number on a mobile device, it will prompt the visitor as to whether they would like to call this number.

If you are using one of our premium themes then you can add a phone number to the social menu. Your phone number link will be automatically changed to the icon. Below, you can find an example of having a phone number link in the social menu in the Fortune theme.

The Fortune theme: example of a phone number link in the social menu (top right)
The Fortune theme: example of a phone number link in the social menu (top right)

Content links

If you need to add a click-to-call link or button to the content area of your site, or a widget area then you can either add a custom HTML tag or use a build-in Link button in the WordPress editor.

Both, the WordPress editor and the Text widget have a functionality that allows creating a link without adding any custom HTML. Simply click on the Link button, and add your phone number in the URL field using the scheme shown previously in this post.

WordPress block editor to create clickable phone and text number

WordPress block editor: adding a phone number link
WordPress block editor: adding a phone number link
  1. In your WordPress dashboard, open a block editor.
  2. Add your paragraph to the content area of the editor and then highlight the text where you want to insert a link.
  3. After that, click the Link icon in the editor bar to bring up a link modal box.
  4. Add your link to the input field using the following format: tel:+number.
  5. Click Apply icon, or press the Enter key on your keyboard, to add a link.
  6. Save your post or page when you are ready.

WordPress widget area

Customizer: adding a phone number link to the widget area
Customizer: adding a phone number link to the widget area to create clickable phone and text number
  1. In your WordPress dashboard, go to Appearance → Customize.
  2. In the Customizer, go to the Widgets section and select your widget area.
  3. Click Add a Widget button and select Text widget to add it to your widget area.
  4. Add a paragraph to the content area of the Text widget and then highlight the text where you want to insert a link.
  5. Click the Link icon in the editor bar to bring up a link modal box.
  6. Add your link to the input field using the following format: tel:+number.
  7. Click Apply icon, or press the Enter key on your keyboard, to add a link.
  8. Click Publish when you are ready.

If you want to use HTML to add your link then here is an HTML snippet for you:

<a href="tel:+12344567890">Call me maybe</a>