How to Make a Phone Number Clickable to Encourage Calls

Open a store. Launch a business. You can. You will. We'll help. 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. Start your website.

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.

How to Make a Phone Number Clickable With tel: (Works Anywhere in WordPress)

Here’s the fastest way to make a phone number clickable in WordPress – keep reading for more detailed instructions:

Open the editor for the piece of content where you want to add a clickable phone number – it could be a post, page, sidebar, footer, menu, and so on.
Add your phone number in plain text if you haven’t done so already.
Highlight the plain text phone number and click the link icon to insert a link.
In the link field, enter tel: followed by your phone number, with no spaces or dashes. For example – tel:7178675309
Hit enter or click Apply to insert the link
Publish the changes to your website

Now, let’s look at this process in a lot more detail…

How to Make a Phone Number Clickable in the WordPress Editor

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.

How to Make a Phone Number Clickable in WordPress Footer or Sidebar

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:

Open your WP Admin.
Go to Appearance → Widgets (if using a theme with this option).
Select the widget area to which you want to add your clickable phone number. The available areas depend on your theme, but you’ll usually see options like “Sidebar” and “Footer”.
Add your phone number to a Paragraph block.
Follow the instructions above to add the link using the same tel:7178675309 format.

How to Add a Clickable Phone Number to WordPress Menus

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:

Open your WP Admin.
Go to Appearance → Menus.
Choose Custom Links under Add menu items.
Enter the same tel: format from above in the URL box – e.g., tel:7178675309
Insert the clickable text in the Link Text box – this could be a CTA (“Call now”) or the actual phone number.
Click the Add to Menu button.
If needed, use drag and drop to change the location of your clickable phone number in the menu.
Click Save Menu to save your changes.

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.

How to Make a Phone Number Clickable With HTML

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:

<a href="tel:7178675309">717-867-5309</a>

Or, to add the international country code, you can use this HTML:

<a href="tel:+17178675309">+1-717-867-5309</a>

How to Make a Phone Number Clickable With a WordPress Plugin

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:

Call now buttons – instead of just listing the phone number in plain text (or in addition to doing that), you can create a clickable “Call Now” button that appears on mobile devices. Users can click that button to call your business.
Messaging app integrations – you can also create buttons that let users call you on messaging apps like WhatsApp and Signal, rather than cell service.
Targeting rules – you can make it so that your call now button only appears on certain content or for certain types of visitors (e.g., only showing it to people who are browsing on a mobile phone). Some plugins even let you show/hide your phone number based on a user’s country (or use a different number depending on a user’s country). Or, you might be able to only show the button during your opening hours.
Analytics – you can integrate analytics tracking so that you can see how many people click on your phone number. This should roughly correlate with how many people call your business, though not every single person who clicks your call now button will actually go through with placing a call.

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.

How to Create a WordPress Call Now Button

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…

Install the Plugin

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.

Customize Your Button Basics

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:

Enable the button using the Button status toggle.
Enter your phone number in the Phone number box without any spaces or dashes. If you’ll only have local callers, you don’t need to use the country code, and you can just enter your number like 7178675309. If you want to allow foreign numbers to call, you should add the plus sign and the country code – e.g., +17178675309.
If you want to include text alongside the phone icon, enter that text in the Button text box. Or, leave it blank to only show the icon.
Click Save Changes.

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).

Customize Your Button Style

If you want to change the appearance of your “Call Now” button, you can go to the Presentation tab to make the following tweaks:

Change the color of the button.
Change the color of the link.
Choose a different placement for the button – right corner, left corner, or center. You can also choose “full bottom” to turn it into a bottom bar.
Enable your button for desktop visitors – the default behavior is to only make it visible for mobile visitors.
Use the Limit appearance box to only show the button on certain content or to exclude certain content from having the button. You can target different pieces of content by using the content ID.
Choose whether or not to show the button on your site’s front page.

Access More Advanced Settings

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.

Best Practices for Clickable Phone Numbers

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.

Pay Attention to Mobile-Friendly Design (Make Phone Numbers “Tappable”)

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:

Increase the font size to 18 px ideally, or 16 px at a bare minimum.
Increase the line height to boost line spacing. Aim for 1.2 at a minimum.
Don’t include other tappable links near your phone number, as this might cause users to click the wrong element.

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.

Place Phone Numbers in Easily Accessible Locations

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:

Header
Contact page
Footer

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.

Use Formatting and Styling to Increase Visibility

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.

Conclusion

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.