{"id":740,"date":"2015-03-05T09:48:42","date_gmt":"2015-03-05T07:48:42","guid":{"rendered":"https:\/\/urosevic.net\/wordpress\/?p=740"},"modified":"2026-03-10T16:51:10","modified_gmt":"2026-03-10T15:51:10","slug":"store-locator-plus-make-phone-number-clickable","status":"publish","type":"post","link":"https:\/\/urosevic.net\/wordpress\/tips\/store-locator-plus-make-phone-number-clickable\/","title":{"rendered":"Store Locator Plus: Make Phone Number Clickable"},"content":{"rendered":"\n<p><a href=\"https:\/\/wordpress.org\/plugins\/store-locator-le\/\" target=\"_blank\" rel=\"noopener\">Store Locator Plus &#8211; Google Maps<\/a> is a great free plugin for WordPress with enhanced locations and layout functionality.<\/p>\n\n\n\n<p>But, there is a small lack of it &#8211; the phone number for location, displayed in a bubble on the map, is not clickable. So, if you wish to use Skype or other VoIP software on your computer to make a call, you can`t.<\/p>\n\n\n\n<p>Until the author makes this available (I raised the support topic <a href=\"https:\/\/wordpress.org\/support\/topic\/phone-number-in-bubble-as-link\/\" target=\"_blank\" rel=\"noopener nofollow\" title=\"\">Phone number in bubble as link<\/a> a long time ago), you can apply the hack described below to achieve this enhancement.<\/p>\n\n\n\n<!--more-->\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 1: Modify the slp.js wrapper<\/h2>\n\n\n\n<p>First, you must modify the JavaScript wrapper library. That is the JS file located at <strong>\/wp-content\/plugins\/store-locator-le\/js\/slp.js<\/strong><\/p>\n\n\n\n<p>Open this file in an editor, and go to line 1223 (this is related to plugin version\u00a04.2.39), just above the line that contains <code>case 'fullspan'<\/code>, and insert 4 lines of code highlighted below:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>case 'website':\n    prefix = '&lt;a href=\"';\n    suffix = '\" ' +\n    'target=\"' + ((slplus.options.use_same_window === \"on\") ? '_self' : '_blank') + '\" ' +\n    'id=\"slp_marker_website\" ' +\n    'class=\"storelocatorlink\" ' +\n    '&gt;';\n    break;\ncase 'tel':\n    prefix = '&lt;a href=\"tel:';\n    suffix = '\" id=\"slp_marker_phone\" class=\"storelocatorlink\"&gt;';\n    break;\n\ncase 'fullspan':\n    prefix = '&lt;span class=\"results_line location_' + attribute + '\"&gt;';\n    suffix = '&lt;\/span&gt;';\n    break;<\/code><\/pre>\n\n\n\n<p>Save this modified file and you are done with the first step. PasteBin code snippet\u00a0<a href=\"https:\/\/pastebin.com\/iq6fgq4f\" target=\"_blank\" rel=\"noopener\" title=\"[WordPress] Store Locator Plus: Support for phone link\">https:\/\/pastebin.com\/iq6fgq4f<\/a><\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Step 2: Modify bubble syntax<\/h2>\n\n\n\n<p>Now we have support for phones as links, but we still have not used that in bubble. So, now you can use this as:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>proper solution &#8211; custom bubble syntax from plugin settings (this solution requires\u00a0<a href=\"http:\/\/www.charlestonsw.com\/product\/slp4-enhanced-map\/\" target=\"_blank\" rel=\"noopener\" title=\"Open addon page in new window\/tab\">Enhanced Map<\/a> addon &#8211; price 50 USD)<\/li>\n\n\n\n<li>hack solution &#8211; custom bubble syntax modified in plugin core file<\/li>\n<\/ul>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Proper Solution<\/h3>\n\n\n\n<p>So, you have an <strong>Enhanced Map<\/strong> addon. Go in <strong>Dashboard<\/strong> to <strong>Store Locator Plus<\/strong> \u2192\u00a0<strong>User Experience<\/strong>\u00a0\u2192\u00a0<strong>Map<\/strong>\u00a0\u2192\u00a0<strong>Map Features<\/strong>\u00a0\u2192\u00a0<strong>Enhanced Map<\/strong>\u00a0\u2192\u00a0<strong>Buble Layout<\/strong><\/p>\n\n\n\n<p>Now find in HTML code part for the phone number highlighted below<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span id=\"slp_bubble_email\"&gt;&#91;slp_location email         wrap    mailto ]&#91;slp_option label_email ifset email]&#91;html closing_anchor ifset email]&#91;html br ifset email]&lt;\/span&gt;\n&lt;span id=\"slp_bubble_phone\"&gt;&#91;html br ifset phone]\n&lt;span class=\"location_detail_label\"&gt;&#91;slp_option   label_phone   ifset   phone]&lt;\/span&gt;&#91;slp_location phone         suffix    br]&lt;\/span&gt;\n&lt;span id=\"slp_bubble_fax\"&gt;&lt;span class=\"location_detail_label\"&gt;&#91;slp_option   label_fax     ifset   fax  ]&lt;\/span&gt;&#91;slp_location fax           suffix    br]&lt;span&gt;<\/code><\/pre>\n\n\n\n<p>and replace it with the code below<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;span id=\"slp_bubble_email\"&gt;&#91;slp_location email         wrap    mailto ]&#91;slp_option label_email ifset email]&#91;html closing_anchor ifset email]&#91;html br ifset email]&lt;\/span&gt;\n&lt;span id=\"slp_bubble_phone\"&gt;&#91;html br ifset phone]\n&lt;span class=\"location_detail_label\"&gt;&#91;slp_option   label_phone   ifset   phone]&lt;\/span&gt;\n&#91;slp_location phone      wrap    tel]&#91;slp_location phone]&#91;html closing_anchor ifset phone]&#91;html br ifset phone]&lt;\/span&gt;\n&lt;span id=\"slp_bubble_fax\"&gt;&lt;span class=\"location_detail_label\"&gt;&#91;slp_option   label_fax     ifset   fax  ]&lt;\/span&gt;&#91;slp_location fax           suffix    br]&lt;span&gt;<\/code><\/pre>\n\n\n\n<p>And that&#8217;s it. You are done. PasteBin code snippet <a href=\"https:\/\/pastebin.com\/hFagYuSq\" target=\"_blank\" rel=\"noopener\" title=\"[WordPress] Store Locator Plus: Bubble with clickable phone\">https:\/\/pastebin.com\/hFagYuSq<\/a><\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Hack Solution<\/h3>\n\n\n\n<p>So, you don&#8217;t have Enhanced Map, but you wish to\u00a0modify the core file. No problem, it&#8217;s legal (as the plugin is released under GNU GPL3 license).<\/p>\n\n\n\n<p>Open file\u00a0<strong>\/wp-content\/plugins\/store-locator-le\/include\/class.slplus.php<\/strong> in your editor and go to line 186 (this is related to version 4.2.39) and replace part of code for the phone in Bubble HTML syntax (lines 186-187) with the version I provided above (three highlighted lines of second snippet in <em>Proper Solution<\/em> section).<\/p>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Final Result<\/h2>\n\n\n\n<p>Now when you have set the phone number for location, in a bubble you&#8217;ll have a clickable phone number, so visitors can click and call the phone by Skype or other VoIP software directly from a PC\/Laptop or mobile device.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/urosevic.net\/wordpress\/wp-content\/uploads\/2015\/03\/slp-bubble-tel.png\"><img loading=\"lazy\" decoding=\"async\" width=\"620\" height=\"373\" src=\"https:\/\/urosevic.net\/wordpress\/wp-content\/uploads\/2015\/03\/slp-bubble-tel-620x373.png\" alt=\"Store Locator Plus: Clickable phone number in Map Bubble\" class=\"wp-image-744\" srcset=\"https:\/\/urosevic.net\/wordpress\/wp-content\/uploads\/2015\/03\/slp-bubble-tel-620x373.png 620w, https:\/\/urosevic.net\/wordpress\/wp-content\/uploads\/2015\/03\/slp-bubble-tel-1024x617.png 1024w, https:\/\/urosevic.net\/wordpress\/wp-content\/uploads\/2015\/03\/slp-bubble-tel-300x181.png 300w, https:\/\/urosevic.net\/wordpress\/wp-content\/uploads\/2015\/03\/slp-bubble-tel.png 1358w\" sizes=\"auto, (max-width: 620px) 100vw, 620px\" \/><\/a><figcaption class=\"wp-element-caption\">Store Locator Plus: Clickable phone number in Map Bubble<\/figcaption><\/figure>\n\n\n\n<div style=\"height:60px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Disclaimer<\/h2>\n\n\n\n<p>Please note, that modified files (<code>slp.js<\/code> and <code>class.slplus.php<\/code>) will be overwritten on the Store Locator Plus plugin update. So, remember that before you ask me &#8220;where did my fix disappear after the plugin\/website upgrade&#8221; \ud83d\ude09<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Store Locator Plus &#8211; Google Maps is a great free plugin for WordPress with enhanced locations and layout functionality. But, there is a small lack of it &#8211; the phone number for location, displayed in a bubble on the map, is not clickable. So, if you wish to use Skype or other VoIP software on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":745,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[26,22,25,24,14,21,23,27,10],"class_list":["post-740","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tips","tag-clickable-phone-number","tag-enhanced-map","tag-hack","tag-html","tag-javascript","tag-store-locator-plus","tag-sublime-text-3","tag-tel-link","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/posts\/740","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/comments?post=740"}],"version-history":[{"count":8,"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/posts\/740\/revisions"}],"predecessor-version":[{"id":3020,"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/posts\/740\/revisions\/3020"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/media\/745"}],"wp:attachment":[{"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/media?parent=740"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/categories?post=740"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/urosevic.net\/wordpress\/wp-json\/wp\/v2\/tags?post=740"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}