Trying to make a phone number clickable on WordPress?
Making your phone numbers clickable is a great way to increase the number of phone calls that you can generate from your website.
It reduces friction for people who want to call your business by eliminating the need for them to manually type in your phone number. What’s more, it also eliminates the possibility of them making a typo and accidentally calling the wrong number.
But if you’ve tried pasting your phone number into your site, you’ve probably noticed that it’s not clickable by default.
Don’t worry! There’s a quick and easy way that you can make phone numbers clickable anywhere on your WordPress site.
In this post, you’ll learn how to use this method to add a clickable phone number in just a few seconds, as well as some best practices and WordPress plugins that you can use to enhance how your site treats phone numbers.
Here’s the fastest way to make a phone number clickable in WordPress – keep reading for more detailed instructions:
Now, let’s look at this process in a lot more detail…
If you want to add a clickable phone number to content that you’re creating with the WordPress editor, the simplest way is by adding a hyperlink using a special format – tel:.
We’ll use the WordPress editor and blocks as our example, but you can use the exact same approach with the older classic TinyMCE editor.
For this example, let’s say that this is your phone number:
717-867-5309
First, add the phone number directly to the content where you want your clickable phone number. You can add it anywhere on the page, including as part of other content. We’ll use a regular Paragraph block for this example.
Here’s what it might look like:
Then, select the plain text phone number and click the link icon to insert a link – just like you were adding a link to another website or another page on your site.
Add the phone number using the following format – without any dashes between the number:
tel:[phonenumber]
For example:
tel:7178675309
Once you’ve added the phone number, hit enter or click the Apply button.
And that’s it! You just added a clickable phone number.
Make sure to Publish or Update the page.
Then, users can click the phone number to place a call.
If you need to include the international country code for the phone number, you can include a + icon after tel:
For example:
tel:+17178675309
It’s also worth noting that you don’t need to use the phone number as the visible text. You can use the tel: format to make a clickable phone call widget using any block that allows links.
For example, you could use the Buttons block to add a “Call Now” button. If you link that button to tel:7178675309, users will be able to click on the button to place a phone call.
However, the downside of this approach is that the actual phone number won’t be visible to users until they click the button.
In addition to using this method to make phone numbers clickable in the regular WordPress editor, you can also use this same approach to make phone numbers clickable in any widget area on your site.
In most themes, this lets you add clickable phone numbers to your site’s footer and/or sidebar.
Here’s how to do this:
In addition to the methods above, you also might have situations where you want to add a clickable phone number to your WordPress menu.
You can achieve this using the same tel: format, but you’ll add the link in a different way:
Note – if you don’t see the Appearance → Menus area in your WP Admin, that means you might be using a block-enabled theme. In that case, you’ll need to use the Site Editor – here are full instructions for using the Site Editor.
If you need to add a clickable phone number to an area that isn’t covered by the instructions above, you can use custom HTML.
For example, you could add a clickable phone number directly to your theme’s template files. Or, you could use this to add a clickable phone number to a non-WordPress site.
Here’s the HTML code that you’ll need:
Or, to add the international country code, you can use this HTML:
If you want some more flexibility, you can also make a phone number clickable using a WordPress plugin.
Beyond offering an even simpler solution, some of the advantages of using a WordPress clickable phone number plugin are as follows:
Here are some of the most popular WordPress call now button plugins:
We’ll show you how to set things up using the Call Now Button plugin because it’s free and the most popular option. However, the basic idea will be the same for all of these plugins.
If you want to install a phone number plugin, you’ll need to be using at least the WordPress.com Business plan. If you’re using the WordPress.com free plan or a cheaper plan, you’ll want to stick with the method above, which works on all plans.
Call Now Button is one of the most popular WordPress call button plugins. Rather than making a clickable phone number, it adds a “Call Now” button that users can click to call your phone number.
To display this “Call Now” button, you can choose from a few different methods. Here are some examples:
It has a free version that should work for most websites. There’s also an optional premium version that adds more features, such as the ability to only show your call now button during business hours and/or use a different phone number depending on the country a person is browsing from.
Here’s how to use it…
To get started, install the free version of the Call Now Button plugin on your site.
Again, you need to be using at least the WordPress.com Business plan to install custom plugins like Call Now Button.
If you’re not sure how to install a plugin, check out our full guide on how to use WordPress plugins.
Once you’ve activated the plugin, click on the new Call Now Button menu in your WP Admin.
In the Basics tab, do the following:
Your “Call Now” button will now be live.
You can open the front end of your site to see what it looks like. Note – by default, the Call Now button will only appear to mobile visitors. So if you open your site on a desktop device, you won’t see the button (though you can change this behavior).
If you want to change the appearance of your “Call Now” button, you can go to the Presentation tab to make the following tweaks:
In addition to the options above, the plugin also includes a separate settings area that you can access by going to Call Now Button → Settings.
One of the most notable features here is the ability to add click tracking in Google Analytics. This will let you see how many people click your “Call Now” button, which should roughly correlate with how many people are calling your business.
You can also change the size of the button.
At this point, you should have a pretty good idea of how to make a phone number clickable in all kinds of different areas of your WordPress site.
However, to make sure you’re using this newfound ability in an optimal way, you’ll want to follow some best practices for clickable phone numbers.
Most of the people who will use the clickable phone numbers on your site will be browsing on smartphones.
As such, it’s important that you implement a mobile-friendly design. More specifically, you’ll want to make sure that your phone numbers are easy for visitors to “tap” with their fingers, as they typically won’t have the precision of a mouse or trackpad.
Ideally, you’ll want users to be able to click your phone number without needing to pinch/zoom.
If you’re using a call button or some other large element, you might not need to do any work. But if you just want to make the text phone number itself clickable, you can try implementing the following practices:
You can also consider placing your phone number in a container to give it more spacing. Google has a great guide on implementing this and other more advanced strategies.
To make it easy for visitors to find your phone numbers, you’ll also want to ensure that you’re placing clickable phone numbers in easily accessible locations.
Here are some good areas to consider placing your phone number:
You can also try experimenting with placing it in your website’s sidebar. However, remember that your site’s sidebar will appear below the main content for most mobile visitors, which means that many of your visitors might not see the phone number.
The same holds true for placing your phone numbers in your site’s footer.
In addition to using font size and line height to make your phone numbers more tappable, you can also experiment with other style and formatting changes to increase the visibility of your phone numbers.
For example, you could use a different text color to highlight the phone number. Or, you could place your phone number in a button instead of as plain text.
In addition to drawing attention to the phone number, using a button also helps communicate to visitors that it’s a clickable element.
If you want to encourage website visitors to call your business, adding a clickable phone number is a great way to reduce friction and ensure that visitors call the correct number.
The easiest way to make phone numbers clickable is to add a regular link using the special tel:[phonenumber] format.
You can use this to add clickable phone numbers in blocks, in menus, in widgets, in the classic TinyMCE editor, and pretty much anywhere else.
If you want more advanced functionality, you can also consider a WordPress call button plugin. Just remember that while the “tel:[phonenumber]” method works with any WordPress.com plan, you’ll need at least the WordPress.com Business plan to install a call button plugin.
That’s it! Now you know how to make a phone number clickable on your website, and your site visitors can easily place calls to get in touch.
Want more tips? Get new post notifications emailed to you.
Colin Newcomer is an expert WordPress writer who has been using the platform for over a decade. He's on a mission to test every single plugin at WordPress.org.
More by Colin Newcomer
Whether you need a landing page or a full ecommerce site, an online learning academy or an interactive informational site for your business, we can build it for you.
Invent the world’s greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it’s going to need a website—that’s where we come in.
Leave a Reply