how to make a phone number clickable in WordPress: featured image

In this tutorial, I will show you how to make a phone number clickable in WordPress.

Why?

Because more than 50% of internet users access the web on a mobile phone.

And if your goal is to have website visitors call you to learn more about your products and services, giving you an opportunity to make a sale …

You should make it easy for mobile users to call! Desktop users can just leave your webpage open, grab the phone and dial the number. Mobile users cannot.

That said, there are a few different ways to make phone numbers clickable. We’ll start with the quickest and easiest methods first.

In This Article

The Blog Mechanic helps new WordPress users, non-techie bloggers, and busy website owners with WordPress. See my services or contact me.

How to Make a Phone Number Clickable In WordPress (Text Links)

If you just want to make text on a page or post a clickable phone number, there are two ways to do this – with the WordPress editor and HTML code.

Method 1: Using the WordPress Editor

Most people are more comfortable with the WordPress editor than HTML code, so we’ll start with the editor first.

Note: the steps are the same for both the Gutenberg and the Classic WordPress editor. The only difference is the editors look different.

The Gutenberg editor looks like this:

How to make a phone number clickable in WordPress with the editor

And the Classic editor looks like this:

How to make a clickable phone number in WordPress with Classic editor

Let’s get started. (See images above for further guidance).

  • Open the page or post with the editor
  • Highlight the anchor text or phone number
  • Click the ‘add link’ button
  • Enter tel: followed by the phone number (with no spaces or dashes)
  • Click apply to add the link
  • Publish or update your page

And that’s it. That’s how to make a phone number clickable in WordPress using the editor.

Method 2: Using HTML Code:

This method allows you to make a clickable phone number anywhere on your WordPress website (e.g. custom HTML widgets and template files), not just on pages and posts.

In fact, it’s unlikely you’ll ever need to use HTML code on pages and posts to make clickable phone numbers because you have the WordPress editor for that.

But if for some reason you do, it’s important to note that the code won’t work if you add it to the visual tab of the editor…

You must add it to the text tab when using the Classic editor:

Or switch to HTML mode when using the Gutenberg block editor:

That said, here’s the code you need to add to the desired location on your site:

<a href="tel:+12096344732">+1 (209) 634 4732</a> 

Or this code, if you want to use ‘call to action’ text instead of a phone number:

<a href="tel:+12096344732">Call Me</a>

You just need to upate the phone tel: number and link text.

And that’s all! That’s how to make a phone number clickable in WordPress using HTML code.

How to Link Images and Buttons to a Clickable Phone Number in WordPress

The steps to link an image or a button to a clickable phone number is similar to making text links a clickable phone number.

And just like text links, you can do it with the WordPress editor and HTML code.

Method 1: Linking Images Using the WordPress Editor

This method is for linking an image on a page or post to a clickable phone number.

For the purposes of this tutorial, I’ve created an image button.

  • Open the page or post with the editor
  • Upload the image that you want to link
  • Click on the image to select it
  • Click the ‘insert link’ button

THEN

  • Enter tel: followed by the phone number (with no spaces or dashes)
  • Click the apply button
  • Publish or update your page or post
Screenshot of me making image a clickable phone number

And that’s it. You have now linked an image to a clickable phone number using the WordPress editor.

Again, just like in the first tutorial for text links, the steps are the same for both the Gutenberg and the Classic editor.

Method 2: Linking Buttons Using the WordPress Editor

This method is used to link a standard button to a phone number, not an image button, BUT it only works with the Gutenberg editor.

If you’re using the Classic editor you will need to use HTML code (skip to the next method), or use a button image instead (see method 1 above).

  • Open the page or post with the editor
  • Click the ‘+’ icon
  • Search for and select the Button block
Screenshot of Gutenberg button block

The button block will be added to the page or post.

In the right sidebar, where it says ‘link settings’ add tel: followed by the phone number you want to link the button to.

Now, just publish or update the page or page. And that’s it. You have successfully linked a button to a phone number using the Gutenberg editor.

Method 3: Linking Images Using HTML

This method is best used when you want to add linked images (or image buttons) somewhere else on your site, other than pages and posts.

For example, in the header, footer, and sidebar area …

You can do this by adding the provided code below to custom HTML widgets and theme template files.

Note: if you do add code to your theme files, always backup your site first so you can restore it if it breaks. And, always add the code to a child theme. If you don’t, the next time you update your theme, the code you added will be removed.

That said, here’s how you link an image to a phone number with HTML code.

First, upload the image to your media library in WordPress and make a note of the image attachment URL. I recommend you copy and paste it on a notepad document.

Now, copy and paste the HTML code below where you’d like to put the linked image on your website (update the phone number and image URL with your own).

<a href="tel:/+10296344732">
<img src="https://www.theblogmechanic.com/wp-content/uploads/2020/07/call-us.jpg"/>
</a>

If the image is bigger than you want it to be, you can make it smaller by adding additional code to change the width of it, like this:

<a href="tel:/+10296344732">
<img src="https://www.theblogmechanic.com/wp-content/uploads/2020/07/call-us.jpg" width="200"/>
</a>

And that’s it. You have successfully linked an image to a clickable phone number on your WordPress website using HTML code.

Method 3: Linking Standard Buttons Using HTML

Just like method 3 above, this method is best used to link a standard button to a phone number somewhere other than pages and posts …

For example, in the header, footer, and sidebar area using HTML widgets and theme files.

To do that, add this code:

<a href="tel:/+10296344732">
<button>+1 (209) 634 4732</button>
</a>

Or this code if you want to have ‘call to action’ text on the button, not the phone number.

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

After copying and pasting the code on your website, all you have to do is update the tel: number and the button text.

Note: the styling of your button is inherited from your WordPress theme. To change the appearance of the button, you can use CSS code.

Conclusion

I hope this tutorial has helped you learn how to make a phone number clickable in WordPress. I have shared two easy methods to help you link text, buttons, and images to a phone number, anywhere on your site, not just on pages and posts.

If this tutorial has helped you, let me know if the comments box below. Or if you know of another way to make a phone number clickable, share it in the comments box

You May Also Like

Leave a Reply

Your email address will not be published. Required fields are marked *