How to Make a Clickable Phone Number in WordPress
In this day and age, you’d have a hard time finding a person who doesn’t possess a smartphone. More and more people use these convenient devices to browse the web, on top of the “conventional” phone functions. And this is exactly why you might want to make a clickable phone number in WordPress.
A click-to-call button represents a link or a CTA button on your page that, when clicked on, makes the phone number of your business pop up and allows your visitors to get in direct touch with you.
Just as adding a favicon to your WordPress website is good for the visibility of your brand, adding a Click-to-Call phone number can be a great boost for your business. In this article, we’ll show you how to display a clickable phone number in WordPress using three different methods.
Read on as we cover the following:
As we already mentioned, with many people using their smartphones to access websites nowadays, a clickable phone number can be an extremely convenient tool. No matter your business type, if you prefer to have a direct line of communication with your potential clients, then a clickable phone number can help them reach you more quickly and efficiently. All they have to do is click the button with the number that you put up on your webpage, and the dialer will instantly be brought up on their smartphone. Since the task itself is practically hassle-free, it can make people more inclined to contact you, which in turn means a huge potential to boost your sales and make your business grow.
That being said, let’s get into the details of how you can add a clickable phone number in WordPress. We’ll show you three different ways you can do this – with the help of a plugin, by adding it to a WordPress navigation menu, and by doing it manually.
Using a plugin is probably the easiest way to add a clickable phone number to your WordPress website. If you use a WP Call Button plugin, you will be able to add this button anywhere on your page or post, or as a widget in your sidebar.
Let’s start by taking care of installation and some settings first, and then we’ll show you how to use this plugin to add click-to-call buttons for Gutenberg and for the Classic Editor.
First things first, you need to install and activate the WP Call Button plugin by going to Plugins > Add New and finding the WP Call Button plugin in the search bar.
Next, go to Settings > WP Call Button.
Once there, you can choose if you want to add a Sticky Call Button (which “sticks” as the users scroll through your website) or a Static Call Button (which you can add to your pages and posts). The former option is the best for getting more conversions, but, of course, you can decide which option works best for you according to your preferences.
In the Sticky Call Button tab, you need to switch the Call Now Button Status to Active first. This will allow your Call Now button to be displayed on your WordPress website. We have to note, however, that if you don’t enable this setting here, the call button won’t show up on your site even if you’ve decided to create a Static Call button instead. In other words, this is where you should activate both call button types.
Then, in the Phone Number field, you can add the phone number of your business that your visitors will be able to call when they click on the button. You should also select the area code depending on the country your business is located in. Just like the previous setting, this is where you enter the phone number both for the Sticky and for the Static Call Button type. This means that the number will automatically be pulled from this setting, whether you decide to insert the call button on every page of your website or only on specific pages/posts.
As the name suggests, the Call Button Text field allows you to insert any text you want to be displayed on your site. Just keep in mind that this field will work properly only if you set the Call Button Position to Full Width, which is the option you can find right under the Call Button Text field.
In this tab, you can also set the color of your button, as well as determine the Call Button Visibility. Choose from Show everywhere (which is the default setting), Show only on certain posts /pages and Hide everywhere else, and Hide on certain posts / pages but show everywhere else.
Just a quick note – if you plan to add a Static Call Button to any specific page or post, then we recommend that you choose the Show only on certain posts/pages option so as to avoid having two types of Click-to-Call buttons on one page or post.
Finally, you can also choose whether you want the button to be shown to mobile devices only or not. We will turn this setting off. Don’t forget to click on Save Changes when you’re done.
And here’s what your button will look like on your website:
Adding the Static Call Button to Your Page/Post in Gutenberg
If you’re using the Gutenberg editor and wish to add a static call button to your page or post, go to Posts > All Posts (or Pages > All Pages) and edit the post/page you wish to add the button to. Or, go to Posts/Pages > Add New if you want to add a button to a completely new page/post.
Then, you can simply click on the “+” icon in the page/post in question and find and add the WP Call Button block in the editor.
The WP Call Button block allows you to change the Call Button color, text color, and font size for the page/post in question. Additionally, you can choose to show or hide the phone icon and enable center alignment of the call button. If you want, you can even add an additional CSS class (or classes) in the Advanced field.
As we mentioned earlier, your phone number will be automatically pulled from the Sticky Call Button settings tab.
Once you add your Static Call Button, you can click on Publish/Update to save your changes, and then go and check your page/post to see what your button will look like.
Adding the Static Call Button on Your Page/Post in the Classic Editor
If you want to add a static call button using the Classic editor, you need to access the options that can be found in Settings > WP Call Button > Static Call Button first.
Here you have the options to enter the text of your Static Call button, change the button color, and enable or disable the option to Hide the phone icon from your call button.
Below these options, you will find the option to copy the shortcode which you can then insert on any page or post.
Once you’re done with copying the shortcode, access the page or post you wish to edit (or create a new one), switch to the Text editing mode and paste the shortcode in the editor.
Don’t forget to hit Update/Publish when you’re done, and that’s it – you can go and preview your button on the page/post itself.
Adding the Static Call Button to Your Sidebar With the Help of the WP Call Button Widget
The WP Call Button plugin also allows you to add a Call Button to the sidebar area with the help of the WP Call Button Widget.
To do this, simply go to Appearance/Widgets and add the WP Call Button widget in the sidebar widget area. You can either drag it with your mouse to the sidebar area or click on the widget itself and then select Add Widget.
When you select the “Show Advanced Settings” option, you will see that the widget itself also contains all the necessary options, such as the Call Button text, color, text color, and the option to show/hide the phone icon.
Qode WordPress Themes: Top Picks
View Collection
Another location where you can add a Clickable Phone Number in WordPress is your website’s navigation menu
Access Appearance > Menus, and click on the Custom Links tab. The Link field is where you should add your phone number and the Link Text, just like we did in the picture below:
Click on Add to Menu once you’re done, and that’s it – your call button link will appear in your navigation menu.
Last but not least, you can add a Clickable Phone Number on your WordPress website manually, using a short piece of code. You can also easily add a phone icon image by using HTML.
To start, go to Media > Add New and upload your image.
Then, click on your image and copy the file URL that you can find on the right side of the screen.
Now, you can add the telephone number link and wrap the phone icon image inside it. This is the code if you want to add the Click-to-Call link and the icon to your page or post:
<a href="tel:your phone number">Your Message</a> <img src="Your Image URL" /></a>
To do this in the Gutenberg editor, simply click on the “+” icon in the editor and find the Custom HTML block. Then, add the code in the block like we did (of course, with your own phone number, message and image URL).
And here’s the final look once you click on Update/Publish:
If you’re using the Classic editor, you will add the same piece of code in your editor field – just make sure it’s switched to Text mode.
Finally, to add the phone link with the icon in your sidebar, head to Appearance > Widgets, drag the Custom HTML Widget to your sidebar widget area and add the following code:
<a href="tel:Your Phone Number"><img src="Your Image URL" alt="Your Message" /></a>
Here’s how we did it:
And here’s the final result:
We have to note that these links will open the phone app for mobile users, while on desktop they will launch either Skype (for Windows users) or FaceTime (for Mac iOS users).
Final Thoughts
And that concludes all the different ways in which you can add a clickable phone number in WordPress. Whether you go for the manual method or you decide to use a plugin, you can easily add a Click-to-Call button anywhere you want on your website – a page, a post, or your sidebar area. Incorporating a Click-to-Call link to your navigation menu can also make it easy to find, in turn helping boost your conversions.
If you opt for a plugin, you can even make your button sticky, which makes it highly visible and brings the potential for more phone calls from potential clients.Whatever method you decide to go with, you certainly won’t make the wrong decision. We wish you luck with growing your business!
