Store Locator Plus: Make Phone Number Clickable

Store Locator Plus – Google Maps is a great free plugin for WordPress with enhanced locations and layouts functionality.

But, there is a small lack of it – phone number for location, displayed in bubble on map, has not clickable. So, if you wish to use Skype or other VoIP software on your computer to make a call, you can`t.

Until author make this available (I raised support topic Phone number in bubble as link long time ago), you can apply hack described below to achieve this enhancement.

Step 1: Modify slp.js wrapper

First you must modify JavaScript wrapper library. That is JS file located at /wp-content/plugins/store-locator-le/js/slp.js

Open this file in editor, and go to line 1223 (this is related to plugin version 4.2.39), just above line that contains case 'fullspan', and insert 4 lines of code highlighted below:

Save this modified file and you are done with first step. PasteBin code snippet https://pastebin.com/iq6fgq4f

Step 2: Modify bubble syntax

Now we have support for phone as link, but we still did not used that in bubble. So, now you can use this as:

  • proper solution – custom bubble syntax from plugin settings (this solution requires Enhanced Map addon – price 50 USD)
  • hack solution – custom bubble syntax modified in plugin core file

Proper Solution

So, you have Enhanced Map addon. Go in Dashboard to Store Locator Plus → User Experience → Map → Map Features → Enhanced Map → Buble Layout

Now find in HTML code part for phone number highlighted below

and replace it with part of code highlighted below

And that’s it. You are done. PasteBin code snippet https://pastebin.com/hFagYuSq

Hack Solution

So, you don’t have Enhanced Map, but you wish to modify core file. No problem, it’s legal (as plugin is released under GNU GPL3 license).

Open file /wp-content/plugins/store-locator-le/include/class.slplus.php in your editor and go to line 186 (this is related to version 4.2.39) and replace part of code for phone in Bubble HTML syntax (line 186-187) with version I provided above (three highlighted lines of second snippet in Proper Solution section).

Final Result

Now when you have set phone number for location, in bubble you’ll have clickable phone number, so visitor can click and call phone by skype or other VoIP software directly from PC/Laptop or mobile device.

Store Locator Plus: Clickable phone number in Map Bubble
Store Locator Plus: Clickable phone number in Map Bubble

Disclaimer

Please note, modified files (slp.js and class.slplus.php) will be overwritten on Store Locator plus plugin update. So, remember that before you ask me “where my fix disappeared after plugin/website upgrade” 😉

How To Add Custom Colours To TinyMCE 4 in WordPress 3.9+

TinyMCE 4 in WordPress 3.9 break old customization for adding custom colours, so here we have a tip about how to convert old code to new format supported in TinyMCE 4

WordPress 3.9 brings up latest TinyMCE 4 rich text editor as grat speed improvement, but this update break a lot of TinyMCE plugins (advanced image, advanced link, etc), including various handy customizations for TinyMCE editor in WP-way.

One of them are custom colour swatches. Until 3.9 we simply put following code to functions.php and got our own colours in editor:

Convert TinyMCE option for custom colour swatches to version 4

This solution will not work in WP 3.9, so we need to replace it with working solution below (to be clear, format of colours array is changed, along to TinyMCE option name):

As you can see, option is changed from theme_advanced_text_colors to textcolor_map, and simple array of HEX codes separated by commas, now is changed to JavaScript array that threat elements as pairs of HEX colour value and colour nice name. All is wrapped to brackets.

Change number of colour swatches

Please note, my default TinyMCE 4 have limit up to 40 colour swatches (80 array elements) distributed in 5×8 grid (ROWSxCOLS). So, to append custom colours after default colours, we need to increase number of rows displayed on swatches popup.

To achieve this, we use textcolor_rows parameter.

We even can change grid layout and alter default 5×8 with, for example, 4×10 by setting parameters below:

Please note, this is just example. You can play with layout and colour set as you wish.

How To Add ‘More Colors’ Functionality?

TinyMCE 4 drop support for ‘More Colors’ option, but now there is WordPress plugin TinyMCE Color Picker that brings back this functionality to WordPress 3.9+

Did this tips helped you?

If you found this tips useful, feel free to 

A question posed to StakOverflow encouraged me to explain how this problem can be resolved quickly and easily.