Best Way to Add Clickable Phone Numbers to WordPress
Table of Contents
Every business, large or small, typically has a central phone number customers can call with questions and orders. If you’ve been on a business’s website to find their phone number, only to see that it isn’t clickable, you probably were frustrated by needing to copy and paste the number to call it. Knowing how to make a phone number clickable in WordPress is critical to spare your customers this kind of annoyance!
Thankfully, the process to make a phone number clickable isn’t too complex. Looking for ways to add a call button to your blog? Don’t worry; we’ll go over that, too! Without further adieu, let’s get started with our sample post!
How to Make a Phone Number Clickable in WordPress
First, we’ll go over the simplest part: inserting an HTML telephone link to your blog. If you’re only looking to make an image or button into a phone link, feel free to skip to the next section (after making a practice post). You’ll need to log into your WordPress Dashboard first, of course.
Then you’ll need to click on “Posts” on the left-hand column as shown:
After that, you should see a page with a list of all your posts. Locate the “Add New” button and click on it, as shown in the following image:
After that, you’ll need to fill in some text. Most importantly, make sure to include a phone number in text that you’d like to turn into a clickable link in the practice post! An example of what it could look like so far is below:
Before we continue, I wanted to give you a quick reminder that our new clickable item will default to your current theme’s color, both for unvisited and visited links. If you’re looking to change the color of the link, we have a post for that!
Next, highlight the number itself, and you should see a menu pop up that looks something like this:
Then, click on that paperclip button that we boxed in yellow. That will let you add a link. You should then see a small textbox asking for some text or a URL. For your phone number link in HTML, the syntax is quite simple. Just type in: tel:XXXXXXXXXX where the sequence of “X”’s is the number you’re entering. In our example, this is tel:5555555555.
And that’s all there is for learning how to make a phone number clickable in WordPress! However, there are a few things you should know. First, this link usually will not work for desktop computers. Even if the user has a calling application like Skype installed, it’s hit-or-miss.
Were you just looking to learn how to make a phone number clickable in WordPress for Skype? If so, your time was not wasted! Remember, in our traditional telephone link, we used the format of “tel:[phone number]”. For Skype, change the “tel” to “callto”, so you would repeat the previous steps, except using the format of “callto:[phone number]”. However, using this format will make it so that users on mobile devices will also be asked to allow the browser to open Skype!
Using a Call Phone Button
So, now that we’ve gone over how to make a phone number clickable in WordPress as solely a text link, it’s time to bump it up a notch! In this section, we’ll just use a traditional HTML button. If you were looking to use an image, consult the next section.
First, you’ll need to create a new button in your post. You can do this by clicking onto a new line of the practice post. You’ll need to add a new “Content Block” by clicking the “+” button as shown in the image below:
In the search box that we highlighted with a yellow box, you’ll need to search for “button”. There should only be one result, which you should click on to continue our quest to learn how to make a phone number clickable in WordPress (as a button).
After you click on the “Button” Layout Element, you’ll be presented with some options. Remember, on the right-hand column of the page, you’ll be able to tweak the style of your button. Rather than using button and href tags, this approach is preferable. That’s because it keeps everything compatible with your theme and all devices.
In the image below, you’ll see that WordPress prompts you to enter text into the button itself. This is the text that will be displayed. You could either make this just the number itself or something like “Call Us”. In the box we highlighted in red below it, you’ll need to insert our “tel” link, so “tel:5555555555”, which is how to make a phone number clickable in WordPress using a button!
how to make a phone number clickable in wordpress by using an Image as a Call Phone Button
Finally, we’ll take a look at how to make a phone number clickable in WordPress, but through an image. This is one of the most common approaches on the web. Once again, you won’t have to use HTML for the phone number; we’ll simply use WordPress’ “Content Blocks” again! This is one of the many wonders of WordPress.
VERY IMPORTANT: It’s easy enough to just take a screenshot on your iPhone and use that lime-colored “Call” button, right? Or perhaps you went on Google Images and found an icon that would fit perfectly with your blog. Unless you enjoy being the recipient of (very expensive) lawsuits or cease and desist orders, do not use images you don’t have permission to use. Just because an image is on the public Internet does not mean you are free to use it!
Unfortunately, there are many “legal trolls” looking to make a quick buck off of you, but that’s not happening on CleverSequence’s watch! The best way to avoid being targeted for unlawful use of images is to either: make your own image or find an image on a public domain or Creative Commons license. Here are a few search engines that you can use to find a suitable image as you learn how to make a phone number clickable in WordPress as an image. Remember, CleverSequence cannot guarantee these resources’ information on image licensing is correct!:
Let’s say we want to go with the “Call Us” image located here: https://www.publicdomainpictures.net/en/view-image.php?image=228295&picture=call-us
Click on the “Free Download” button as shown:
Once you’ve downloaded the image, click on a new line of your practice post and click that “+” button as we did earlier. The same “Content Block” dialog will appear. This time, search for “Image” and click on that, instead. You will be presented with a screen like this:
Click “Upload” button, and select your image. Then, by default, the same panel of options will appear as did when we added a button. Click that paperclip again, and follow the same process to add your “tel” or “callto” link.
You should now know how to make a phone number clickable in WordPress, whether using just text, an HTML button, or an image! The best part about using WordPress for this is that you don’t even have to touch the actual HTML or CSS; the platform handles it for you! Good luck, and we hope you hear phones ringing soon!
In summary, here is how to make a phone number clickable in WordPress:
- For plain text, simply type the phone number, then create a hyperlink. For regular phones, it is in the form “tel:NNNNNNNNNN”, where “N” is a number. For Skype, it’s “callto:NNNNNNNNNN”.
- For your buttons to act as clickable phone numbers, create the Button as a Content Block, then add the “tel” or “callto” hyperlink on the right-hand pane.
- If you find an image you may legally use to be a clickable phone number, you’ll need to upload the image, select it, and similarly add a “tel” or “callto” hyperlink.