Add IPFS (Or Other) Protocol to a WordPress Site

If you have ever tried to place an IPFS link into a WordPress blog post only to later find that when you click on the link it goes nowhere. If we inspect the link with our browser’s developer tools we can see that a critical part of the URL has been removed. Because WordPress doesn’t recognize the ipfs:// protocol it is promptly removed by WordPress and substituted with an acceptable URL prococol usually http://.

Likewise when writing PHP and using echo or print to output HTML and we need to run href or src through the esc_url() function to sanitize or escape an URL, WordPress again will remove the unrecognized part of the URL and results in breaking the link.

The list of protocols allowed for use in WordPress by default:
http, https, ftp, ftps, mailto, news, irc, ircs, gopher, nntp, feed, telnet, mms, rtsp, sms, svn, tel, fax, xmpp, webcal, urn

If our protocol is not in the list we will need to add it, which is not very difficult to do with just a snippet of code. We could add this to our child theme functions.php file but even better we should add the snippet to our site’s custom plugin which will keep it functional and working even if we later change themes.

Custom code can be added to a child theme if it is affecting how a site looks, but anything that is more than cosmetics should be placed into a plugin

Any function that we would want to persist if we changed themes is better off as a plugin, since this would break our site if we removed it lets place it in our custom plugin.

The filter we need to use is kses_allowed_protocols and we hook our function which we have here named lems_extend_allowed_protocols and passed in the $protocols array variable and add the new protocols that we want to make available in WordPress. We have added the ipfs protocol and also ipns which is the InterPlanetary Naming System and is used with ipfs. You can read more about IPNS here, but basically it is a way to make a content’s hash or CID (In IPFS a CID is a self-describing Multihash which contains the encoding used, in addition to the hash derived from the encoding, as well as some other information. See for more information about CIDs.) immutable i.e. it doesn’t change. It’s used to make a hash that does not change and link it to content that may change. Think for example a website is updated, we don’t want to go change every link that is pointed to the prior CID, we can just change where the IPNS is pointed to the new CID hash and the newly updated website is still accessible through the IPNS link. And for good measure we have also included the lbry protocol for the LBRY blockchain content address lookup these links will usually open in the LBRY Desktop application if it is installed.

 * Extend the list of allowed protocols.
 * @param array $protocols List of default protocols allowed by WordPress.
 * @return array $protocols Updated list including new protocols.
function lems_extend_allowed_protocols( $protocols ){
    $protocols[] = 'ipfs';
    $protocols[] = 'ipns';
    $protocols[] = 'lbry';
    return $protocols;
add_filter( 'kses_allowed_protocols' , 'lems_extend_allowed_protocols' );

place this in your site’s custom plugin file and depending where you are in the file you may need to remove the PHP opening and closing tags.
Note that we have added three protocols to the array of acceptable protocols, we could add as many more as we like. But no need to go overboard adding more protocols than we actually need, now that we know how easy it is we can add more later.

IPNS is the way to make a permanent link to a website or file that later may be updated, if we just use the IPFS CID or hash when the file is updated the hash changes and after the change we would need to update any links that are using the IPFS protocol prefix. By using IPNS and having an immutable or non-changing CID there is not a need to go and update the links we just update the IPFS CID that the IPNS points to. You can read more about how to link an IPNS to an IPFS directory.

Now when we place an IPFS link into a blog post we can know that after clicking link the reader will be directed to the intended content and not a blank screen.


Leave a Reply