Overview
Skype URIs provide the ability to insert links into your website which will launch the Skype app when clicked.
You might think that adding a Skype link to your WordPress site’s menu would be a nice idea, but when you go to save your custom URL, you’ll notice that the URL is stripped by the WordPress menu system and you’re left with an anchor tag with no href attribute.
This happens because WordPress rejects URLs whose protocols aren’t whitelisted. By default, the following protocols are whitelisted and can therefore be added to custom URLS in your menu:
- http
- https
- ftp
- ftps
- mailto
- news
- irc
- gopher
- nntp
- feed
- telnet
The solution is therefore to add the skype protocol to the whitelist.
Tracking the issue
There isn’t much documentation for custom menu item (Link) URLs, so when you try to save it silently fails and there is no indication as to why the URL won’t save properly.
By digging through the core code, I found that the menu item settings are validated and saved in the wp_update_nav_menu_item function located in wp-includes/nav-menu.php. This function calls esc_url_raw() on the submitted menu item URL prior to saving the updated value.
The esc_url_raw function can take a list of protocols as a parameter, however at this point there is no hook with which we could add our custom protocol without editing the core file – therefore we continue to dig for a customization point. The esc_url_raw function calls the esc_url function in wp-includes/formatting.php, which checks that the protocol of the URL is present in the array of whitelisted protocols returned by wp_allowed_protocols.
Thankfully, the wp_allowed_protocols function, defined in wp-includes/functions.php, provides a filter kses_allowed_protocols, which is the key to adding our Skype protocol to the whitelist.
The solution
Once we track down the appropriate filter, the solution is actually quite simple. We filter the $protocol array and add the Skype protocol:
function ss_allow_skype_protocol( $protocols ){
$protocols[] = 'skype';
return $protocols;
}
add_filter( 'kses_allowed_protocols' , 'ss_allow_skype_protocol' );
This code would be well placed in a child theme’s functions.php
After adding this code to your installation, you should be able to save Skype URIs like skype:username?call by creating a new Custom Menu Item (Link) in your menu and adding the Skype URI as your custom URL:
The same method should work with any other custom protocols.
