Adding A Phone Number Link To Your WordPress Navigation Menu

With smartphones being so ubiquitous now, you often need to add your phone number in a visible location that people can click to dial from their phone. An easy option for doing that is your WordPress navigation bar. As a bonus it’s simple and works with virtually any theme. Here’s what to do:

  1. Go to the Appearance section and select Menus. Look on the left hand side for a section labeled Links and click on it. This area can be used to create custom links.WordPress Custom Link
  2. Now that you’re in the right spot, click on the URL and remove the http:// that WordPress adds there automatically. Replace that with your phone number following this format: tel:+18008425558Adding A Custom Link Phone Number
    The tel:+ lets your phone know that this is a phone number. The portion after the + is the number to be dialed. In this case our number is 1 (800) 842-5558. It’s important that you do not include any punctuation or space here, just the actual numbers. You’ll also need to include any area code or country code as needed.The second spot there is where you place your label. This is the text that your visitors will see on your site. You’re welcome to add punctuation and spaces here too if you’d like to.
  3. Once you have your number and the labeled set, you’ll need to add your custom link to your navigation menu by clicking the “Add to Menu” button. Now your phone number will work like any page, category or other menu item on your site. You can drag and drop it to rearrange the order. I would suggest keeping your phone number last in your list and not as a sub-menu item so it’s easily seen and accessible. Once it’s in place, save your changes.

So once that’s wrapped up you should have a fully clickable phone number in your navigation menu. For visitors using a desktop browser, they won’t be able to call you directly from it, but they can clearly see your number and dial it. Your visitors on a smartphone though will be able to click it and dial you directly from your site.

That’s how to add a phone number to your WordPress navigation menu. If you have any other creative uses for your navigation menu, be sure to share them with us in the comments.

76 Comments

Webztechie May 7, 2021

helpful content. Thanks

Reply

Vijay March 30, 2020

Thanks

Reply

Swadha Singh January 28, 2020

Thanks… it’s really helpful

Reply

Matthew King June 6, 2019

Hi Bill, Great article! Do you know of a way to have the menu button call the number on a mobile device, but link to a page on desktop? (like a contact form etc..)

Cheers Matt

Reply

Emmanuella May 25, 2019

Thumbs up all the way! Been trying to use a widget to accomplish this and bam you gave me the perfect solution!

Reply

Sam January 10, 2019

Thanks! Truly helpful 🙂

Reply

David Glabais August 13, 2018

Works amazing! I’ve been looking a slick way to do this and bingo! Two thumbs up Bill!

Reply

Ajay Sharma May 24, 2018

great you make my day thanks a lot for sharing such amazing information.

Reply

Alphonsus Onyekachi December 16, 2017

Grateful heart! thanks alot for this use tip,my rating=99%

Reply

ChilliVanilla June 9, 2017

Great tip! Thank You 🙂

Reply

arvand tabatabaie May 3, 2017

its really help me, i was confused how to do it, till i found this article
thanks alot

Reply

Jennene Kelly March 28, 2017

Fantastic thanks. Worked a treat 🙂

Reply

Elizabeth Diaz March 28, 2017

Thank you!

Reply

Jason W. Gordon February 13, 2017

Awesome… so simple and powerful. Cheers!

Reply

Edwin November 8, 2016

Hi Bill,

It is indeed a very good trick to have a clickable phone no. on the menu. In my case, the phone no. gets hidden under the menu on phone. Below is the theme that I am working on currently. You cannot even add a text widget on the header. Is there way that I can display clickable phone no. underneath logo?

Reply

    Bill Robbins November 8, 2016

    Most likely you could edit the header.php file and locate the spot for the logo and then add in the number below it. WordPress’ built in editor is in the Appearance section of your dashboard. You might also ask the developer of the theme to help you out with that since they will know its ins and outs best.

    Reply

Greg October 28, 2016

Thanks for that. I look for this all day. Tried various header mods that didn’t work and plug-ins that did nothing. Thanks very much!

Reply

Saranya October 7, 2016

How to give the link, if the number is inside the contact menu.. Like you are saying it is displayed in menu categories only. I’m asking about the number which is inside the page.

Reply

    Bill Robbins October 7, 2016

    For inside the content of a page, it’s the same idea. Create a link and instead of it going to a URL like http://yoursite.com, use tel:+18008425558 where your phone number is 1 (800) 842-5558.

    Reply

John Schuster July 26, 2016

Hi Bill. Thanks for making this article.

I too was having an issue with a popular theme tacking on the http:// breaking the tel link. But as the other commenter “Brad” pointed out you can also use the callto://1######### link.

This worked and the theme did not tack on the http to the callto link.

Reply

Adding a phone number – and phone icon – to WordPress navigation June 21, 2016

[…] Add the phone number in Appearance > Menus. God love WordPress, there is SUPER easy way to do that, but damn I read a LOT of articles before finding this awesome gem from Organized Themes. […]

Reply

Ted May 31, 2016

If you click ‘Save Menu’ in the bottom right, it updates the page and shows it.

Reply

Laura May 11, 2016

I’m using Canvas WooTheme (recent download) and am having problems with it sticking as well. (see http://www.bizresearch.com masthead/header) – wondering if it’s because our masthead header menu bar is black, but if I try to select text to see if something shows up, nothing happens. I have a picture I can send if needed.

Reply

    Bill Robbins May 11, 2016

    Hi Laura, looking at the code it doesn’t appear that the link has been added to the navigation menu. That’s why it isn’t even there as black text on a black background to select. You might double check to see if it was successfully added to the navigation menu.

    There has been a long standing bug in WordPress that can cause menus with more than 16 items to become impossible to save changes. It occurs most often on shared servers and can be hugely frustrating. There’s an article at WP Beginner (http://www.wpbeginner.com/wp-tutorials/how-to-fix-the-custom-menu-items-limit-in-wordpress/) that can show you how to make an adjustment to the server that can help out.

    Reply

Matthew Farrelly April 17, 2016

Thank you for sharing this information. Greatly appreciated.

Regards,

Matt

Reply

Kyle Benoit March 10, 2016

thank you for this article. Could not figure out how to make an older theme have a clickable button but this did the trick.

Thank you!

Reply

DevonPixels February 25, 2016

Fantastic! Thanks for that, so simple 🙂

Reply

Nix December 15, 2015

Hmm…It worked and it didn’t… The ph# displays as a clickable link – however the Skype Icon is missing and once the link is clicked it says “requested content cannot be loaded”…any idea what I might have done wrong? Otherwise this is an awesome little gadget, thanks!

Reply

    Bill Robbins December 15, 2015

    The “requested content cannot be loaded” message is likely from the computer not knowing what to do with a phone number as a link. Most folks don’t have their desktops or laptops set up to place and receive telephone calls so this is likely something that will only benefit users on mobile phones.

    Reply

Rakhibul hasan December 11, 2015

I really appreciate it. Thanks a lot

Reply

Prabhat December 10, 2015

How do i link fax no??Would mean alot if you could help

Reply

    Bill Robbins December 10, 2015

    Great question. No major browsers that I’m aware of support the fax specification so it won’t be possible to make a link that you can click to send a fax. You could place the number in your navigation menu as a link just so that it’s visible though. You’d want the label to be something like:

    Fax: 203-844-2832

    with the URL being just a # so that it doesn’t go anywhere. That way people can easily find the fax number even if they can’t click it like they do a standard phone number.

    Reply

Angela October 5, 2015

How do you use this trick and not get an error: “The address wasn’t understood” on desktop?

Thanks! Angela

Reply

    Bill Robbins October 6, 2015

    Great question. I don’t believe there is anything that can be done on the website’s end to change that. If the visitor’s computer is set up with some type of telephone capability or is at least aware that such capabilities exist, then it may dial the number for you. Otherwise the user may get an error of some type.

    That said, I’m not sure what else they would expect clicking a phone number from their computer.

    Reply

Catarina October 5, 2015

So for the phone number Call menu button to work, I would have to set up another theme for the blog/site?

Reply

    Bill Robbins October 5, 2015

    There is nothing in the WordPress core to keep you from adding a link like that so if it’s not working it’ll be the theme or a plugin that’s causing it. You might could use one of the “mega menu” plugins out there that replace a theme’s menu system with one of their own. That might be a way around it without switching themes.

    Reply

Catarina October 5, 2015

I have entered callto://12032404020 as per suggestion under comments. I have also tried tel:+12032404020 but they don’t stick.

Reply

    Bill Robbins October 5, 2015

    It’s possible that the theme is set to filter out anything other than a traditional URL. Sorry about that.

    Reply

Catarina October 5, 2015

Any thing else sticks, but the phone number. Thank you so much for getting back to me! Any idea?

Reply

    Bill Robbins October 5, 2015

    Would you mind posting exactly what you’re entering as the URL here?

    Reply

Jason Crowther October 4, 2015

Thanks! That worked great!

Reply

Catarina September 30, 2015

I loved to see how easily you can add the phone number to the Menu bar. Only, for me the URL stays blank no matter what I do. Any suggestions what I can do? HELP!

Reply

vinodh September 17, 2015

great(and brilliant) tip. I have never thought about this.
I have a question. when the website is rendered in a mobile device
the navigation link (the one with hyperlinked phone as in your writeup)
will be hidden as one of the dropdown menu.ie due to responsiveness. is there any way to always show on top . any suitable plugin is ok . But I want in the navigation like you gave.

Reply

    Bill Robbins September 17, 2015

    It may be possible to do that. It just depends on how the menu is constructed. Some mobile menus would be simple to do that with. Others replace a traditional menu, which is typically made up of li tags, with a select form. A menu like that would not play nicely with keeping the phone number visible without clicking on the menu link.

    Reply

Bill Robbins May 26, 2015

If you leave a link to your site, I could take a look for you.

Reply

C S May 26, 2015

Thanks for the reply. The phone number is interfering on small screens.

Reply

C S May 25, 2015

Hi there, do you have any tips on keeping a theme responsive after inputting this kind of link?

Reply

    Bill Robbins May 25, 2015

    It really depends on the theme being used. Most will treat this just like any other link in a navigation menu. Is the phone number obscured or interfered with on small screens?

    Reply

souzan April 8, 2015

hi, this is very helpful, however i am not only trying to make one number clickable. it is plenty, i have a store locator tab and for each store there is a number, so i am trying to make these clickable, can you help?

Reply

    Bill Robbins April 8, 2015

    You can add as many numbers as your theme has room for. There’s not a set limit in WordPress for how many links like this you can add. Just repeat the process for the additional numbers and that’ll do it.

    Reply

Kate January 1, 2015

Brilliant tip. Worked like a charm. Thank you so much for sharing that information. x

Reply

MIF September 21, 2014

great tip on how to put phone in custom link, worked like a champ but I also would like to put a link in a different place so mobile users can see it. someone else mentioned that, how do we do that? thanks

Reply

    Bill Robbins September 22, 2014

    The simplest option would be to add the link to a widget area. You could add it in a text widget or with a navigation menu widget. Since most themes are made to show sidebar areas throughout, that would give you lots of visibility for the link and wouldn’t require any editing.

    If you want it outside of a widget area, you can do that too, but it would likely require editing the theme. Exactly how to do that would depend on the theme.

    Reply

David Hodges July 24, 2014

Every time I try to delete the http:// it reappears when I add it to the Menu and then the site wants to link it to a website rather than a phone #. Any suggestions for this problem?

Reply

    Bill Robbins July 24, 2014

    If the http:// is appearing in your navigation bar after you’ve removed it from your custom link, there must be some function that’s either in the theme or plugin that’s adding it back in. It shouldn’t be there if you’ve deleted it. That way you can create links to internal anchors on the same page if you wanted to.

    Reply

Brad June 29, 2014

You can also use the callto://1######### My understanding is that this allows desktop users to use things like Skype to call as well as work for smart phones.

Reply

    Bill Robbins June 30, 2014

    Good to know Brad. Thanks.

    Reply

      Kristian C. March 7, 2017

      Yes, tell:// will trigger an error for desktop/laptop users, while callto:// will work just fine on phones (probably offering for the user to choose and make a phone or Skype call), while it will trigger Skype for desktop/laptop users.

      Cheers

      Reply

Andrew Jones June 23, 2014

Hi Bill,

Thank you for making this post! I need to change the text color of the phone number so that it will stand out from the rest of the nav bar options. I tried the following css with no luck.

.no-hover a:hover {
color: #FF0000;!important;
background: none;
cursor: default;
}

Thank you in advance for any help.
-Andrew

Reply

    Bill Robbins June 23, 2014

    Andrew,

    I’d be glad to take a look for you. What’s the URL to your site?

    Bill

    Reply

Marika Hart May 20, 2014

Hi Bill. Thanks so much for the article. How do I move the phone number so that it is on my front page rather than on the menu. On the smart phone it is only noticeable if you click on menu and then it is at the bottom of the list. I’d love it to be at the top of the front page above the menu if possible. Thanks

Reply

    Bill Robbins May 21, 2014

    Hello Marika,

    Great question. You can typically do that, but the how will depend a bit on the theme being used. Any chance you could post a URL to your site so I can take a look for you?

    Thanks,
    Bill

    Reply

Sumitt Chauhan April 21, 2014

Great article thanks!
Sumit Chauhan

Reply

tom April 8, 2014

Thanks for the tip 🙂

Reply

Charleston Bedding March 7, 2014

That was so easy and another improvement.
Thanks!

Reply

info@gotzu.net March 1, 2014

very nice!

Reply

lester January 15, 2014

that worked like a charm! thank you so much!
it’s the little victories i love the most, especially when it’s due to WP admin functionality allowing me to change a site dynamically within the graphical interface.
it’s one of the many reasons to go with a CMS in the first place.

Reply

    Bill Robbins January 15, 2014

    You’re absolutely right. Anytime you can leverage the CMS for a win like that is fantastic.

    Reply

Submit your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Get all themes with lifetime updates for 95 USD.View All Promotions
+ +