How to embed Bandcamp shortcodes in a self hosted WordPress site (without Jetpack)

Having just developed a new site for Jackson Williams band, it wasn’t long before an issue arose that needed to be looked into and figured out.

Being a band, they release music through Bandcamp, which offers convenient little media players that you can embed in sites.

Whilst I am the admin for the site, the band member who creates all of the content is set up as an Editor.

He had noticed that when he was trying to copy and paste the iframe code into a custom html block, the iframe tags were being stripped away, leaving just a plain text link.

I quickly realised that Editors do not have the permission to post “unfiltered html”, but this can be enabled for Editors, through the addition of a php function, or even a plugin, but I’m not sharing details here as this could be a severe security risk. Go Google that if you think you really need it.

This limitation is there for a good reason, so I felt this was NOT the way to proceed.

Enabling Bandcamp shortcodes in WordPress

If you look at the list of services that appears under the “Embeds” blocks, there are lots. But Bandcamp isn’t one of them.

When you create an embed code within Bandcamp, it asks you whether you want the html version or a shortcode version, for “WordPress.com”.

So if you are using a WordPress.com site, you’d be good to go. But for self-hosted WordPress sites, this will not work and you’ll just be left with a naked shortcode visible in your post, instead of the embedded content.

Apparently, the installation of Jetpack solves this issue. But, what if you really don’t want to install Jetpack? You can find dozens of articles on the web detailing a multitude of reasons NOT to install Jetpack.

Fortunately, there is a way to easily add this functionality to WordPress via a simple piece of code, without installing something large like Jetpack, which contains far more functionality that you probably need, possibly creating duplication with other plugins you may be running and almost certainly slowing your site down.

The PHP code is available via Github

How to install this function (PHP code) into your WordPress site

If you’ve never done something like this before, it can seem daunting. You may have read about editing your functions.php file (which can break your site if you get it wrong) and you may not even know how to access your server via FTP, and therefore might not have good habits around taking backups prior to editing, so that you can quickly reinstate files if something goes wrong.

Do not worry about any of the above!

We are going to use the Code Snippets plugin instead, which has many advantages, and is far more convenient for non techie types.

Code Snippets plugin

Install the Code Snippets plugin from the WordPress plugin repo.

Once activated, you’ll have a new Snippets section to play with.

Create a new Snippet, and give it a name that reflects the purpose or function of the snippet you’re adding. Copy and paste the code into the snippet window, but note that the editor already contains the opening <php tag, so if you’re copying from github, don’t duplicate this opening php tag.

Click Save and Activate.

You can also choose where the snippet should run – everywhere, front-end only, back-end only, etc. If in doubt, experiment, and check that the function works in places where you need it to.

With this snippet in place, and activated, you can simply add your Bandcamp embed code, choosing to embed the “WordPress.com” version rather than the html version.

The WordPress,.com version will look like a shortcode, enclosed by square brackets, like this:

[bandcamp width=350 height=470 album=525287963 size=large bgcol=ffffff linkcol=0687f5 tracklist=false]

As long as you have the code snippet active on the front end, it will appear correctly.