How to Make a Phone Number Clickable in WordPress

Nowadays, people are spending more time online and utilizing their phones more frequently. However, you may have seen a contact number on a webpage and when you click on it, it will prompt you to dial the number on your mobile phone.

This is how an internet user may be taken to your business phone line immediately with minimal effort without copying and pasting or remembering the number you provided, which can ultimately benefit your business/website.

Therefore, the need to make a phone number clickable in WordPress is crucial for a business website owner. This guide will walk you through how clickable phone numbers or click to call button/link works, as well as how to make a phone number clickable in WordPress manually with code, by adding link, in the navigation menu and using a WordPress plugin.

How Does Clickable Phone number Works?

A clickable phone number, also known as a click to call is a website feature, that allows a user to dial a number merely by clicking on it. It will automatically dial up your business telephone line on their device without having them type it or copy and paste it on their device.

On mobile devices, a clickable phone number will launch the phone application and dial your business line, while on desktop, the clickable phone number will open a browser window that permits the user to choose their preferred VOIP or calling app, such as Skype Viber, etc.

Why Make Phone Numbers Clickable in WordPress?

There are many reasons why you should make a clickable phone number in WordPress. Making phone numbers clickable on your website can improve your business’s sales and marketing efforts by providing better customer service and increasing sales.

This is how you can provide a better user experience to your customers as they will be able to contact you with just one click. This benefits both your business and website visitors as it will save their time from dialling the contact number on their phone and will eliminate the need to copy-paste or remember the contact info.

Clickable phone numbers not only improve your customer service experience but also help you get more leads. The likelihood of them converting into a lead or client is greater as people are more likely to contact you when this function makes it easier for them to do so.

1) Make a Phone Number Clickable in WordPress With HTML Code

Making a phone number clickable with code allows you to manually add click to call buttons and links anywhere on your WordPress website. The simplest method to add a phone number that can be clicked on your website is by adding this HTML code to your page:

<a href="tel:+9244441212"> +1 (555) 555-1212 </a>
<a href="tel:+9244441212"> Call Us </a>

These links will bring up the phone app on the user mobile device and dial the contact number you’ve provided.

In WordPress, you can add the clickable phone number quickly and easily. Go to your WordPress Dashboard > All Page/ All Post, then go to the page or post where you want to add the clickable phone number

After that, in the Post/Page builder of your website, search for Custom HTML and select it.

Search for custom html

The HTML widget will be added to your site, now paste the following code there:

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

Now, your contact number is clickable and it will open the phone app on a mobile device.

Note: On desktop, the clickable phone number will open a browser window that permits the user to choose their preferred VOIP or calling app, such as skype viber, etc.

How to Add Click to Call Icon png

You can also add an icon next to the click-to-call text link in the HTML code. You can use a telephone icon or other relevant icons. To do so, go to WordPress Dashboard > Media > Add New and then upload an image or icon.

uploading phone icon

After uploading the image, you can now add its URL in the img src between the quotes:

<a href="tel:+9244441212"> <img src="https://example.com/wp-content/uploads/2018/10/phoneicon.png"/> Call Us </a>

You may also customize it to your liking, using custom CSS.

Note: You can copy the image URL from Media > Library where you have uploaded the image/icon

copying the phone icon URL

You can also see a click-to-call link with the image you uploaded after completing the process.

How to Avoid Mistakes in HTML code:

When writing your HTML code, be sure to avoid making the following mistakes.

  • The most common mistake is using dashes, which isn’t supported on every device. The number won’t always function on all devices like ( tel: +92222222 ).
  • Make sure HTML quotations are not missing for example( <a href=tel:+9244441212> Call Us </a> )
  • Forgetting to add a colon after “tel” causes the number to not be clickable like ( tel +92222222 ).

When writing your HTML code, be sure to avoid making all these mistakes.

2) Make a Phone Number Clickable in WordPress by Adding Link

With HTML code, you may make a clickable phone number in WordPress, but if you only want to generate a text link that can be clicked on and you aren’t making it as a call button but rather as a textual link, you may give the link to that text. To do so,

Select the text to which you want to add a clickable phone number link and then insert the link in it by adding this link there

tel:+15555551212
selecting the text
inserting the phone number link

You may summarize it entirely in 6 simple steps.

  1. Go to your page/post where you want to make phone number clickable in WordPress
  2. Select the text to which you want to add a clickable phone number link
  3. Click the “Hyperlink” button.
  4. Without dashes, type tel: followed by your phone number like ( tel:+92222222 ).
  5. Click on ENTER to apply the link
  6. Update/publish your page/post and check your clickable phone number in action.
How to Make a Phone Number Clickable in WordPress

You May Like:

How to Add an Email Link in WordPress ( Easy Method )

How to Embed an iFrame code in WordPress ( 3 Easy Ways)

How to Disable Featured Image Auto Crop in WordPress

3) Make a Phone Number clickable in WordPress Navigation Menus

You can also add clickable phone numbers to your navigation menu. Open the WordPress Dashboard and go to Appearance > Menus.

Then, under Navigation > Custom Links add the phone link and the text you want to display and then click on ‘Add to menu’ button.

Making clickable Phone numbers in WordPress Navigation Menus

After that check your website menu to see the clickable phone number in action.

To add a clickable phone number manually, you’ll need to know how to write basic HTML and CSS. If you don’t know how to do it or don’t have the coding skills, we recommend using a WordPress plugin instead because it’s much easier for novices.

4) Make a Phone Number Clickable in WordPress With Plugin

A plugin is a great alternative for those who aren’t familiar with how to add clickable phone numbers manually. This approach is simpler and preferred for everyone. You may use it to quickly set up a click-to-call button in the Gutenberg, Classic editor, WordPress sidebar widget, and even a floating call button that sticks around.

The plugin we recommend using is WP Call Button. It’s a free, easy to use and lightweight plugin with a simple interface that allows you to add clickable phone numbers on any post or page in your website without dealing with complicated code, HTML or CSS.

To add a clickable phone number to your website in WordPress using the WP Call Button plugin, go to the Plugins section in WordPress Dashboard > Add New then search for ‘WP Call Buttons‘ and install it on your site.

After activating the plugin, go to the Settings » WP Call Button page to customize plugin settings.

customizing the wp call button plugin

This plugin allows you to show your phone number buttons in 2 different ways: Sticky Call Buttons and Static Call Buttons. The sticky buttons scroll as users scroll down your website, while static buttons stay in one position.

The first step is to enter your phone number and enable your call now button status, which appears at the top of the page.

Adding phone number in wp call button plugin

You can also change the text on the call button, choose its position, and pick the button color. By default, the call button can only be visible on mobile devices but if you want to show it on desktop as well, then disable the show on mobile only option, you also have the option to show it only on certain pages.

disabling the show on mobile only option

Save the changes and visit your website to check the clickable phone number at the bottom right of your page( wherever you have positioned it on your page)

This is how you can Configure the Settings for Sticky Call Buttons but if you want to add static Call buttons to your WordPress website pages/posts then choose the second tab Static Call button.

customizing the static call button

Here again, you can change the text on the call button or the color in the static call button settings according to your preference. Then, simply copy and paste the shortcode where you want it to appear on your post or page.

To put the shortcode on your page or post, go to your WordPress dashboard, open the Page/Post where you want to add the click to call button and search for the shortcode widget in your page builder. Select it and paste the shortcode there.

Adding the WP call button plugin shortcode to a page

You can also directly search for the WP call button in block editor or any page builder of your website, select it and the shortcode will be automatically added

searching for WP call button in block editor

Now update your post and check the clickable phone number in action on your WordPress website

The WP Call Button can also be added to your website sidebar using the sidebar widget. To do this, go to Appearance » Widgets and drag the WP Call Button widget into your sidebar. You can also customize it in the sidebar menu

customizing the WP call button widget

FAQ( How to Make a Phone Number Clickable in WordPress )

How to create a Clickable Phone Number in Elementor?

With elementor, you can easily make a clickable phone number. Go to your page/post and edit it with elementor, then search for HTML block in elementor page builder. After finding it, paste the below code on your page/post where you want to show the phone number button, save changes and the phone number will be clickable.

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

You can also insert a shortcode in elementor if you’re using a plugin that has a shortcode. In elementor, search for shortcode widget; then copy and paste the required shortcode on your page/post.

Not only elementor, but you may add a phone number to any WordPress page builder using the same method as we have outlined.

How to Create Clickable Phone Numbers on WordPress Sidebar Menu?

To add a clickable phone number on your website sidebar, go to Appearance » Widgets and drag the custom HTML widget into your sidebar and add the below code:

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

How to Create a Clickable link for a Phone Number?

To create a clickable phone number link, go to your WordPress Dashboard > All Page/All Post > Then go to the page or post on your website where you want to add the clickable phone number link and select the text to insert the below link:

tel:+15555551212

After the link is set up, save the post/page and check your website to see the click to call link in action.

How to Make a Phone Number Clickable Using HTML?

The most basic approach to add a phone number that can be clicked on your website is by adding this HTML code to your page:

<a href="tel:+9244441212"> +1 (555) 555-1212 </a>
<a href="tel:+9244441212"> Call Us </a>

Conclusion

In this guide, I went over how to make a Phone Number clickable in WordPress. I also covered how you can make a static and sticky call button on different page/post elements of your WordPress website with the help of a plugin.

I hope this article has helped you to understand how to make a Phone Number clickable in WordPress, if there is anything else that you would like us to cover feel free to contact us via the comments section below. Also, let me know how it worked for you in the comments section.

Thanks for reading!

Leave a Comment