How to Add a Click to Call Button in WordPress (5 Easy Ways)

A visitor on a phone who wants to talk to you should not have to copy your number, switch apps and paste it into the dialer. A click to call button in WordPress removes those steps: it turns your phone number into a link that opens the dialer with the number already filled in, so mobile users can reach you with one tap.

This guide covers five ways to add one, from a clickable phone number you can set up in two minutes to a sticky call button that follows visitors down the page. Every method uses the same tel: link underneath, so once the format is right you can switch between them freely. You will also see how to track calls in GA4, what happens when someone clicks on a desktop computer, and how to fix the problems that stop call buttons from working.

If most of your leads come from local searches, the call button is the last step of a longer path. Our playbook on how to turn Google Maps visits into phone calls covers the rest of that journey, from your Google Business Profile to the landing page.

Quick answer: a click to call button is a link that uses the tel: scheme, so tapping it opens the phone dialer with your number already filled in. To make a phone number clickable in WordPress, link it to tel: followed by a plus sign, your country code and the number, with no spaces (for example tel:+12025550123). You can put that link on a Buttons block, a paragraph, a Custom HTML block or a menu item. For a floating call now button on mobile, use a free plugin such as WP Call Button or Call Now Button, or the short CSS snippet in Method 5.

Which click to call method should you use?

All five methods produce the same result when someone taps: the phone dialer opens with your number. What changes is where the button lives, how it looks and whether it stays on screen while visitors scroll.

Method	Plugin needed	Best for	Stays visible while scrolling
1. Buttons block with a tel: link	No	A styled call button inside a page or post	No
2. Linked phone number in text or Custom HTML	No	Contact pages, footers, icons and extensions	No
3. Menu or header link	No	Keeping your number one tap away on every page	Only if your header is sticky
4. WP Call Button or Call Now Button	Yes (free)	A floating call button with no coding	Yes
5. Custom sticky call bar	No (a few lines of CSS)	A lightweight floating button you fully control	Yes

Before you start: format your number for tel: links

Every click to call link is an ordinary link whose address starts with tel: instead of https://. Phones read that prefix and open the dialer. The number format is the part most tutorials skip, and it is the usual reason a call button fails for visitors in another country.

• Start with a plus sign and your country code: +1 for the US and Canada, +44 for the UK, +55 for Brazil.
• Drop the leading zero of a national number when you add the country code. A London number written 020 locally becomes +4420.
• Keep the link itself to digits: tel:+12025550123. The visible text can be formatted however you like, such as +1 (202) 555-0123.
• Use the same number on your site, your Google Business Profile and your directory listings.
• If you advertise a vanity number such as 1-800-GET-HELP, show the letters in the visible text but put the matching digits in the link, because phones do not reliably dial letters. Our guide to choosing a vanity phone number for your business covers the branding side.

If you want the technical detail, MDN’s documentation on linking to telephone numbers covers the syntax and how different devices handle these links. The examples in this guide use +1 202 555 0123, a number from the range reserved for fictional use in North America, so replace it with your own before publishing.

Method 1: Add a click to call button with the Buttons block (no plugin)

This is the fastest route if you use the block editor, and it needs nothing beyond what ships with WordPress.

1. Open the page or post and click the + inserter where the button should go.
2. Search for Buttons and add the block.
3. Type the label. Wording that says what will happen works best, such as Call us now or Call +1 (202) 555-0123.
4. Select the button, click the link icon (or press Ctrl+K, Cmd+K on a Mac) and type tel:+12025550123.
5. Press Enter, leave Open in new tab switched off and update the page.

Test it on your own phone before moving on. Tapping should open the dialer with the full number, country code included.

Tip: if the same button will appear on several pages, turn it into a synced pattern once it is styled. When your number changes, you edit the pattern once and every copy updates.

Using Elementor, WPBakery or another page builder?

The idea is the same in every builder: add a button and put the tel: link in its link field.

• Elementor: drag a Button widget onto the page, type your label and enter tel:+12025550123 in the Link field.
• WPBakery Page Builder: add a Button element, open its URL (Link) setting and paste the tel: link as the URL.
• Divi, Beaver Builder and others: find the button’s URL or Link field and use the same format.

After saving, open the page on a phone and check the published link. If a builder has added https:// in front of tel:, the button will not dial, so remove the prefix and save again.

Method 2: Make a phone number clickable with a text link or HTML

On contact pages, footers and sidebars, a clickable phone number often looks more natural than a big button. In a Paragraph block, highlight the number, click the link icon and type the tel: address. That is all it takes.

When you need more control, such as an icon, an extension or a class for styling, use a Custom HTML block. If HTML is new to you, you only need to copy the snippet and change the number.

<a href="tel:+12025550123">Call +1 (202) 555-0123</a>

Paste code only into a Custom HTML block or the Code editor view. A Paragraph block shows code as plain text, and WordPress turns straight quotes in displayed text into curly ones, which is exactly why code copied from some tutorials breaks.

Add an extension, a text message or WhatsApp option

To reach an extension, add a comma after the number. Most phone dialers read the comma as a short pause before dialing the extension, but support varies, so test it on both iPhone and Android.

<a href="tel:+12025550123,104">Call sales (ext. 104)</a>

For text messages, swap tel: for sms:. For WhatsApp, which many customers outside the US prefer to a voice call, use a wa.me link with your full international number and no plus sign, spaces or dashes.

<a href="sms:+12025550123">Text us</a>
<a href="https://wa.me/12025550123">Chat on WhatsApp</a>

Method 3: Put a click to call link in your WordPress menu or header

A phone number link in the header keeps your number one tap away on every page. The steps depend on whether you use a classic theme or a block theme.

Classic themes: Appearance > Menus

1. Go to Appearance > Menus and open the Custom Links panel.
2. In the URL field, enter tel:+12025550123. Do not type Phone: or leave out the tel: prefix, because WordPress will treat the entry as a regular web address and the link will not dial.
3. Add the label visitors will see, such as Call +1 (202) 555-0123, then click Add to Menu and Save Menu.

Block themes: the Site Editor

Block themes such as Twenty Twenty-Five have no Appearance > Menus screen. Go to Appearance > Editor, open Navigation, select your menu and click the + icon to add a link. Type tel:+12025550123 in the search field, press Enter, then change the link text and save.

A header link only stays on screen while scrolling if your header is sticky. If it is not, use Method 4 or Method 5 for mobile visitors.

Method 4: Add a sticky call now button with a free plugin

If you want a floating call button that follows mobile visitors down the page without writing any CSS, a WordPress click to call plugin is the simplest route. Two well-established free options on WordPress.org suit slightly different needs.

	WP Call Button	Call Now Button
Active installs	40,000+	200,000+
Latest version	1.4.4	2.0.4
Tested up to	WordPress 6.9	WordPress 7.1
Button types	Sticky button, block, shortcode and widget	One floating button free, more with a free account
Click tracking	Google Analytics events	GA4 toggle plus Google Ads conversion tracking
Other actions	Phone calls only	SMS, WhatsApp and more with a free NowButtons account

WP Call Button is the more flexible choice if you also want static buttons inside posts and widgets. Call Now Button is more actively maintained at the moment and tracks Google Ads conversions out of the box. Whichever you choose, try it on a staging copy first if your site runs a WordPress release newer than the one the plugin lists as tested.

Set up the sticky call button in WP Call Button

Prefer to watch first? This walkthrough from the Visualmodo YouTube channel shows the whole setup, from installing the plugin to a live call button. The written steps follow below the video.

1. In your dashboard, go to Plugins > Add New Plugin, search for WP Call Button, then install and activate it.

2. Open Settings > WP Call Button. The first screen controls the sticky call button.
3. Enter your number. The country picker adds the correct country code, so you do not need to type it yourself.

4. Choose the button text, position and color, then decide where it shows: every page, selected pages only, or mobile devices only.
5. Set the call button status to Active and click Save Changes. The floating button now appears on the front end of your site.

Add a static call button inside posts, pages and widgets

For a button inside your content rather than a floating one, open the Static Call Button tab. Classic editor users copy the shortcode it generates into a post, page or widget. Block editor users add the WP Call Button block from the inserter and adjust the color, font size and alignment in the sidebar.

Our second video shows how to place the static call button on a page with the block editor.

To show the button in a sidebar or footer, go to Appearance > Widgets, click + in the area you want, add the WP Call Button block and set its title, description and button color. In a block theme, add the same block to your footer template part in the Site Editor instead.

Method 5: Build a sticky call bar without a plugin

If you would rather not install a plugin for one button, a few lines of code give you a floating call bar that only appears on phones and tablets.

Step 1: add the link site-wide. In a block theme, open Appearance > Editor, edit your Footer template part and add a Custom HTML block. In a classic theme, add a Custom HTML widget to a footer area.

<a class="sticky-call-bar" href="tel:+12025550123">Call us now</a>

Step 2: add the styling. In a block theme, go to Appearance > Editor > Styles and open Additional CSS. In a classic theme, use Appearance > Customize > Additional CSS.

.sticky-call-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 999;
  display: block;
  min-height: 48px;
  padding: 14px 20px;
  border-radius: 999px;
  background: #0a7c3e;
  color: #fff;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

@media (max-width: 1023px) {
  body {
    padding-bottom: 96px;
  }
}

@media (min-width: 1024px) {
  .sticky-call-bar {
    display: none;
  }
}

The bottom padding stops the bar from covering your footer, and the safe-area value keeps it clear of the iPhone home indicator on themes that draw edge to edge. If a cookie banner or chat widget sits in the same corner, lower one of the z-index values or move one of the two elements.

How to track click to call button clicks in GA4

A call button you cannot measure is a guess. GA4’s Enhanced Measurement may record some tel: taps as generic outbound clicks, but they end up mixed with every other external link. A dedicated event gives you a clean count of call attempts per page.

First, make sure you set up GA4 correctly. Then pick one of these options:

• Plugin tracking: WP Call Button and Call Now Button can both send click events to Google Analytics. Switch it on, tap your button and confirm the event arrives in GA4’s Realtime or DebugView report.
• Google Tag Manager: create a Just Links trigger that fires on some link clicks where Click URL starts with tel:, then attach it to a GA4 Event tag named phone_call_click.
• A short script: if you load GA4 with gtag.js, add this snippet site-wide through a code snippets plugin or your child theme’s footer.

<script>
document.addEventListener('click', function (event) {
  var link = event.target.closest('a[href^="tel:"]');
  if (!link || typeof gtag !== 'function') return;
  gtag('event', 'phone_call_click', {
    link_url: link.href,
    link_text: link.textContent.trim()
  });
});
</script>

Once the event appears, mark phone_call_click as a key event in GA4’s Key events settings under Admin. You will then see which pages produce call attempts, not just visits. Keep in mind that a tap is an attempt and does not tell you whether the call connected. If you need that, call tracking software with dynamic number insertion is the next step.

Design choices that get more calls (and fewer missed ones)

• Say what happens. Call us now, or the number itself, beats a vague Contact label because visitors know the tap will start a call.
• Make it easy to hit. Aim for a tap target of 48 by 48 pixels (44 by 44 is the accessibility minimum) with space around it, so thumbs do not land on a neighboring link.
• Keep the number visible on desktop. Hiding the floating button on large screens is fine, but show the number as text. Many desktop visitors call from their own phone, and many computers can place calls through Phone Link, Microsoft Teams, FaceTime or a softphone.
• Match your opening hours. A button that rings an empty office at 10 pm loses the lead. Show your hours next to the button, route after-hours calls to voicemail, or offer a form or WhatsApp link as the alternative.
• Keep the number crawlable. Put your phone number in real text, not only inside an image or icon. Search engines and AI assistants read that text, and it should match your Google Business Profile exactly.
• Label icon-only buttons. If the button is just a phone icon, add aria-label="Call +1 (202) 555-0123" to the link so screen reader users know what it does.

Troubleshooting: why your click to call button isn’t working

• The button does not appear after saving. Your caching plugin or host is still serving an old copy of the page. Clear your WordPress cache and reload the page in a private window.
• It shows on some pages but not others. Check the plugin’s visibility rules first, then the cache. If it still misbehaves, deactivate other plugins one at a time to rule out a plugin conflict.
• Tapping opens an error or a blank page. The link is missing the tel: prefix or contains a typo such as tel;+1 or Phone:+1. Open the link settings and retype it.
• The call fails from abroad or reaches the wrong country. Add the plus sign and country code, and remove any leading zero.
• Nothing happens on a desktop computer. The computer has no calling app set as the default for phone links. That is expected, and it is why your number should also be visible as text.
• Copied code does not work. The quotes have probably turned curly. Retype them as straight quotes inside a Custom HTML block.
• Numbers on iPhone turn into links you did not create. Safari detects phone-like numbers automatically. If it catches things like order numbers, add <meta name="format-detection" content="telephone=no"> to your site’s head and link your real numbers manually.

Quick answers on tel: links, desktop calls and call tracking

Start with one working link, then measure it

A click to call button in WordPress takes minutes to add, but the details decide whether it earns calls: a correctly formatted tel: link, a button that is easy to tap on mobile, and a GA4 event that shows which pages make the phone ring. Start with Method 1 or Method 2 today, add a sticky call button if most of your visitors are on phones, and check the numbers after a few weeks.

Some customers will always prefer writing to calling. Give them the same one-tap shortcut by learning how to make your email address clickable in WordPress with a mailto: link, which works almost exactly like the tel: links in this guide.