Overriding mobile devices phone number styling

The Problem

If you have a phone number visible in your WordPress website, you may have noticed that on your mobile device, the font color for the number changes, usually to a gray. What is happening here is the your mobile device is treating the number like a clickable link so you can click on it and make a call. This can be annoying if it affects the css styles you have on your site. Sometimes it can even make the number seem invisible.

The Fix

Luckily there is a quick fix for this. Just add the following code into your header.php file found in your WordPress theme.
<meta name=”format-detection” content=”telephone=no”>

You can place it under the other meta tags found in the file, usually towards to top. Don’t forget to make a note of this somewhere, or place the header.php file into a child theme. This way when you update your theme, you’ll still have this saved.