Update // 2021.03.19:

Just saw this post:

bandcamp embed code not working — Apparently, the official method of adding Bandcamp support is to install the Jetpack plugin. 😬 If you’re already using it for other stuff, I’m sure it’s a great way to go. But I don’t want to install Jetpack just for that one embed code. Bleh. I’ll take my homebrewed method any day, thanks!

Update // 2021.04.10

Lighthouse yelled at me for not adding a title attribute to the iframe (for accessibility purposes). So I tweaked the code to allow a customizable title attribute. When you copy and paste your shortcode into WP, just add title="Your title" to the shortcode, obviously replacing “Your title” with the actual name of the album you’re embedding. In the case above, I changed the shortcode to:

Be sure to enclose the attribute value with double quotes if there’s going to be a space, otherwise only the first word will be used for the title. So in this case:

…only Cosmagora would be included in the title and everything else will be ignored.


Original Post

Apparently WordPress.com already has support for Bandcamp shortcodes. But what if you’re on a self-hosted WordPress site? You can create your own shortcode, using add_shortcode().

Here’s what I have in my functions.php file:

PHP
  1. <?php
  2.  
  3. add_shortcode('bandcamp', function($attr=[]){
  4. $attr = shortcode_atts([
  5. 'width' => 350,
  6. 'height' => 470,
  7. 'album' => null,
  8. 'title' => null,
  9. 'size' => 'large',
  10. 'bgcol' => 'ffffff',
  11. 'url' => null,
  12. 'linkcol' => '0687f5',
  13. 'tracklist' => 'false',
  14. 'title' => null,
  15. ], $attr);
  16.  
  17. extract($attr);
  18.  
  19. if ($album == null)
  20. return false;
  21.  
  22. // the embed code itself
  23. $iframe = sprintf('<iframe style="border: 0; width: %s; height: %s;" src="https://bandcamp.com/EmbeddedPlayer/album=%s/size=%s/bgcol=%s/linkcol=%s/tracklist=%s/transparent=true/" title="%s" seamless></iframe>',
  24. $width . 'px',
  25. $height . 'px',
  26. $album,
  27. $size,
  28. $bgcol,
  29. $linkcol,
  30. $tracklist,
  31. $title,
  32. );
  33.  
  34. // if your site uses Gutenberg
  35. // this is veerrrry....sloppily creating your own block
  36. return '<figure class="wp-block-embed-bandcamp wp-block-embed is-type-audio is-provider-bandcamp wp-embed-aspect-16-9 wp-has-aspect-ratio js">' . '<div class="wp-block-embed__wrapper">' . $iframe . '</div>' . '</figure>';
  37. });

The $iframe variable is the important part. Obviously, if you’re not using Gutenberg, you can just delete the entire return sprintf('<figure thing of code and end the entire function with return $iframe;

(Yes, Gutenberg lets you easily add an HTML snippet, but it considers Bandcamp embed codes “invalid”. Uh huh.)

Generating a Bandcamp shortcode

Go the album you want to embed (we’ll use Cosmagora as an example). Under the album artwork, click Share / Embed, then Embed This Album.

You’ll get a window showing the different player styles.

You’ll get another window with options to customize your player further, along with the embed code.

Two important things:

  • be sure to check wordpress.com in the top left, so it gives you the shortcode, rather than the HTML version
  • customizing it might add some HTML attributes not in the above PHP code. If that’s the case, you can add them through the shortcode_atts() function

Aaaand that’s it! Happy Bandcamping!

More info: