{"id":15313,"date":"2025-10-03T03:23:21","date_gmt":"2025-10-03T03:23:21","guid":{"rendered":"https:\/\/www.kadencewp.com\/help-center\/?post_type=docs&#038;p=15313"},"modified":"2025-10-07T23:44:12","modified_gmt":"2025-10-07T23:44:12","password":"","slug":"fixing-phone-numbers-automatically-linking-or-disappearing-on-ios-safari","status":"publish","type":"docs","link":"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-general\/fixing-phone-numbers-automatically-linking-or-disappearing-on-ios-safari\/","title":{"rendered":"Fixing Phone Numbers Automatically Linking or Disappearing on iOS Safari"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p>If you\u2019ve added a phone number to your site (for example, in the footer, header, or a widget) and it appears fine in the WordPress Customizer but looks <strong>invisible or styled incorrectly on mobile<\/strong>, this is likely caused by Safari\u2019s <strong>telephone number detection<\/strong> feature.<\/p>\n\n\n\n<p>On iOS devices, Safari automatically converts any text that looks like a phone number into a clickable telephone link. Depending on your site\u2019s styling, this can result in:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Phone numbers appearing in the <strong>wrong color<\/strong> (such as orange).<\/li>\n\n\n\n<li>Phone numbers becoming <strong>invisible on mobile<\/strong> until clicked.<\/li>\n\n\n\n<li>Phone numbers not matching the text style you set in the editor.<\/li>\n<\/ul>\n\n\n\n<p>This guide shows you how to disable Safari\u2019s automatic linking or adjust the link styling so the number displays as expected.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">How This Issue Might Look to You<\/h2>\n\n\n\n<p>Customers often describe this issue in different ways, such as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>\u201cThe phone number in my footer looks fine in the editor, but it disappears on mobile.\u201d<\/em><\/li>\n\n\n\n<li><em>\u201cThe phone number only shows up when I tap the spot on my phone.\u201d<\/em><\/li>\n\n\n\n<li><em>\u201cMy phone number text color is wrong.\u201d<\/em><\/li>\n\n\n\n<li><em>\u201cSafari is automatically turning my phone number into a link.\u201d<\/em><\/li>\n<\/ul>\n\n\n\n<p>If your experience sounds similar, this guide will help you fix it.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Option 1: Disable Safari\u2019s Telephone Number Detection<\/h2>\n\n\n\n<p>If you want the phone number to always display exactly as you entered it (without Safari turning it into a link), you can disable this feature by adding a meta tag.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;head&gt;\n  &lt;meta name=\"format-detection\" content=\"telephone=no\" \/&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>If you are using Kadence Theme Pro:<\/strong>\n<ol class=\"wp-block-list\">\n<li>Go to your WordPress dashboard.<\/li>\n\n\n\n<li>Navigate to <strong>Appearance &gt; Customize &gt; Custom Scripts<\/strong>.<\/li>\n\n\n\n<li>Add the code snippet into the header section<\/li>\n\n\n\n<li>Save and publish your changes.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n<style>.kb-image15313_3bad2b-ed .kb-image-has-overlay:after{opacity:0.3;}<\/style>\n<figure class=\"wp-block-kadence-image kb-image15313_3bad2b-ed size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"488\" height=\"673\" src=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/10\/Customize-teejay-2025-10-08-at-7.42.59-AM.jpg\" alt=\"\" class=\"kb-img wp-image-15417\" srcset=\"https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/10\/Customize-teejay-2025-10-08-at-7.42.59-AM.jpg 488w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/10\/Customize-teejay-2025-10-08-at-7.42.59-AM-218x300.jpg 218w, https:\/\/www.kadencewp.com\/help-center\/wp-content\/uploads\/sites\/14\/2025\/10\/Customize-teejay-2025-10-08-at-7.42.59-AM-360x496.jpg 360w\" sizes=\"auto, (max-width: 488px) 100vw, 488px\" \/><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>If you are not using Kadence Theme Pro:<\/strong><br>You can achieve the same result by adding the code with a plugin such as <a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-theme\/how-to-add-a-custom-filter-or-function-with-code-snippets\/\">Code Snippets<\/a>. These plugins allow you to safely insert header scripts without editing theme files.\n<ul class=\"wp-block-list\">\n<li>Try adding this code:<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"\">&lt;?php\n\/\/ Disable Safari from automatically linking phone numbers\nadd_action( 'wp_head', function() {\n    echo '&lt;meta name=\"format-detection\" content=\"telephone=no\" \/&gt;' . \"\\n\";\n});<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Option 2: Keep the Feature but Adjust the Styling<\/h2>\n\n\n\n<p>If you want to keep the phone number clickable on iOS but fix the styling (so it isn\u2019t invisible or the wrong color), you can set a custom <strong>link color<\/strong>.<\/p>\n\n\n\n<p>For example, if you are using the <strong><a href=\"https:\/\/www.kadencewp.com\/help-center\/docs\/kadence-blocks\/advanced-heading-block\">Advanced Text block<\/a><\/strong> (or any block that allows customizing link colors):<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Select the block containing the phone number.<\/li>\n\n\n\n<li>Open the block settings.<\/li>\n\n\n\n<li>Define your preferred <strong>link color<\/strong>.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<p>Safari will continue to link the number, but it will follow the styling you set.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Use <strong>Option 1<\/strong> if you want to stop Safari from auto-linking phone numbers.<\/li>\n\n\n\n<li>Use <strong>Option 2<\/strong> if you want to keep the phone number clickable but control the color and visibility.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Overview If you\u2019ve added a phone number to your site (for example, in the footer, header, or a widget) and it appears fine in the WordPress Customizer but looks invisible or styled incorrectly on mobile, this is likely caused by Safari\u2019s telephone number detection feature. On iOS devices, Safari automatically converts any text that looks&#8230;<\/p>\n","protected":false},"author":130753,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"doc_category":[],"doc_tag":[],"knowledge_base":[5],"class_list":["post-15313","docs","type-docs","status-publish","hentry","knowledge_base-kadence-general"],"year_month":"2026-04","word_count":478,"total_views":"1124","reactions":{"happy":"2","normal":"0","sad":"0"},"author_info":{"display_name":"teejayhidalgo","author_link":"https:\/\/www.kadencewp.com\/help-center\/author\/teejayhidalgo\/"},"doc_category_info":[],"doc_tag_info":[],"knowledge_base_info":[{"term_name":"Kadence General","term_url":"https:\/\/www.kadencewp.com\/help-center\/knowledge-base\/kadence-general\/","term_slug":"kadence-general"}],"knowledge_base_slug":["kadence-general"],"taxonomy_info":{"knowledge_base":[{"value":5,"label":"Kadence General"}]},"featured_image_src_large":false,"comment_info":0,"_links":{"self":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/15313","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/users\/130753"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/comments?post=15313"}],"version-history":[{"count":5,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/15313\/revisions"}],"predecessor-version":[{"id":15418,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/docs\/15313\/revisions\/15418"}],"wp:attachment":[{"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/media?parent=15313"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_category?post=15313"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/doc_tag?post=15313"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/www.kadencewp.com\/help-center\/wp-json\/wp\/v2\/knowledge_base?post=15313"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}