Quick Tip: How to add a Skype URI Link to your WordPress Menu

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.

4 thoughts on “Quick Tip: How to add a Skype URI Link to your WordPress Menu

  1. Just got a different solution, just go to wp-includes/functions.php find line:
    $protocols = array( ‘http’, ‘https’, ‘ftp’, ‘ftps’, ‘mailto’, ‘news’, ‘irc’, ‘gopher’, ‘nntp’, ‘feed’, ‘telnet’, ‘mms’, ‘rtsp’, ‘svn’, ‘tel’, ‘fax’, ‘xmpp’);
    and add “skype” to the list.

    • Hi Darius,

      That’s exactly what this solution does, but without editing the WordPress Core files.

      You should never edit the WordPress core – doing so is considered very bad practice in general. The main reason to avoid this is that if you update WordPress (which can happen automatically now), your changes will be overwritten, so you’ll have to keep recreating them.

      Using the technique described in this article is much more maintainable and will save you a lot of headaches down the road 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *