How to Make a Clickable Phone Number in WordPress

Learning how to make a clickable phone number in WordPress comes down to one small piece of HTML: the tel: link. Wrap your number in <a href="tel:+15551234567"> and any smartphone that reads the page will offer to dial it with a single tap. Below I’ll walk through every method (block editor, raw HTML, Elementor, headers and menus), plus the formatting details that quietly break call links on iPhone.

The Short Answer: How a tel: Link Works

A clickable phone number is just an anchor tag using the tel: URI scheme instead of https:. The browser hands the number off to the device’s dialer, FaceTime, Skype or whichever app is registered to handle calls.

Here’s the pattern you’ll use everywhere:

<a href="tel:+15551234567">(555) 123-4567</a>
The href holds the machine-readable number: country code, no spaces, no brackets.
The anchor text is what humans read, so format it however looks natural.

The scheme is defined in RFC 3966 and supported by every modern browser, which you can confirm in the MDN documentation for the anchor element. That means no plugin is strictly required, on any theme.

Method 1: The WordPress Block Editor (No Code)

The fastest route for most people is the standard link tool inside a paragraph block. WordPress does not auto-detect phone numbers, so you have to type the prefix yourself.

Type your number as text, for example (555) 123-4567.
Highlight the text and press Ctrl+K (Cmd+K on Mac) to open the link field.
Enter tel:+15551234567 and press the arrow or hit Enter.
Publish, then open the page on a phone and tap the number to confirm the dialer opens.

If the editor tries to turn your entry into a search result or an internal page suggestion, just ignore the dropdown and press Enter. The same trick works for email: use mailto:you@domain.com in the link field.

Method 2: Raw HTML in a Custom HTML Block

When you want a phone number inside a wider layout (a footer notice, a table of branch offices, an announcement bar), the Custom HTML block gives you full control. Add the block, paste your anchor, and click Preview to check it rendered.

A slightly richer version adds accessibility and tracking hooks:

<a href="tel:+15551234567" aria-label="Call our office" class="call-link">Call (555) 123-4567</a>
The aria-label tells screen readers what the link does rather than reading digits aloud awkwardly.
The class lets you style it or fire an analytics event later.

Method 3: A Clickable Phone Number in Elementor

Elementor handles call links in two places, and both accept the same tel: string. For a text link, select the text in a Text Editor widget and use the link icon exactly as you would in the block editor.

For a proper call button, drag in the Button widget and do the following:

Set the button text to something action-led, like Call Now or Call (555) 123-4567.
In the Link field, type tel:+15551234567.
Add the phone icon from the Icon selector so the purpose reads instantly.
Under Advanced, set Responsive visibility if you only want the button on mobile.

An Elementor email link follows the identical logic with mailto:. Divi, Beaver Builder, Bricks and the Site Editor all behave the same way, because they’re each writing a plain anchor tag underneath.

Method 4: Header, Menu and Widget Areas

Most calls come from the header, not the body copy. To add a clickable number to your navigation, go to Appearance > Menus, open Custom Links, put tel:+15551234567 in the URL field and your display number in the Link Text field.

Block themes handle this in the Site Editor: edit the header template part, drop in a paragraph or button block, and link it the same way. If your theme has a built-in “header phone” option, check whether it strips the plus sign, since some older themes do.

Format the Number So iPhone Actually Dials It

This is where most tutorials stop short, and it’s the reason a call link can look fine on Android and fail on iPhone. The href value should be in E.164 format: a plus sign, the country code, then the national number with no spaces, dots, hyphens or parentheses.

Correct: tel:+442071234567 or tel:+15551234567
Risky: tel:555.123.4567 (dots are read inconsistently)
Extensions: use a comma or the p pause character, as in tel:+15551234567,101
Vanity numbers: put the letters in the visible text, the digits in the href

Safari on iOS also auto-detects bare numbers in text and turns them into links, which is why a number sometimes looks clickable without any markup. Don’t rely on it: the detection misfires on prices, dates and order IDs, and it doesn’t happen in Chrome on desktop.

The Gap Most Guides Skip: Desktop, Tracking and Schema

A tap-to-call link on a desktop screen usually triggers an app prompt nobody wants. Two fixes work well, and you can combine them.

Show the link on mobile only using your builder’s responsive visibility controls, and display plain text on desktop.
Leave the link everywhere but add a small “Call” icon, since Windows and macOS users with Teams or FaceTime set up can genuinely place the call.

For measurement, add a click event so you can see how many calls your site is driving. In Google Tag Manager, create a Click trigger where Click URL contains tel:, then fire a GA4 event named phone_click. Traffic data from your hosting analytics dashboard pairs nicely with that number for a full picture.

Finally, put the same number in your LocalBusiness schema under the telephone property. Search engines and AI answer engines cross-check the on-page link against structured data, so keeping both in E.164 format helps your business listing stay consistent.

Common Mistakes That Break Call Links

Missing the tel: prefix, which turns the link into a broken relative URL like /5551234567.
No country code, so international visitors get a dial failure.
Caching or minification plugins mangling inline HTML, worth testing after any optimization change.
Text too small to tap: keep call links at least 44 by 44 pixels of tap area.
Different numbers in the header, footer and Google Business Profile, which erodes local trust signals.

If a link renders correctly in the editor but disappears on the live site, a plugin conflict or an aggressive HTML filter is usually the culprit. Our guide on why WordPress keeps crashing covers the deactivate-and-retest process step by step.

Do You Need a Click-to-Call Plugin?

Plugins like Call Now Button or WP Call Button add a floating sticky bar, scheduling (hide the button outside business hours) and basic click counts. They’re useful for service businesses, though each one adds scripts to every page load.

For a single number in a footer, hand-written HTML is lighter and never breaks on update. If you do install one, run a speed test before and after: on well-optimized business WordPress hosting, a small floating button should add well under 50ms. Sites already running lean setups, from affordable WordPress hosting plans to membership sites, benefit most from skipping the extra plugin.

Frequently Asked Questions

How do I make my phone number clickable?

Wrap the number in an anchor tag using the tel: scheme: <a href="tel:+15551234567">(555) 123-4567</a>. In the WordPress block editor you can skip the code by highlighting the text, pressing Ctrl+K, and typing tel: followed by the digits in E.164 format.

How do I add a phone number to a button in WordPress?

Insert a Button block (or Elementor Button widget) and paste tel:+15551234567 into its link field instead of a page URL. Give the button label an action verb like “Call Now” and add a phone icon, since labelled call buttons typically convert better than a bare number.

How to create a link to a phone number in HTML?

Use <a href="tel:+CountryCodeNumber">Display Text</a> with no spaces or punctuation inside the href. The tel: URI is standardised in RFC 3966 and works in all major browsers, including Safari on iOS and Chrome on Android.

How to make text clickable in WordPress?

Select any text in a block and press Ctrl+K (Cmd+K on Mac) to open the link field, then enter a URL, tel: number or mailto: address. The same shortcut works in the classic editor, and it’s the foundation of good internal linking in WordPress too.

Want a WordPress Site That Loads Before the Call Button Does?

A tap-to-call link only earns you a phone call if the page renders fast enough for someone to see it. Start a 14-day trial with WebVibo and get LiteSpeed caching, a 35-location CDN and WordPress specialists on chat in under two minutes.