WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
Beginner's Guide for WordPress / Start your WordPress Blog in minutes
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

WPBeginner» Blog» Tutorials» How to Add a Click-to-Call Button in WordPress (Step by Step)

How to Add a Click-to-Call Button in WordPress (Step by Step)

Last updated on January 2nd, 2020 by Editorial Staff
532 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
How to Add a Click-to-Call Button in WordPress (Step by Step)

Do you want to add a click-to-call button in WordPress? As more people visit your website using their smart phones, adding a tap-to-call button makes it easy for them to contact you. In this article, we will show you how to easily add a click-to-call button in your WordPress website.

Adding a click to call button in WordPress

Why Add Click-to-Call Button in WordPress

Many small business websites rely on customers to contact them for quotes, pre-sale information, or support.

That’s why we recommend adding a contact form to all website owners.

However, depending on the industry some users may want to speak with a person right away.

As mobile web traffic increases around the world, often users find it more convenient to just tap-to-call and get the information they need.

If you’re just starting a business, then we recommend looking into a professional business phone service, so you can do call forwarding, share numbers with employees, and answer calls using your cell phones from anywhere (instead of a landline).

That being said, let’s take a look at how to easily add a click-to-call button in WordPress.

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Method 1. Adding a Click-to-Call Now Button in WordPress Using Plugin

This method is easier and recommended for all users. It allows you to easily create a click to call button in Gutenberg, Classic editor, WordPress sidebar widget, and even a sticky floating call button.

First thing you need to do is install and activate the WP Call Button plugin on your site. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » WP Call Button page to configure plugin settings.

WordPress Call Button

The first settings page is for the most commonly requested feature, Sticky Call Button, which scrolls with the user as they browse your website.

This highly conversion optimized feature helps you get more calls and close more deals faster.

You need to start by entering your business phone number that you want people to call. WP Call Button plugin uses the smart phone field which means you can simply select your country, and it will automatically add the country code in the proper format.

Note: If you don’t have a business phone number, then you can get one from Nextiva. This is the company we use for our business VoIP phone.

Next, you have the option to add the call button text, select the positioning, and choose the button color.

By default the plugin will add a click to call button on all pages and all devices. However you do have the option to show it only on certain pages or show only mobile devices.

Once you’re done, click on the activate toggle at the top and then click on the save changes button to store your settings.

After that, you can visit your website to see the call button in action.

WordPress Click to Call Button

If you want to add a static call button in your WordPress contact page, about page, or any other post / page, then you have two options.

If you’re using the new WordPress block editor, then simply create or edit an existing page. Next, you need to add the WP Call Button block by clicking the “+” icon.

Call Button Gutenberg

WordPress Call Button block comes many customization options such as the ability to customize button color, button text, font size, and the ability to show or hide the phone icon.

Once you add the button, it will allow users to click and call your phone number that you specified in the WP Call Button settings page.

Now, if you’re using the WordPress classic editor, then you need to use the Static Call Button generator to get a shortcode.

Simply go to Settings » WP Call Button and click on the Static Call Button menu on the top.

WordPress Call Button Shortcode

Next, you can customize the call button text, color, and choose whether you want to show or hide the phone icon. After that simply copy the shortcode below and paste it inside the post or page where you want to add it.

WP Call Button plugin also allows you to add the call button in your website sidebar using the sidebar widget.

To do this, you need to go Appearance » Widgets and drag the WP Call Button widget to your widget-ready area.

WordPress Call Button Sidebar Widget

This widget lets you add the Widget title and description. You can click on the Advanced Settings link to customize call button text and call button text.

After reading this, you can probably see why WP Call button is by far the easiest and most comprehensive WordPress click to call button plugin the market.

The best part is that it’s 100% free, and it has a seamless integration with Google Analytics.

All you need to do is use the MonsterInsights plugin, and it will automatically track how many people click on your call button and which pages are getting you the most leads, so you can focus on what’s working to grow your business, faster!

Method 2. Manually Add Click to Call Button in WordPress

This method allows you to manually add click to call buttons and links anywhere on your WordPress website.

The easiest way to add a clickable phone number to your website is by adding them like this:

<!--This link will work on Android and iPhone. It will be visible to desktop users but will result in an error when clicked -->

<a href="tel:+15555551212">+1 (555) 555-1212</a> 
 
<a href="tel:15555551212">Call Me</a>

These links will open the phone app on mobile devices. On desktop computers, Mac users will see an option to open the link in Facetime, whereas Windows 10 users will see the option to open it in Skype.

You can also use HTML to add an image or an icon next to the click-to-call text link.

Let’s take a look at how to do this.

First, you need to visit the Media » Add New page and upload the image you want to use. After uploading the image, you need to click on the ‘Edit’ link to proceed.

Upload phone icon

This will bring you to edit media screen where you need to copy the file URL. You will need it in the next step.

You can now edit the post, page, or custom HTML widget where you want to display the click-to-call phone icon. In the edit area, you can now add the phone icon image wrapped inside the tel: link.

<a href="tel:+15555551212"><img src="https://example.com/wp-content/uploads/2018/10/phoneicon2.png" alt="Call us" /></a> 

Once done, you can visit your website to see the click-to-call link with the image you uploaded.

Click-to-call button with image icon

You can further customize this by adding more text before or after the link, and use custom CSS to style it.

Click to call button with more text and CSS style

Adding a Click-to-Call Link to WordPress Navigation Menus

You can also add the click-to-call link to your WordPress navigation menu.

Simply go to Appearance » Menus page and click on the custom links tab from the right column. Now you can add the phone number in the link field in the following format:

tel:+155555555

After that, add the text you want to display and then click on ‘Add to menu’ button.

Add click-to-call link to navigation menu

Next, visit your website to see your click to call link in action.

Call link in navigation

Want to add an image icon next to your click-to-call link in the navigation menu? See our article on how to add image icons with navigation menus in WordPress.

We hope this article helped you learn how to add a click-to-call button in WordPress. You may also want to see our guide on how to create a free business email address.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

532 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Revealed: Why Building an Email List is so Important Today (6 Reasons)

    Revealed: Why Building an Email List is so Important Today (6 Reasons)

  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Properly Move Your Blog from WordPress.com to WordPress.org

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

32 Comments

Leave a Reply
  1. Uko eben says:
    Jun 20, 2020 at 5:03 pm

    I want to create an e-commerce website solely for the sales of fairly used phone gagdet, and adding a “chart botton and phone number botton” to contact the seller is pertinent. I have searched for articles in relation to my need, but I haven’t gotten a solution on your website. Pls I need a solution.

    Reply
    • WPBeginner Support says:
      Jun 22, 2020 at 1:51 pm

      For that customization, you would want to check with the plugin you’re using to add the ecommerce options to your site and they normally have a method to do so.

      Reply
  2. Mona says:
    May 26, 2020 at 9:19 pm

    Do you have a call button that can go on different pages with different phone number? And also that would show if the person is on a call or busy?

    Reply
    • WPBeginner Support says:
      May 27, 2020 at 9:37 am

      Not at this time.

      Reply
  3. Kelly D. says:
    Apr 20, 2020 at 3:19 pm

    Can you please reference or link the Gutenberg editor doc you referenced? I would like to add the WP Call to the Contact Us page within the footer.

    Reply
    • WPBeginner Support says:
      Apr 21, 2020 at 1:44 pm

      Any guides we mention should normally be linked if you click the orange text in the article :)

      Reply
  4. rajneesh says:
    Mar 23, 2020 at 3:07 am

    A debt of gratitude is in order for the pleasant article! Informatin just I required. It would utilize it for my site to get contacts with guests straightforwardly. Pleasant work done!

    Reply
    • WPBeginner Support says:
      Mar 24, 2020 at 8:36 am

      Glad you found our content helpful :)

      Reply
  5. Spencer Pearson says:
    Feb 12, 2020 at 12:19 am

    Great post! I’d also mention that CTA buttons (on your website itself) should be clear and stand out — through color, format, etc.

    Reply
    • WPBeginner Support says:
      Feb 12, 2020 at 8:45 am

      Thank you for sharing your recommendation :)

      Reply
  6. Spencer Pearson says:
    Feb 6, 2020 at 12:18 am

    Thanks for sharing such a nice article

    Reply
    • WPBeginner Support says:
      Feb 6, 2020 at 8:55 am

      You’re welcome, glad our article could be helpful :)

      Reply
  7. Alan says:
    Jan 29, 2020 at 7:47 pm

    “Simply go to Appearance » Menus page…” I can’t even get started because I can’t find Appearance anywhere. Perhaps this is for an outdated interface.

    Reply
    • WPBeginner Support says:
      Jan 30, 2020 at 10:46 am

      As long as you are logged into your site and in your wp-admin area it should be there. If you do not see it you could be on WordPress.com, we have our comparison guide here:
      https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/

      Reply
  8. Michael William says:
    Dec 11, 2019 at 5:28 am

    Thanks for posting article.. It’s really helpful & informative.

    Reply
    • WPBeginner Support says:
      Dec 11, 2019 at 9:58 am

      Glad you found our article helpful :)

      Reply
  9. Helen says:
    Aug 18, 2019 at 3:41 am

    Thanks for the nice article! Informatin just I needed. It would use it for my site to get contacts with visitors directly. Nice work done!

    Reply
    • WPBeginner Support says:
      Aug 19, 2019 at 11:02 am

      You’re welcome, glad you like our article :)

      Reply
  10. Masoud says:
    Aug 16, 2019 at 8:58 am

    hi,
    many thanks for this useful article.
    so, i have a website about appliance repair.
    and each item has its own page.
    for example , refrigerator repair has its own page and air conditioner repair has its own page.
    i want to that: I define phone number for each page. and The page viewer when the touch button is touched, The relevant master will answer the phone.
    have you an idea for this ?
    thanks

    Reply
    • WPBeginner Support says:
      Aug 16, 2019 at 11:05 am

      For the moment the plugin is unable to do that, one method you could use would be to have a widget for each page and manually create the button in the widget and conditionally display the widget you want visible such as the method in our article here: https://www.wpbeginner.com/plugins/how-to-show-or-hide-widgets-on-specific-wordpress-pages/

      Reply
  11. Quy says:
    Aug 12, 2019 at 6:25 am

    Thanks for great article!

    Reply
    • WPBeginner Support says:
      Aug 12, 2019 at 10:51 am

      Glad you like our content :)

      Reply
  12. Tom says:
    Mar 14, 2019 at 6:16 am

    I have multiple contact numbers in my website footer, can I make all 3 phone numbers (1 landline + 2 mobile) all Click-to-Call enabled?
    Thanks!

    Reply
    • WPBeginner Support says:
      Mar 14, 2019 at 10:53 am

      If you are able to edit those numbers then you could use the manual method for adding click to call.

      Reply
  13. Ionut says:
    Mar 7, 2019 at 7:17 am

    After enabeling analytics in the plugin, where do i go to see the numbers of calls?

    Reply
    • WPBeginner Support says:
      Mar 7, 2019 at 11:20 am

      You would use Google Analytics for the tracking, if you reach out to the plugin’s support they should be able to let you know the specific location.

      Reply
  14. Eugene says:
    Jan 30, 2019 at 12:38 am

    Does this plugin support call back feature like the “Callback Tracker” plugin? I have found that it is more convenient for visitors to get call from me in just several seconds after their request.

    Reply
    • WPBeginner Support says:
      Jan 30, 2019 at 11:10 am

      Not at the moment, the plugin is to add a button for your mobile visitors to call you

      Reply
  15. Stiven says:
    Dec 17, 2018 at 1:25 pm

    Hi, is there any chance to change the Number depending of the location of the person? I mean for US a number, or for Spain another number?

    Reply
    • WPBeginner Support says:
      Dec 17, 2018 at 3:27 pm

      Hi Stiven,

      It doesn’t seem like this plugin can do that.

      Reply
  16. David Cornish says:
    Nov 1, 2018 at 12:52 am

    A very timely article, just when I need the info about click to callable buttons. Perfect !!!! And Thanks a lot.

    Reply
  17. Kamran awan says:
    Oct 24, 2018 at 5:11 pm

    Thanks for sharing such a nice article .. Keep the good work up.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
All in One SEO
Improve website SEO rankings with AIOSEO plugin. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
LiveChat logo
LiveChat Inc Coupon
Get a 30 day free trial and 30% OFF LiveChat, one of the best live chat service providers for WordPress users.
LearnDash
LearnDash Coupon
Get the lowest price on the best learning management system (LMS) plugin for WordPress.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.