How to Add a Phone Number to Your WordPress Header

A customer finds you on their phone, wants to ring, and has to scroll to the bottom of the page or open a contact page to find the number. Many businesses lose that call without ever knowing it happened. The obvious fix is to put the number at the top of every page, but most themes give you a logo and a menu in the header and no clear box for anything else.

You can add a phone number to your WordPress header in any of the three setups you are likely to have, a block theme, a classic theme or a page-builder header, and the method differs for each. The detail that decides whether the number is any use on a phone is the same everywhere, though: it has to be tappable.

Decide where in the header it belongs

Before opening any editor, pick one of three places. Each looks different and is edited in a different way.

• A thin top bar above the main header. Common for trades, clinics and local shops. It can hold the number, an email address and opening hours without crowding the logo.
• The main header row, next to the menu. Works when the menu is short. The number often sits on the right as plain text or a button.
• A menu item. The number becomes one of the menu links. Quick to set up, but it collapses into the mobile menu on small screens, where it is hidden behind the menu button.

For a business that wants calls, the top bar or the main row is usually better than a menu item, because the number stays visible on a phone. If your header is already full, a top bar is the tidier choice.

Write the number so a phone can dial it

Text that looks like a phone number is not always tappable. Some phone browsers detect numbers on their own and some do not, so do not rely on that. Make it a link that starts with tel: instead.

The link address is tel: followed by a plus sign, your country code and the full number, with no spaces and without the leading zero you would dial locally. A UK number written as 020 7946 0000 becomes tel:+442079460000 in the link. An Indian mobile number becomes tel:+91 followed by the ten digits, again with no spaces. The text visitors see can be formatted however reads best locally; only the link address needs the strict format.

The international format matters if any of your visitors are abroad, or if your site serves more than one country. A number written only in local format can fail when dialled from another country.

Add a phone number to your WordPress header in a block theme

In a block theme (the recent default themes from WordPress are all of this kind), the header is a template part that you change in the Site Editor. If you have not used it before, our guide to templates and template parts in the Site Editor explains what you are looking at and how to undo changes.

1. Go to Appearance → Editor. Open Patterns and find the Header template part (in some versions template parts have their own section). You can also click the header in the site preview and choose to edit it.
2. Open List View (the icon with three horizontal lines, near the top left) so you can see the blocks inside the header: usually a Group or Row holding the site title or logo and a Navigation block.
3. To put the number in the main row, select the Navigation block and add a Paragraph block after it. To make a top bar, select the outer Group and add a new Group or Row block above it.
4. Type the text visitors should see, for example “Call 020 7946 0000”.
5. Select the number, press the link button in the toolbar (or Ctrl+K, Cmd+K on a Mac), type the tel: address and press Enter.
6. Adjust the size and colour in the block settings so it reads clearly against the header background, then press Save.

Some themes include more than one header template part, for example a different one for the home page. Check that every template you use points to the header you just edited. If a Buttons block suits your design better, a Button with a tel: link works the same way and is easier to tap.

Classic themes: look in the theme’s header settings first

Classic themes do not have a Site Editor. The header is built by the theme, and what you can change depends on the options the theme offers. If you are not sure which kind of theme you have, our overview of where the WordPress header and footer live shows how to tell.

1. Go to Appearance → Customize and look for a panel called Header, Header Builder, Top Bar or similar. Many popular themes, Astra and Kadence among them, have a header builder where you can drag in a text or HTML element.
2. If the theme has a top bar or header widget area, you will find it under Appearance → Widgets. GeneratePress, for example, offers a Top Bar widget area. Add a Paragraph block, type the number and link it with tel: as described above.
3. Use the preview on the right of the Customizer to check placement, then publish.

If the theme has neither option, putting the number in the menu is the next simplest route. Changing the theme’s header files directly is the last resort, because an update to the theme replaces those files and your change with them.

Putting the number in the menu instead

Any theme can show a phone number as a menu item. In a classic theme you add it under Appearance → Menus as a Custom Link with the tel: address as the URL and the number as the link text. In a block theme you add a link inside the Navigation block and type the tel: address. The full method, with labels and new-tab settings, is in our guide to adding a custom link to a WordPress menu.

The drawback is the one noted earlier: on a phone, most themes fold the whole menu behind a button, so the number disappears until someone opens the menu. That is the screen size where a visible number matters most.

Headers built in a page builder

If your header was made with Elementor’s Theme Builder or a similar tool, the theme’s own header settings will not affect what visitors see. Open the builder’s header template, add a heading, text or button element, and enter the tel: address in its link field. Builders usually let you hide or show elements per device, so check that the number is not set to hide on mobile, which some header templates do by default to save space.

Test it on a real phone

Do this on your own phone, not only in a desktop preview:

• Open the site in a private or incognito tab so you see the version visitors see, not a cached copy from when you were logged in.
• Tap the number. Your phone should offer to call it, with the full international number filled in.
• Check that it is still visible on the narrowest screen you have, and that it does not push the logo or the menu button onto a second line.
• If nothing changed on the live site, clear your caching plugin and any host cache, then look again.

On a desktop computer, clicking a tel: link may open a calling app or do nothing. That is normal and is not a fault in the link.

Keep the number the same everywhere

The number in your header should match the one on your contact page, in the footer, on your Google Business Profile and in any business directories. When they differ, a caller does not know which one to trust, and search engines get conflicting details about the same business. If you are changing numbers, update all of them in the same week. The twice-yearly read-through of your main pages in our beginner’s guide to running WordPress is a good moment to check the number in every place. Our guide to keeping your name, address and phone consistent walks through where those details live and in what order to fix them.

If you also want a WhatsApp button or a sticky call bar on mobile, that is a separate decision with its own trade-offs, covered in where click-to-call and WhatsApp buttons help.

Mistakes that make the number less useful

• Putting the number in an image. It cannot be tapped, copied or read by screen readers, and it does not scale well. Use text.
• A tel: link with spaces or the local zero. It may work for you and fail for someone else. Use the plus sign and country code.
• Tiny text. A number in a small grey font in the corner is easy to miss and hard to tap. Give it enough size and contrast to stand out.
• Different numbers in different places. Updating the header but forgetting the footer or a widget leaves an old number live. Search the site for the old number after a change.
• Editing theme files. The next theme update undoes it. Use the editor, the Customizer or a widget area.

Frequently asked questions

Should I show a mobile number or a landline in the header?

Show the number that is answered most reliably during your opening hours. If calls go to a landline that nobody picks up after lunch, a mobile may serve customers better. Whichever you choose, use the same number on your Google Business Profile and in your footer so customers are not given two different ways to reach you.

Can I show two phone numbers in the header?

You can, for example one for sales and one for support, but each extra number takes space and adds a choice the caller has to make. On phones two numbers often wrap onto a second line. If you need both, label each clearly and consider keeping only the main one in the header and the second on the contact page.

Can I add a phone icon next to the number?

Some themes and header builders include an icon option alongside text elements, and icon block plugins can add one in a block theme. An icon is optional. The word Call before the number does the same job, is read correctly by screen readers and does not depend on an icon font loading.

Will a phone number in the header help my local search rankings?

It will not rank the site on its own. What it does is make your contact details easy to find and consistent with your business listings, which helps customers and avoids sending mixed signals. Local visibility depends far more on your Google Business Profile and the quality of your pages.

Getting a number into a stubborn header, such as a custom theme with no setting for it, is fiddly rather than hard. Our WordPress support team can add it for you, test it on phones and put it somewhere a theme update will not overwrite.

Next in this series: WordPress Site Editor: Templates and Template Parts