A clickable phone number removes the need for visitors to copy your number, open their phone application, and enter it manually. It is especially useful on contact pages, service pages, landing pages, headers, and mobile call-to-action sections.
You do not need a plugin for a normal text link or call button. WordPress recognises phone links that use the tel: URL format through its standard link control.
How a Clickable Phone Number Works
A telephone link has two separate parts:
- Visible text: The number or call-to-action visitors see
- Link destination: The telephone URL that starts with
tel:
For example, visitors might see +1 (555) 123-4567, while the underlying link is tel:+15551234567.
<a href="tel:+15551234567">+1 (555) 123-4567</a>On a smartphone, tapping the link normally opens the telephone dialler with the number entered. On a desktop computer, it may open FaceTime, Skype, another calling application, or a browser prompt, depending on the device configuration.
Method 1: Make Phone Number Text Clickable in Gutenberg
This is the easiest method for adding a clickable number to a WordPress post, page, contact section, or footer built with blocks.
- Open the WordPress page or post containing your phone number.
- Add a Paragraph block or select an existing paragraph.
- Type the number as you want visitors to see it.
- Highlight the complete phone number.
- Select the Link icon in the block toolbar. You can also press
Ctrl+Kon Windows orCommand+Kon macOS. - Enter
tel:followed by the complete phone number. For example, usetel:+15551234567. - Press Enter or select the apply-link button.
- Select Update or Publish.
- Open the live page on a phone and test the number.
WordPress officially lists tel:+123456789 as a supported phone-link format. Its link control can be used with selected text, buttons, images, and other supported block content.
Method 2: Add a Call Button in WordPress Without a Plugin
The native Buttons block lets you create a more visible call-to-action without adding a call-button plugin. WordPress allows you to edit the button text, link, colour, typography, padding, border, and width through the block settings.
- Edit the page or post where the call button should appear.
- Select the Block Inserter and search for Buttons.
- Add the Buttons block.
- Enter a clear label such as Call Us, Call for Support, or Call +1 (555) 123-4567.
- Select the individual Button block.
- Choose the Link option in the toolbar.
- Enter
tel:+15551234567, replacing the example with your business number. - Press Enter to apply the link.
- Adjust the button’s colours, padding, border, and width if required.
- Update the page and test the button on a phone.
Leave the option to open the link in a new tab disabled. A telephone link is an action rather than a webpage, so opening an additional browser tab provides no practical benefit.
Method 3: Add a Clickable Number to the Header or Navigation
A site-wide phone link works well for businesses that rely on bookings, quotes, emergency enquiries, consultations, or telephone support.
Add It With a Block Theme
Block themes use the Site Editor and Navigation block. WordPress provides menu management under Appearance → Editor → Navigation when a compatible block theme is active.
- Open Appearance → Editor.
- Select Navigation, or open the Header template part containing your Navigation block.
- Select the Navigation block.
- Add a Custom Link block.
- Enter
tel:+15551234567in the URL field. - Enter a label such as Call Us or the visible phone number.
- Save the navigation and template changes.
- Check the header on desktop and mobile views.
The Custom Link block supports a custom URL and label inside the Navigation block.
Read Also: Technical SEO for WordPress Websites Explained Simply
Add It With a Classic Theme
- Open Appearance → Menus.
- Expand the Custom Links section.
- Enter
tel:+15551234567in the URL field. - Enter the visible label in the Link Text field.
- Select Add to Menu.
- Move the link to the desired position.
- Save the menu and test it.
The older Menus screen is generally associated with classic themes, while block themes use the Site Editor and Navigation block.
How to Add a Call Button in WordPress Elementor
Elementor allows you to place a telephone link in any widget that provides a Link field, including its Button widget.
Use a Manual Elementor Telephone Link
- Edit the page with Elementor.
- Select or add a Button, Text Editor, Icon, or another linkable widget.
- Enter the visible button or link text.
- Find the widget’s Link field.
- Enter
tel:+15551234567. - Update the page.
- Test the live link on a mobile device.
Elementor recommends entering tel: followed by the complete number without dashes or other symbols in the actual link field.
Use Elementor Pro Dynamic Contact URL
Elementor Pro users can use the Dynamic Contact URL feature instead of manually entering the link.
- Select a widget containing a Link field.
- Select the Dynamic Tags option beside the Link field.
- Choose Contact URL.
- Open the Contact URL settings.
- Select Tel as the contact method.
- Enter the complete international number.
- Update and test the page.
Elementor’s official documentation lists telephone, SMS, WhatsApp, Skype, Messenger, and other contact actions within Dynamic Contact URL. It recommends using the full international number without brackets or dashes.
You may also like: Free Online Bulk Barcode Generator
How to Add a Phone Link With HTML
Raw HTML is useful when you are editing a template, code snippet, or area where the normal WordPress link control is unavailable.
<a href="tel:+15551234567">Call +1 (555) 123-4567</a>Replace both example numbers with your own. Keep the `href` value compact, but format the visible text in a readable way.
You can also use descriptive text instead of displaying the number:
<a href="tel:+15551234567">Call our support team</a>The native Gutenberg link control is preferable for ordinary page content because it is easier to edit and does not require a Custom HTML block.
Use the Correct Phone Number Format
Use the full international format in the link whenever people from more than one country may visit your website.
| Purpose | Recommended example |
|---|---|
| Link destination | tel:+15551234567 |
| Visible US number | +1 (555) 123-4567 |
| Button text | Call +1 (555) 123-4567 |
| Descriptive link | Call our support team |
The plus sign and country code make the destination clearer for international devices and users. WordPress’s documented example also uses a plus sign in the telephone URL.
Best Practices for WordPress Click-to-Call Links
- Use your complete business number in the destination.
- Keep the visible number readable with spaces or brackets where appropriate.
- Use descriptive wording such as Call customer support.
- Include the visible number when visitors may need to copy it.
- Place the number where users naturally expect contact information.
- Use sufficient colour contrast for a call button.
- Make the button large enough to tap comfortably on a phone.
- Do not hide essential contact details behind an icon alone.
- Do not enable “Open in new tab” for a telephone action.
- Test every link after changing the number or redesigning the page.
Read Also: How Hackers Attack WordPress Sites: Explained Simply
How to Test a Clickable Phone Number
- Open the published page on a smartphone.
- Tap the linked number or button.
- Confirm that the correct number appears in the dialler.
- Cancel instead of placing the call if you are only testing.
- Check the same link on a desktop computer.
- Confirm that the number remains visible even if no desktop calling application is configured.
- Test the header and footer in the mobile navigation view.
- Check that the link colour remains readable.
Troubleshoot a WordPress Call Link That Is Not Working
Use this table to identify the most likely cause of a broken or incorrect telephone link.
| Problem | Likely cause | Recommended solution |
|---|---|---|
| The number is ordinary text | No link was applied | Select the number and add a tel: destination |
| WordPress rejects the URL | The URL format is incomplete | Use a format such as tel:+15551234567 |
| A webpage opens | The destination starts with http | Replace it with tel: |
| The wrong number appears | The linked number differs from the visible text | Edit the link and verify every digit |
| The button is not clickable | The link was added to surrounding text instead of the button | Select the individual Button block and add the link there |
| The menu link is missing | The navigation or template was not saved | Save the Navigation block, menu, and template changes |
| The Site Editor is unavailable | The site uses a classic theme | Look for Appearance → Menus or the theme’s header settings |
| The link behaves differently on desktop | No desktop calling application is configured | Test on a phone; desktop behaviour depends on available software |
| Elementor opens the wrong destination | The Link field contains an ordinary URL | Enter the full tel: link or use Dynamic Contact URL |
Most problems come from an incorrect destination rather than WordPress itself. Check the link value first, then verify the published page instead of relying only on the editor preview.
Frequently Asked Questions
Use tel: followed by the complete phone number. A reliable example is tel:+15551234567. The visible text can still be formatted as +1 (555) 123-4567. WordPress officially recognises telephone URLs using this format.
Yes. Add the native Buttons block, enter the button label, and assign a tel: link through the Button block’s link control. The native block also lets you adjust colours, typography, padding, width, and borders.
Add or select an Elementor Button widget, then enter a telephone link such as tel:+15551234567 in its Link field. Elementor Pro users can instead select Dynamic Tags, choose Contact URL, and set the contact method to Tel.
Keep the actual link destination simple and use the complete international number without spaces, brackets, or dashes. You can use spaces and familiar punctuation in the visible text to make the number easier for people to read.
Desktop behaviour depends on whether the computer has a compatible calling application configured. A phone link may open FaceTime, Skype, or another application, display a prompt, or appear to do nothing. Test the link on a smartphone before deciding that it is broken.
Yes. With a block theme, edit the Navigation block or Header template part through the Site Editor and add a Custom Link using a tel: URL. With a classic theme, use Appearance → Menus when that screen is available.
No. Leave the new-tab setting disabled. A telephone URL launches a device action rather than sending the visitor to another webpage, so an extra browser tab is unnecessary.
Make It Easy for Visitors to Call You
The simplest way to make a phone number clickable in WordPress is to link the visible number to a destination such as tel:+15551234567. This works with Paragraph blocks, native Buttons blocks, navigation links, HTML, and Elementor widgets.
Use the full international number in the link, keep the visible text readable, and test the published result on a real phone. You usually do not need a plugin unless you require a floating button, advanced display rules, or specialised call tracking.
Continue with a related VWS Online guide about creating effective WordPress contact pages and mobile-friendly calls to action.
