How to Add a Click-to-Call Button in WordPress (4 Methods)

Adding a click-to-call button in WordPress takes under 10 minutes and can directly increase the number of calls your business gets from mobile visitors. Most sites make the mistake of listing a phone number in plain text and calling it done. That misses the point. On mobile, users don’t want to copy a number, switch to their phone app, and dial it manually. They want one tap.

Phone calls still drive bookings for local services, clinics and firms that sell by phone. If your WordPress site doesn’t make calling easy, you’re losing those leads to competitors whose sites do.

This guide covers four methods. They are the WP Call Button plugin, a manual HTML tel: link, a menu link and a Button block link. You’ll also get placement tips, styling advice, and a section most guides skip entirely: what to do when your button shows on desktop and you don’t want it to.

What Is a Click-to-Call Button?

A click-to-call button is a clickable link that opens the device’s phone dialer with your number pre-filled. One tap starts the call.

The underlying code is simple. It uses the tel: URI scheme, which browsers and mobile operating systems recognize natively. When a user taps a link formatted as <a href="tel:+15551234567">Call Us</a>, their phone app opens with that number loaded. No copying. No switching apps.

That said, there’s a detail worth knowing: on desktop browsers, the behavior depends on whether the user has a calling app installed (like Skype or FaceTime). On mobile, it works without any extra configuration. This is why many businesses choose to show the button only on mobile devices, which the plugin method makes easy to configure.

Why You Need One (Skip If You Already Know)

Your phone number sitting in a footer doesn’t do much on mobile. A visitor who taps a call button on a phone wants an answer now. Those are high-intent visitors. They’ve already decided they want to talk to someone.

For local service businesses, clinics, law firms, restaurants, or any WordPress site where calls drive bookings or sales, this is one of those rare changes that costs nothing and delivers measurable results. If you would rather let clients book a slot than call, compare WordPress appointment plugins.

Method 1: Add a Click-to-Call Button Using the WP Call Button Plugin (Recommended)

This is the fastest method. It handles the floating sticky button, the Gutenberg block, the sidebar widget, and mobile-only visibility, all from one settings screen. The WP Call Button plugin is free on WordPress.org with no paid version listed as of October 2026.

Step 1: Install and Activate the Plugin

From your WordPress dashboard, go to Plugins > Add Plugin. Search for WP Call Button. Install and activate it.

You can also find it at wordpress.org/plugins/wp-call-button. Download the zip and go to Plugins > Add Plugin > Upload Plugin. Then upload the file.

Step 2: Configure the Sticky Call Button

After activation, go to Settings > WP Call Button. The first screen controls the sticky floating button, which follows users as they scroll.

1. Toggle Call Now Button Status to active.
2. Select your country from the dropdown. This adds the correct country code automatically.
3. Enter your phone number.
4. Choose a button color that contrasts with your site design.
5. Set the button position. Bottom-right works well for most sites since it sits in the natural thumb zone for right-handed mobile users.

One setting that gets overlooked: the visibility option. You can show the button on all pages, specific pages only, or mobile devices only. For most business sites, mobile-only makes sense. Desktop visitors are less likely to tap-to-call, and the floating button can feel intrusive on larger screens.

Step 3: Add a Static Button to a Post or Page

The plugin also gives you a WP Call Button block in the Gutenberg editor. Open any page, click the + icon, search for “WP Call Button,” and add the block. This creates a static button embedded in the page content rather than a floating overlay.

You can customize the text, background color, and font size from the block settings panel on the right. This works well on contact pages, landing pages, or service pages where calling is the primary CTA.

Step 4: Add the Button as a Sidebar Widget

Go to Appearance > Widgets. Find the WP Call Button widget and drag it into your sidebar or any widget-ready area. This puts a call button in the sidebar without touching any code.

This one matters more than it sounds for sites with long article content. Users reading through a detailed post may want to call partway through. A sidebar button catches them without requiring a plugin-generated overlay on desktop.

Method 2: Manually Add a Click-to-Call Button in WordPress (HTML)

You don’t always need a plugin. If you want a call button in a specific spot on a specific page, a few lines of HTML and CSS get you there in under five minutes.

Step 1: Add the HTML Tel: Link

Open the page or post where you want the button. In the Gutenberg editor, click + and add a Custom HTML block.

Paste this code:

<a href="tel:+15551234567" class="call-button">Call Us Now</a>

Replace +15551234567 with your actual phone number in international format. The + followed by the country code is required for reliable cross-platform behavior. For a US number, that’s +1 followed by the 10-digit number. For a UK number, +44 followed by the number without the leading zero.

Step 2: Style the Button with CSS

The link above works as a call link, but it looks like plain text. To make it look like a button, go to Appearance > Customize >Additional CSS and add this:

.call-button {
  display: inline-block;
  background-color: #0073aa;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: bold;
  text-decoration: none;
}

.call-button:hover {
  background-color: #005f8e;
}

Swap the hex codes to match your brand colors. The display: inline-block and padding rules turn the link into a button shape. The rest is cosmetic.

Step 3: Mobile-Only Visibility (Optional)

If you want the manual button to appear only on mobile, add this to your CSS:

@media (min-width: 768px) {
  .call-button {
    display: none;
  }
}

This hides the button on any screen wider than 768px, which covers most tablets and desktops. Adjust the breakpoint to suit your theme.

Worth knowing: If your theme uses a page builder like Elementor or Divi, you may need to paste the HTML in a Text widget or HTML element rather than the Custom HTML block. The block sometimes doesn’t display the anchor tag correctly in older page builder versions.

Method 3: Add a Click-to-Call Link to the WordPress Navigation Menu

This method requires no plugin and no CSS. It puts your phone number directly in your site’s header navigation, which is visible on every page on both desktop and mobile.

Step 1: Open the Menu Editor

Go to Appearance > Menus. Select your primary menu from the dropdown and click Select.

Step 2: Add a Custom Link

On the left side, you’ll see a Custom Links section. Click to expand it.

• In the URL field, enter your number in tel: format: tel:+15551234567
• In the Link Text field, enter what you want to display: Call Us or your phone number formatted for reading, like (555) 123-4567

Click Add to Menu. The link will appear in the menu structure on the right. Drag it to the position you want and then click Save Menu.

Step 3: Preview on Mobile

The navigation link works on both desktop and mobile, but the behavior differs. On mobile, tapping the link opens the dialer. On a desktop, it depends on the user’s installed apps. If you’d rather not show it on the desktop at all, you’ll need a small CSS change to target it by its menu item class, which requires slightly more setup.

This is the right method for businesses that want a phone number visible across the entire site without any floating overlay. Law firms and medical practices often prefer this approach since it feels more formal and doesn’t interrupt the reading experience.

Method 4: Add a Phone Link to a Button Block

Type a tel: link into any Button block to make it a click-to-call button. No plugin, HTML block or CSS is needed for this. The Elementor Button widget works the same way through the Link field in its Content tab.

Follow these steps in the block editor.

1. Open the page in the block editor and add a Buttons block, or click a button that is already there.
2. Select the single button and click the Link icon in its toolbar.
3. Type your number as tel:+15551234567 and press Enter.
   
4. Change the button text to Call Us or your number. Then save the page.

The Link control sits in the toolbar of each single button, as the WordPress Buttons block guide shows (updated September 2026). Leave the open in new tab option off for phone links.

Elementor’s Button widget guide places the Link field under Content > Button. Type tel:+15551234567 there and update the page. Use the same international format as the other methods.

The Button block can also link to a file when you add a download button in WordPress.

Where to Place Your Click-to-Call Button (Placement Tips That Actually Matter)

Getting the button working is the easy part. Where you put it changes how often it gets used.

• Sticky floating button: This is the highest-visibility placement. The button follows users as they scroll. It’s always reachable. Best for sites where calls are the primary conversion goal, like local services, clinics or real estate.
• Above the fold on landing pages: Users decide within seconds whether they’ll act. A call button placed in the top portion of a landing page, next to or below your main headline, captures the intent before it fades. Place it where thumbs naturally rest during one-handed use. On most phones, that’s roughly the center-to-bottom of the screen.
• Service and product pages: Someone reading your roofing services page is already warm. A call button mid-page or at the end of the service description catches them at the right moment.
• Contact page: Always include a clickable number here. It’s the one place where every visitor expects to find a way to reach you.
• Sidebar: Works for blogs and informational sites. Readers browsing a long post may want to call without finishing the article.

Worth knowing: Avoid putting the button in the footer only. By the time someone scrolls to the very bottom, the moment of intent has often passed. The footer is fine as a backup, but it shouldn’t be your only placement.

Common Mistakes to Avoid

A few things go wrong regularly that are worth catching before you launch.

• Formatting the number without a country code: tel:5551234567 works inconsistently across Android and iOS versions. Always use the full international format: tel:+15551234567. The + is not optional.
• Showing the floating button on the desktop without thinking it through: On a laptop screen, a floating call button can overlap content and look out of place. Test it before you go live. Most plugins let you restrict it to mobile only, and for most sites, that’s the right call.
• Forgetting to test the actual dial: This sounds obvious, but tap the button on your phone before you publish. You’d be surprised how many sites go live with a typo in the number.
• Using a number that isn’t always answered: A click-to-call button sets the expectation of an immediate response. If calls go to a voicemail that nobody checks, the feature creates frustration rather than leads. If you can’t guarantee someone answers, add a text option too. On a WooCommerce store, one of these WooCommerce WhatsApp order plugins lets customers order in the chat instead.
• No tracking: You can’t improve what you don’t measure. The WP Call Button plugin lists built-in Google Analytics event tracking. If you’re using the manual HTML method, set up a click trigger in Google Tag Manager as shown below. Knowing which pages drive calls tells you exactly where to double down.

How to Track Click-to-Call Conversions in WordPress

Tracking is not optional if you’re serious about this. Here’s the short version for each method.

• With the WP Call Button plugin: The plugin’s WordPress.org page lists click tracking with Google Analytics events. Its settings screen has no tracking option to change as of October 2026. Tap the button once and check your GA4 Events report to confirm the clicks arrive.
• With the manual HTML method: You can track click-to-call interactions directly inside Google Tag Manager. First, create a new trigger using the Click – Just Links trigger type and configure it to fire only when the Click URL contains tel:. This ensures the trigger activates only when someone taps a phone number link on your website.

Then, create a new Google Analytics: GA4 Event tag and connect it to that trigger. Use an event name like phone_call, and optionally pass the {{Click URL}} parameter to track the exact phone number clicked. Add your GA4 Measurement ID (G-XXXXXXXXXX) so the event is sent correctly to Google Analytics. Once published, this setup provides you with accurate per-page call tracking data, enabling you to identify which landing pages generate the most phone leads.

Without Google Tag Manager: Add an onclick attribute directly to your tel: link:

<a href="tel:+15551234567" onclick="gtag('event', 'phone_call', {'event_category': 'Click to Call'});">Call Us</a>

This sends the event to GA4 each time someone taps the button. It’s a quick solution for sites that don’t use GTM.

Conclusion

Adding a click-to-call button in WordPress is a straightforward task with a long-lasting impact, especially if your business relies on phone-based leads. The WP Call Button plugin handles it in minutes for most sites. The manual HTML method works for anyone who wants a specific placement without another plugin. The navigation menu method suits sites that want site-wide visibility without any floating overlay. A tel: link on a Button block is the quickest no-code route for a single page.

The difference between these methods isn’t right or wrong. It’s about what fits your site’s purpose. A local plumber benefits from an aggressive sticky button. A law firm might prefer a clean nav link. Pick the one that matches how your visitors already behave.

Once your button is live, test it on your own phone, connect it to Google Analytics, and check back in two weeks to see how many clicks it’s getting. That data tells you whether the placement is working or whether you need to move it somewhere more visible.

Frequently Asked Questions (FAQs)