How to Add Click-to-Call Buttons in WordPress

More and more visitors browse your WordPress site on their phones, but a buried phone number in the footer won’t turn those visitors into calls. A click-to-call button fixes that by letting people tap once to dial your business, instead of copying and pasting your number.

In this guide, you’ll learn how to add click-to-call buttons in WordPress step by step using simple links, menus, and optional plugins—no coding skills required. Even if you’re new to WordPress, you can follow along with the screenshots and tips to get a professional call button live in less than an hour. If you need a broader overview first, you can also review our WordPress guides and tutorials before you start.

We’ll cover both the Block Editor and the Classic Editor (including themes like Jannah), so you can use whichever editing experience your site already has.

Prerequisites

Before you add a click-to-call button, make sure you have a few basics ready.

• Access to your WordPress admin dashboard (an Administrator or Editor account).
• Your main business phone number, ideally in international format (for example, +1 555 123 4567).
• A recent backup of your site, especially if you’ll install new plugins or edit theme menus.
• Optional: a virtual business phone number so you don’t expose your personal cell.

Step 1: Plan where your click-to-call buttons will appear

Before you start adding buttons everywhere, decide where a call makes sense in your customer journey. The goal is to make calling easy when a visitor is ready to talk, not to interrupt them while they’re still browsing.

Typical locations for click-to-call buttons include:

• Header or top bar: For service businesses where the main goal is “Call now for a quote”.
• Floating mobile bar or sticky footer: A call button that follows the user as they scroll on mobile.
• Contact or “Book a Call” page: Right next to your contact form.
• High-intent landing pages: For example, “Emergency plumbing repair” or “Same-day dentist appointments”.

Step 2: Add a basic click-to-call link in WordPress

The simplest version of a click-to-call button is just a phone link using the tel: protocol. When someone taps it on a phone, their dialer opens with the number filled in.

2.1 Build the tel: link

First, format your phone number:

1. Remove spaces and special characters.
2. Keep the leading + and country code if you serve multiple locations.

Example:

tel:+15551234567

2.2 Add a click-to-call link in the Block Editor (Gutenberg)

1. In your WordPress dashboard, go to Pages > All Pages (or Posts > All Posts) and edit the page where you want the button.
2. Highlight the text you want to make clickable, for example Call Us Now.
3. Click the link icon in the block toolbar.
4. Paste your link, for example tel:+15551234567, and press Enter.

Now, anyone on a mobile device who taps that link will see their phone dialer open with your number.

2.3 Add a click-to-call link in the Classic Editor (including Jannah)

1. Go to Pages > All Pages (or Posts > All Posts) and edit your content.
2. In the Visual tab, highlight the text you want to make clickable.
3. Click the chain/link icon in the toolbar.
4. In the URL field, enter tel:+15551234567 and click Add Link.

If you prefer working directly with HTML, you can also switch to the Text tab and paste:

<a href="tel:+15551234567">Call Us Now</a>

Step 3: Style your click-to-call link as a button

A plain text link works, but a button stands out more and gets more taps. You can turn your phone link into a button without a plugin using blocks or simple CSS.

3.1 Use the Buttons block (Block Editor)

1. Edit your page in the Block Editor.
2. Click the + to add a new block and search for Buttons.
3. Type your label, for example Call for a Free Quote.
4. Select the button, click the link icon, and set the URL to tel:+15551234567.
5. Use the right-hand block settings to adjust color, border radius, and alignment.

3.2 Create a button-style link in the Classic Editor

In themes like Jannah using the Classic Editor, you can wrap your link in a CSS class and style it globally.

1. Switch to the Text (HTML) tab in the Classic Editor.
2. Paste something like this where you want the button:

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

3. Save the page.
4. In your WordPress dashboard, go to Appearance > Customize > Additional CSS.
5. Add CSS similar to:

.cta-call-button {
  display: inline-block;
  padding: 12px 24px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
}
.cta-call-button:hover {
  opacity: 0.9;
}

Adjust padding, colors, and font to match your theme.

Step 4: Add click-to-call buttons using a plugin

If you want floating call buttons, mobile-only display, or advanced styling without code, a dedicated click-to-call plugin is a good option.

1. In your WordPress dashboard, go to Plugins > Add New.
2. Search for terms like click to call, tap to call, or call now button.
3. Review the ratings, active installs, and last updated date.
4. Click Install Now, then Activate on the plugin you choose.

Most click-to-call plugins will add a new settings page under Settings or in the sidebar menu. Typical options include:

• Your phone number and call label text.
• Desktop vs mobile display rules.
• Button position (bottom-right, bottom-center, etc.).
• Colors, size, and icons.

If you don’t want to share your personal cell number, it’s a good idea to connect your button to a separate business line. You can compare options using our guide to best virtual business phone number apps.

Step 5: Add click-to-call to menus and headers

Adding click-to-call to your main navigation or top bar makes your phone number visible on every page.

5.1 Add a phone link to your navigation menu

1. Go to Appearance > Menus in your WordPress admin.
2. Select the menu that appears in your header.
3. In the left column, open Custom Links.
4. In the URL field, enter your tel: link (for example, tel:+15551234567).
5. In the Link Text field, enter something clear like Call (555) 123-4567.
6. Click Add to Menu, drag it to the desired position, and click Save Menu.

Your phone link will now show up as a standard menu item in desktop and mobile menus.

5.2 Make a mobile-only call menu item

Many themes, including Jannah, let you hide specific menu items on desktop. Check your theme’s menu settings for “Mobile Only” options. If your theme doesn’t support this, you can:

1. Add a CSS class to your call menu item (for example, menu-call-mobile-only).
2. In Appearance > Customize > Additional CSS, add:

@media (min-width: 768px) {
  .menu-call-mobile-only {
    display: none !important;
  }
}

This keeps the call link visible on phones but hidden on tablets and larger screens.

Step 6: Test and track your click-to-call buttons

Once your buttons are live, you need to test them and measure how many leads they generate.

6.1 Test on multiple devices and browsers

1. Open your site on an iPhone and an Android phone.
2. Tap every click-to-call button or link you added.
3. Confirm that the dialer opens with the correct number.
4. Check that the button text is readable and doesn’t overlap other elements.

6.2 Track clicks as conversions

To understand how effective your buttons are, track click events in analytics. One simple approach is:

• Use Google Analytics with event tracking on your tel: links.
• Track how many visitors tap the button vs total page views.
• Use a separate tracking number for each campaign or page where you care about attribution.

If you haven’t connected analytics yet, start with a solid measurement setup using our guide on how to set up Google Analytics correctly for WordPress. Then add events for your click-to-call buttons.

Step 7: Troubleshoot common click-to-call problems

If your click-to-call buttons don’t behave as expected, work through these checks.

7.1 Link doesn’t open the dialer

• Make sure the link starts with tel: and not http:// or https://.
• Remove spaces and brackets from the number in the URL.
• Test on an actual phone, not just a desktop browser.

7.2 Button looks fine on desktop but is cut off on mobile

• Check your theme’s mobile header layout and padding.
• Reduce the button’s font size or padding in your CSS.
• Ensure no other floating elements (chat widgets, cookie banners) overlap it.

7.3 Click-to-call plugin stopped working after an update

• Clear your WordPress and browser cache.
• Temporarily switch to a default theme (like Twenty Twenty-Four) to rule out conflicts.
• Disable other plugins one by one to see if there’s a compatibility issue.
• If nothing helps, check the plugin’s support forum and consider switching to a better-maintained alternative.

Turn mobile visitors into phone leads with clear call buttons

Click-to-call buttons are one of the fastest improvements you can make to a WordPress site that relies on phone inquiries. With a simple tel: link, some basic styling, or a dedicated plugin, you can turn casual phone users into booked appointments and qualified leads.

Start with a single high-intent page and a clear call label like “Call for a Free Estimate”. Once you’ve tested that everything works and you’re tracking conversions, roll out the same pattern across more pages so every mobile visitor can reach you with a single tap.

Further Reading

• Best Business Phone Services
• Local SEO for Small Business WordPress Sites
• Email Marketing Integration for WordPress
• Best Contact Form Plugins for WordPress

Frequently Asked Questions