How to make a phone number clickable in WordPress

If your phone number isn’t a tap-to-call link, mobile visitors have to copy it, switch apps, and dial manually. Most won’t.

Making a phone number clickable in WordPress means using the tel: URI scheme to turn plain text into a working call link. One tap on mobile opens the dialer with the number pre-filled.

This guide covers every method that works in 2025:

• Raw HTML in the Block Editor or Classic Editor
• Header and footer placement
• Page builders like Elementor and Divi
• WooCommerce checkout
• Click-to-call tracking in GA4

No fluff. Just the exact steps for each approach.

What is a Clickable Phone Number in WordPress

A clickable phone number is a phone link that uses the tel: URI scheme. When someone taps or clicks it on a mobile device, their phone dialer opens with the number pre-filled.

Without this, your phone number is just text. Visitors have to copy it, switch to their dialer, and paste it. That friction kills calls before they happen.

The HTML anchor tag behind it

The structure is simple:

<a href="tel:+14155551234">+1 (415) 555-1234</a>

The href attribute holds the telephone URI. The visible text is whatever you want users to see.

By continuing, I accept Privacy Policy and T&C

Thank you for subscribing. Check your mail for details

Key formatting rule: the number inside href must use the international format. That means a + sign, the country code, then the digits. No spaces, dashes, or parentheses inside the href value. Those characters can break the link on some devices.

How browsers handle the tel: link

Device	What happens on click	Reliability
Mobile (iOS/Android)	Opens native phone dialer with number pre-filled	Works universally
Desktop with VoIP app	Opens Skype, FaceTime, or configured VoIP client	Depends on user setup
Desktop without VoIP	May show an error or do nothing	Inconsistent

The tel: protocol is defined in RFC 3966. Most modern browsers support it. On mobile, it works without any extra configuration on the visitor’s end.

One thing worth knowing: the browser shows a confirmation dialog before placing the call. That’s a security measure to prevent sites from tricking users into calling premium-rate numbers.

Why Your Phone Number Should Be Clickable

Mobile traffic now accounts for 55% of all WordPress site traffic, according to StatCounter data. If your phone number isn’t a tap-to-call link, you’re adding friction for the majority of your visitors.

The numbers on click-to-call performance are hard to ignore. According to mobile UX research, click-to-call buttons increase conversions by roughly 20-40%. And Google data shows that pay-per-call mobile campaigns convert 6-8% better than standard click-based ones.

The friction problem with plain text numbers

Here’s what a visitor has to do when your number is just text on mobile:

• Memorize or screenshot the number
• Exit the browser
• Open the phone app
• Manually dial

Most people won’t bother. A single tap fixes all of that.

What this means for lead quality

Phone leads convert differently. Inbound calls convert to customers at roughly 30-50%, compared to 2-6% for web form submissions, based on data from Conversion Sciences. That gap is significant for any business that depends on phone inquiries.

The global click-to-call solutions market was valued at $20.3 billion in 2024 and is projected to reach $53.2 billion by 2030 (Research and Markets). Businesses are investing in this because it works.

Locally focused businesses, service providers, and e-commerce stores with customer support lines all see the most direct impact. If someone is on your contact page or header, they’re looking to reach you. Don’t make them work for it.

How to Add a Clickable Phone Number with HTML

This is the most direct method. No plugins, no page builder settings. Just HTML.

It works in both the WordPress Block Editor (Gutenberg) and the Classic Editor. Useful to know if you’re adding a phone number anywhere that lets you drop in custom code.

Writing the tel: anchor tag correctly

Basic structure:

<a href="tel:+14155551234">(415) 555-1234</a>

The display text can be formatted however you like for readability. The href value is what actually dials. Keep that clean: + sign, country code, digits only.

Want to style it as a button? Add a class:

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

Then handle the styling in your theme’s CSS or a Custom CSS block.

Adding it in the Block Editor

The Block Editor doesn’t have a built-in “tel link” field. But there are two clean ways to add one:

• Custom HTML block: Add a “Custom HTML” block, paste your anchor tag directly. This is the most reliable method.
• Text or Paragraph block + link: Type the number, select it, click the link icon, and type tel:+14155551234 in the URL field. Gutenberg accepts tel: links in that field.

Adding it in the Classic Editor

Switch to the Text tab (not Visual). Find where your phone number appears and wrap it in the anchor tag manually. Save and preview to confirm it renders as a link.

If you’re editing HTML directly in WordPress, this method applies across most similar scenarios.

How to Make a Phone Number Clickable in the Header or Footer

The header is probably where this matters most. That’s where visitors look first for contact info, and it’s visible on every page.

How you add the tel: link here depends on your theme and setup. There’s no universal method.

Using the WordPress Customizer

Some themes include a dedicated phone number field in the WordPress Customizer (Appearance > Customize). Themes like Astra, GeneratePress, and OceanWP have this.

The catch: those fields often just output plain text. You’d need to check if the theme wraps the number in an anchor tag automatically. If not, and if the field accepts HTML, paste the full anchor tag directly:

<a href="tel:+14155551234">(415) 555-1234</a>

If the field strips HTML, you’ll need a different approach.

Using a widget in the header or footer

Text widget method:

• Go to Appearance > Widgets
• Find your header or footer widget area
• Add a “Custom HTML” widget
• Paste the anchor tag

This works cleanly on most themes that use widget-based headers and footers.

Editing theme files directly

If your theme doesn’t support widgets in the header, you can edit header.php directly. Always do this inside a child theme. If you edit the parent theme files, your changes get wiped on the next theme update.

Find where the phone number is output in the template, and wrap it:

<a href="tel:+14155551234">+1 (415) 555-1234</a>

If you need to add elements to the WordPress footer, the same child theme logic applies. Edit footer.php inside the child theme, not the parent.

How to Add a Clickable Phone Number Using Page Builders

Page builders handle this differently than raw HTML. Most have URL fields that accept tel: links, but the path to find them varies by tool.

Approximately 59.9% of WordPress sites use a page builder (HTTP Archive, 2025 Web Almanac). Elementor alone accounts for 43% of that builder usage. So this section applies to a large share of WordPress sites.

Elementor

Button widget: Drag in a Button widget. In the Link field, type tel:+14155551234. Done.

Text widget with a linked number: Type the number in a Text widget, select it, click the link icon in the toolbar, enter the tel: link. Elementor accepts it.

One thing Elementor does well here: the Icon Box and Heading widgets both have link fields too. So you can wrap a heading or icon box in a tel: link, which works nicely for stylized contact sections.

Divi

Same approach. In the Button module, the Button URL field accepts tel: links. For a plain text number in a Text module, switch to the text editor mode inside Divi and add the anchor tag manually.

Divi’s inline link editor (the blue link icon) also accepts tel: in the URL field. Select the number text, click the link icon, enter the tel: link. That’s the cleanest method inside Divi’s visual builder.

Beaver Builder and others

Builder	Method	Where to add
Beaver Builder	Button module URL field	Enter tel:+1XXXXXXXXXX directly
WPBakery	Button element link field	Custom link option accepts tel: links
Bricks Builder	Link field on any element	Dynamic or static URL field
Any builder	HTML/Code block	Paste anchor tag directly as fallback

The pattern is consistent: any URL or link field in any page builder will accept a tel: link. If you can’t find a link field, add an HTML block and paste the anchor tag.

How to Make a Phone Number Clickable with a Plugin

For a single phone number, a plugin is usually overkill. But there are cases where one makes sense: you want a floating call button, a site-wide solution, or you don’t want to touch code at all.

WP Call Button

WP Call Button is the most focused plugin for this. It adds a sticky click-to-call button that floats on the screen across all pages. Setup takes under two minutes: install, enter your phone number, configure display settings, done.

It handles the tel: link formatting automatically, so formatting errors aren’t a concern. The button is mobile-only by default, which makes sense since desktop visitors can’t tap-to-call anyway.

Active installations are in the hundreds of thousands. It’s lightweight, doesn’t add database bloat, and does one thing well.

When a plugin makes sense vs. when it doesn’t

Use a plugin when:

• You want a floating call button across every page
• You need call tracking tied to specific campaigns
• Non-technical team members will manage the number

Skip the plugin when:

• You only need one phone link in one location
• Your page builder handles it natively
• You want to avoid adding another plugin to your stack

Nothing wrong with the manual HTML approach for a simple contact page number. Loading a plugin just for a single anchor tag adds unnecessary overhead. Your call, literally.

Other plugins worth knowing

Click to Call: Another lightweight option focused on the call button. Fewer customization options than WP Call Button but works well for basic needs.

WordPress Button Plugin MaxButtons and similar WordPress button plugins can also generate tel: links through a visual interface, though they’re more general-purpose than call-focused tools.

How to Make a Clickable Phone Number in WooCommerce

WooCommerce powers roughly 93.7% of all WordPress e-commerce sites (BuiltWith). Most of those stores collect phone numbers at checkout. None of those numbers are clickable by default.

That’s a different problem than adding a tel: link to a page. WooCommerce outputs phone numbers through its own template system and the billing fields filter. Plain HTML edits won’t touch those.

The checkout phone field

The issue: WooCommerce’s billing phone field collects the number but renders it as plain text in order confirmation emails and admin order views. It does not wrap it in a tel: link.

To make it clickable, you use the woocommerce_billing_fields filter in your child theme’s functions.php. That lets you modify how the field is rendered without touching core WooCommerce files.

Note on WooCommerce versions: If you’re on WooCommerce 8.3 or later, the block-based checkout uses different settings. Go to Pages > Checkout to manage field behavior there, not the Customizer.

Using a child theme override

WooCommerce’s phone number display in order details lives inside its template files. To change the output:

• Copy woocommerce/templates/order/order-details-customer.php into your child theme
• Locate where $order->get_billing_phone() outputs the number
• Wrap it: <a href="tel:<?php echo esc_attr( $order->get_billing_phone() ); ?>"><?php echo esc_html( $order->get_billing_phone() ); ?></a>

This makes the phone number in admin order views clickable so your team can tap-to-call directly from order details on mobile.

Plugin option for WooCommerce phone validation

WooCommerce’s official Phone Number Validation extension (built on the intl-tel-input library by Twilio) handles international formatting and real-time validation at checkout.

What it does: adds a country code dropdown, validates the number format as the customer types, and saves the correctly formatted number to order metadata.

That formatted, validated number is then much cleaner for tel: link output. Messy numbers with mismatched formats are a common reason tel: links fail to dial correctly, so this is a practical pairing.

WooCommerce context	Default behavior	Fix needed
Checkout field	Collects number, no tel: link	Filter or plugin
Admin order view	Plain text number	Template override in child theme
Order confirmation email	Plain text number	Email template override
My Account phone field	Editable field, no tel: link	Custom hook or plugin

How to Track Clicks on a Phone Number in WordPress

A clickable phone number you can’t measure is a conversion you can’t prove. Setting up tracking takes about 15 minutes in Google Tag Manager.

GA4’s built-in enhanced measurement does not automatically track tel: link clicks. You need a custom event. KRM Digital notes that GA4’s internal custom event method for specific link protocols like tel: has become unreliable, making GTM the more dependable route.

Setting up the GTM trigger

This is the part most guides overcomplicate. It’s actually three steps:

• Enable the “Click URL” built-in variable in GTM (Variables > Configure > Clicks)
• Create a “Just Links” trigger set to fire on Some Link Clicks where Click URL starts with tel:
• Create a GA4 Event tag, set your event name (e.g., phone_click), and attach the trigger

Test it in GTM Preview Mode before publishing. Click your phone number and confirm the tag fires in the preview console.

Marking it as a key event in GA4

GTM sends the data. GA4 has to be told it matters.

Go to GA4 Admin > Data Display > Events, find your phone_click event once it starts appearing, and toggle “Mark as key event.” That makes it show up in conversion reports and attribution models.

Useful event parameter to add: pass the {{Click URL}} variable as a parameter named phone_number. If you have multiple numbers on the same site, this tells you which one is generating calls.

Using MonsterInsights as a simpler alternative

GTM is the right tool if you already have it on your site. If not, MonsterInsights handles tel: link tracking without needing a separate GTM setup.

It tracks phone clicks automatically after installation and surfaces the data inside your WordPress dashboard under Reports > Publishers. Less flexible than a custom GTM setup, but usable without touching any tag configuration.

What the data actually tells you

Phone click volume by itself is a surface metric. The useful questions are:

• Which pages drive the most calls? (Contact page vs. home page vs. service pages)
• What traffic source sends callers? (Organic vs. paid vs. direct)
• What device type generates most clicks? (Almost always mobile)

That last one is worth checking. If your desktop users are generating a surprising share of phone clicks, they likely have Skype, FaceTime, or another VoIP app configured. Worth knowing before you decide to hide the number on desktop.

Common Issues with Clickable Phone Numbers in WordPress

Most of the problems come down to the same few mistakes. The tel: link is simple, but there are several ways to break it quietly, with no visible error on the page.

Formatting errors in the href value

The most common issue: spaces, parentheses, or dashes inside the href attribute value.

This breaks on some devices:

<a href="tel:+1 (415) 555-1234">

This works everywhere:

<a href="tel:+14155551234">

The display text can have all the formatting you want. The href value needs to be clean digits with a + and country code. That’s it.

Page builders stripping the tel: prefix

Some page builders sanitize URLs and remove unrecognized protocols. Elementor, in most versions, handles tel: fine. Some older versions of WPBakery and a few other builders used to strip it.

Quick fix: If your link keeps losing the tel: prefix after saving, use a Custom HTML block instead of the builder’s link field. That bypasses the sanitization entirely.

Phone numbers inside images

Took me a while to encounter this one. A designer puts the phone number inside a banner image. Visitors can see it. Nobody can tap it.

The fix is either to overlay an anchor tag on top of the image, or better, move the phone number out of the image into actual HTML text beside or below it.

Desktop behavior surprises

Expected on desktop: tel: links open a VoIP app if one is configured (Skype, FaceTime, Google Voice).

Without a VoIP app: the click does nothing, or the browser shows an error. That’s not a bug in your implementation. That’s just how tel: works on desktop without a handler configured.

Some sites add a CSS rule to prevent the pointer cursor on desktop, setting expectations. Others just leave it, since most visitors on desktop either have VoIP or understand nothing will happen.

How to test properly

Browser dev tools won’t tell you if a tel: link actually dials. You need a real device test.

• Test on iOS Safari, Android Chrome, and at least one desktop browser
• Check the href value in dev tools to confirm it’s exactly tel:+[digits]
• If using a page builder, inspect the rendered HTML, not just the builder’s UI

Also worth checking: if you have a mobile-friendly design system in place, confirm the phone number tap target is at least 44x44px. A link that’s technically correct but too small to tap reliably still creates friction.

FAQ on How To Make A Phone Number Clickable In WordPress

How do I make a phone number clickable in WordPress?

Wrap your number in an anchor tag using the tel: URI scheme: <a href="tel:+14155551234">(415) 555-1234</a>.

In the Block Editor, select the number text, click the link icon, and type your tel: link directly into the URL field.

What is the correct format for a tel: link?

Use the international format: a + sign, the country code, then the digits with no spaces, dashes, or parentheses inside the href value.

The display text can be formatted however you like. Only the href attribute needs to be clean.

Does a clickable phone number work on desktop?

On desktop, tel: links open a configured VoIP app like Skype, FaceTime, or Google Voice. Without one, the click does nothing.

It works universally on mobile. Desktop behavior depends entirely on the visitor’s system setup.

How do I add a click-to-call link in Elementor?

In any Elementor widget with a URL field, type tel:+14155551234 directly. Button, Icon Box, and Heading widgets all accept it.

For plain text numbers in a Text widget, select the number and use the inline link icon to add the tap-to-call link.

How do I make a phone number clickable in the WordPress header?

Add a Custom HTML widget to your header widget area and paste the anchor tag. If your theme uses header.php, edit it inside a child theme to avoid losing changes on updates.

Why is my tel: link not working?

The most common cause is formatting inside the href value. Spaces, dashes, or parentheses break the link on some devices.

Also check that your page builder isn’t stripping the tel: prefix on save. Use a Custom HTML block as a fallback if it is.

How do I make a WooCommerce phone number clickable?

WooCommerce doesn’t add tel: links by default. Use the woocommerce_billing_fields filter in your child theme, or override the order details template to wrap get_billing_phone() in an anchor tag.

Can I track phone number clicks in Google Analytics?

Yes. Use Google Tag Manager to create a “Just Links” trigger firing when Click URL starts with tel:. Connect it to a GA4 event tag and mark it as a key event in GA4.

Do I need a plugin to make a phone number clickable in WordPress?

No. A single HTML anchor tag handles it without any plugin. Plugins like WP Call Button are useful if you want a floating call button site-wide or need non-technical team members to manage the number.

How do I add a clickable phone number to a WordPress menu?

Go to Appearance > Menus, click Custom Links, and enter tel:+14155551234 in the URL field. Add your display text and click Add to Menu.

Block-based themes using the Site Editor use a Navigation block instead. Add a Custom Link there with the same tel: format.

Conclusion

This conclusion is for an article presenting every practical method to add a working call link to a WordPress site, from raw HTML to page builders to WooCommerce.

The approach you pick depends on your setup. A single anchor tag with the telephone URI handles most cases without any plugin.

For site-wide floating buttons, WP Call Button is worth it. For Elementor or Divi, the URL field in any widget takes a tel: link directly.

Don’t skip tracking. A GA4 key event for tap-to-call clicks turns an invisible interaction into measurable data.

Test on a real mobile device before calling it done. That’s the only check that actually matters.