A phone number sitting on a page as plain text is a small, easy-to-miss failure on mobile, a visitor has to select the digits, copy them, switch apps, and paste before they can actually call. A clickable “tel:” link collapses that into one tap. It’s a two-minute fix with a real, measurable effect on contact conversion for any business page, and it’s worth doing properly rather than just pasting a raw link and moving on. This guide covers the actual linking process, the mistakes that quietly break it, and the ways to go further than a bare link once the basics are working.
It’s a small enough fix that it’s easy to assume it doesn’t matter much, but the underlying behavior it changes, whether a genuinely interested visitor completes the contact they intended to make, or gives up somewhere in the manual copy-paste process, sits right at the point where interest turns into an actual lead. Worth treating with the same care as any other conversion-path detail on the site, not as an afterthought.
Why This Matters More Than It Looks Like It Should
Mobile visitors make up the majority of traffic on most WordPress sites at this point, and a phone number is one of the few pieces of content where the difference between “clickable” and “not clickable” translates directly into completed contacts rather than abandoned ones. A visitor on their phone who has to manually dial a number they just read on screen faces enough friction that a meaningful share simply won’t bother, they’ll look elsewhere, or decide the call isn’t worth the extra steps. For a business whose phone line is a primary conversion channel (service businesses, local shops, anyone fielding sales calls), that friction has a real cost that a one-time link setup eliminates permanently.
The reverse is also worth stating plainly: a linked number costs nothing to implement, has no downside for visitors who’d rather note the number down and call later, and only ever removes friction rather than adding it. There’s essentially no scenario where leaving a phone number unlinked is the better choice once this is understood, which makes it one of the rare website changes with a purely positive cost-benefit calculation.
The Correct Format for a Phone Link
A working phone link uses the tel: URI scheme, which mobile operating systems and many desktop apps recognize and handle by offering to place a call. The format is straightforward: tel: followed immediately by the number, with no spaces, dashes, or parentheses inside the number itself, for example, tel:+15551234567 rather than tel:(555) 123-4567. The visible link text can still be formatted however reads best for humans (with parentheses and dashes for readability); it’s only the underlying URL value that needs to be clean digits, and ideally includes the country code with a leading plus sign so the link works correctly regardless of what country a visitor is calling from.
Linking a Phone Number in the Block Editor
- Open the page or post where the phone number appears, and click into the block containing it.
- Select the phone number text by clicking and dragging across it, or double-clicking to select a single word.
- Click the link icon in the inline toolbar that appears above the selected text (it looks like a chain link).
- Type the tel: URL into the field that appears,
tel:followed by the digits only, no spaces or punctuation. - Press Enter or click the submit arrow to apply the link.
- Save or update the page to publish the change.
The block editor’s link field doesn’t always recognize a tel: URL as valid the way it recognizes a normal https:// address, and in some editor versions it may try to autocomplete it as a search term instead. If that happens, typing the full tel: value and pressing Enter directly (rather than clicking a suggestion from the dropdown) usually forces it through correctly.
Linking a Phone Number in the Classic Editor
- Highlight the phone number text in the editor.
- Click the “Insert/edit link” toolbar button (the chain-link icon).
- In the URL field of the dialog box, enter
tel:followed by the digits, with no spaces or dashes. - Optionally, add descriptive text in the “Title” field, this becomes the tooltip shown on hover for desktop visitors.
- Click “Add Link” to apply, then update or publish the page.
Adding a Phone Link Directly in HTML or a Custom Template
For anyone editing a theme template, a widget area, or a custom HTML block directly, the raw markup is simple:
<a href="tel:+15551234567">(555) 123-4567</a>
This pattern is worth knowing even for people who normally work in the block editor, since header phone numbers, footer contact bars, and sticky call buttons are frequently implemented at the theme level rather than through post content, and fixing a non-clickable number in those locations usually means editing a template file or a theme customizer field rather than a post.
Common Mistakes That Quietly Break the Link
Leaving Formatting Characters in the tel: URL
The single most common error is copying the formatted, human-readable number directly into the URL field, dashes, parentheses, and spaces included. Some phones handle this gracefully anyway, silently stripping the extra characters before dialing, but others don’t, and the safest approach is always to strip everything except digits (and a leading plus sign for the country code) from the URL itself, while leaving the visible link text formatted however reads best.
Omitting the Country Code
A tel: link without a country code works fine for visitors dialing from the same country the number is based in, but can fail or dial incorrectly for international visitors, whose phones may not correctly infer the missing country prefix. Including the full international format (a leading + followed by the country code, then the number) makes the link work correctly regardless of where the visitor is calling from, a detail worth the extra few characters for any business with visitors outside a single country.
Linking the Wrong Element
On a page with a phone number embedded inside a larger block of text or a styled component, it’s easy to accidentally select and link an entire paragraph or heading rather than just the number itself, either making unrelated text unexpectedly clickable or failing to link the actual digits a visitor would tap. Double-checking the selection before applying the link, and testing the finished result by clicking it, catches this quickly.
Forgetting Extensions
For a phone number that includes an extension, the tel: URI scheme supports a comma to indicate a pause before dialing the extension automatically (or a semicolon in some implementations), for example tel:+15551234567,123. Support for automatic extension dialing varies somewhat across phone platforms, so testing on both iOS and Android is worth doing if extensions are a regular part of how the business is reached.
Testing the Link Properly
A phone link that looks correct in the desktop editor can still fail on the device that actually matters most, a visitor’s phone. Testing on an actual mobile device (or at minimum, a browser’s mobile emulation mode) confirms the tap target actually triggers the phone’s dialer with the correct number pre-filled, rather than just assuming the markup is correct because it looks right in a preview. This is a thirty-second check that catches formatting mistakes before they reach real visitors, and it’s worth repeating any time the number itself changes, since a stale or mistyped digit is easy to miss on a quick visual scan but immediately obvious the moment a test call comes up wrong.
Going Beyond a Basic Text Link
Click-to-Call Buttons
For high-visibility placements, a header, a hero section, a sticky mobile bar, a styled button rather than plain inline text gives the phone number much stronger visual prominence and a larger, easier tap target than a small piece of linked text. Most page builders and many WordPress themes include a button block or shortcode that can be pointed at a tel: URL exactly the same way as a normal link.
Sticky Mobile Call Bars
Some themes and plugins add a persistent bottom bar on mobile devices with a one-tap call button that stays visible regardless of scroll position, a pattern that consistently performs well for service businesses where a phone call is the primary desired action, since it removes the need for a visitor to scroll back up or hunt for contact information once they’ve decided to reach out.
Tracking Call Clicks
For businesses that want to measure how often a phone link actually gets tapped, adding event tracking (through Google Analytics or a similar tool, typically via a small snippet that fires an event on click) turns a phone link from a static piece of contact information into a measurable conversion point, comparable to tracking a form submission. This is a natural next step once the basic link is working reliably, and it answers a question raw traffic numbers alone can’t: whether the phone number is actually driving contact, not just being displayed.
Accessibility Considerations
A phone link that’s technically clickable can still be a poor experience for a screen reader user if the surrounding markup doesn’t provide context. A link whose visible text is just the raw number (“555-123-4567”) is usually understandable enough on its own, but for a more polished implementation, an aria-label attribute describing the action (“Call our support line”) gives screen reader users clearer context than the raw digits alone, especially when a phone number appears without any surrounding text explaining what it’s for, a bare number in a sidebar widget, for instance, with no heading nearby.
Color contrast and tap target size matter here too, in the same way they matter for any interactive element: a phone link styled in low-contrast gray text, or squeezed into a tap target smaller than roughly 44 by 44 pixels, creates real friction for visitors with low vision or motor impairments, on top of simply being harder for anyone to tap accurately on a moving vehicle or a crowded train, which describes a meaningful share of the moments someone actually needs to make a call from a website.
Related Link Types Worth Setting Up at the Same Time
SMS Links
Alongside tel:, the sms: URI scheme opens the device’s messaging app pre-addressed to a specific number, useful for businesses that accept text-based inquiries: <a href="sms:+15551234567">Text Us</a>. Some implementations support pre-filling message body text as well, using a body= parameter, though support for that particular feature varies more across platforms than the basic address-only version does.
WhatsApp Click-to-Chat Links
For businesses whose customers commonly reach out via WhatsApp, a click-to-chat link (https://wa.me/15551234567, using the number in international format with no plus sign or punctuation) opens a chat with that number directly, working both on mobile with the WhatsApp app installed and on desktop through WhatsApp Web. This is worth setting up alongside a standard phone link for any business whose audience skews toward messaging over calling, which varies significantly by region and industry.
Email Links
The same underlying pattern extends to email with the mailto: scheme (<a href="mailto:hello@example.com">Email Us</a>), and it’s worth applying the same care to email addresses that this guide describes for phone numbers, a plain-text email address forces the same copy-paste friction a plain-text phone number does, for exactly the same reason.
Why Some Number Formats Cause Problems
A few specific formatting habits cause more trouble than they should. Numbers copied directly from a PDF or a scanned business card sometimes carry invisible formatting characters (non-breaking spaces, unusual Unicode dashes) that look like a normal hyphen on screen but aren’t recognized correctly when pasted into a tel: URL, retyping the digits manually, rather than pasting from an unreliable source, avoids this. Numbers stored in a WordPress custom field or theme option that gets reused across multiple locations (header, footer, contact page) should be entered once, in clean international format, and referenced everywhere else, rather than retyped separately in each location, inconsistent formatting across a site is a common source of at least one broken link that nobody notices until a customer mentions it.
Frequently Asked Questions
- Does a tel: link work on desktop computers? It depends on what’s installed, desktop operating systems with a calling app configured (like Skype, FaceTime, or a VOIP client) will often handle the click, while a machine with nothing configured for calls may show an error or do nothing. This isn’t a reason to skip tel: links, since the majority of actual phone-call intent comes from mobile visitors anyway, but it’s worth knowing the desktop behavior isn’t universally reliable.
- Should the visible link text include dashes and parentheses, or just digits? Visible text should stay in the format that’s easiest for a human to read and mentally parse, dashes and parentheses help with that. Only the underlying URL value needs to be clean, unformatted digits.
- Can a single page have multiple different phone links for different departments? Yes, and this is common practice for larger organizations, each number gets its own tel: link with the format described above, no different from linking a single number.
- Will a broken tel: link show any visible error to the site owner? No, a malformed tel: link typically just fails silently on the visitor’s device (nothing happens on tap, or the wrong number gets dialed), which is exactly why manual testing on a real device matters more than trusting the editor’s preview.
Final Thoughts
Linking a phone number correctly is a small task with an outsized effect on how easy a site is to actually contact from a mobile device, which, for most WordPress sites today, is where the majority of visits happen. Getting the tel: format right (clean digits, country code included), testing on a real device rather than trusting the editor preview, and considering a more prominent button or sticky bar for pages where a phone call is the primary goal turns a minor technical detail into a meaningful improvement in how easily visitors can actually reach the business behind the site.
Once the primary number is linked correctly, it’s worth doing a quick site-wide audit rather than assuming a single fix on the contact page covers everything, headers, footers, about pages, and location pages frequently repeat the same phone number, and it’s common to find one or two of those instances were never linked in the first place, quietly costing conversions in places nobody thought to check.