Creating a Mixcloud embed shortcode for WordPress

I’m a big fan of using shortcodes, especially for things like embedded third-party audio or video players. It ensures that you have one location in your theme that handles the settings for the embed, meaning that if the third-party ever changes their embed code, or if you want to change the embed settings, you just need to change it in one place and all of the embeds across your site are updated.

I’ve just rolled out a new ebauche.net website which uses MixCloud quite extensively for both a custom post type, but also in various blog posts.

Setting up the MixCloud embed

I’m actually going to split this into a couple of different functions so that the MixCloud embed can also be used in other template areas.

Open up your functions.php and add in the following:

function pa_get_mixcloud_embed($url)
{
	$feed = urlencode(trailingslashit($url));

	$iframe = "<iframe
                 width=\"100%\" height=\"180\"
                 src=\"//www.mixcloud.com/widget/iframe/?feed=$feed&amp;replace=0&amp;hide_cover=1&amp;light=1&amp;hide_artwork=1&amp;embed_type=widget_standard&amp;hide_tracklist=1\"
                 frameborder=\"0\"></iframe>";

	return $iframe;
}

First up we’re accepting a parameter of $url, thus allowing you to just copy the URL of the MixCloud mix in question and paste it in. We then pass this URL through two functions, first trailingslashit() which is a WordPress function for making sure that there is a trailing slash at the end of a URL, and then we run it all through urlencode() to ensure that the URL is properly encoded for use in an iframe.

Then we construct our iframe and pass in the $feed variable. You could set it up so that any of the embed player options can be altered by the function parameters, but I wanted the player to have the same layout on all pages.

Preparing the shortcode

First lets initialise our shortcode.

add_shortcode('mixcloud', 'pa_shortcode_mixcloud');

And next we’ll create the pa_shortcode_mixcloud function.

function pa_shortcode_mixcloud($attributes){

	extract(shortcode_atts(['url' => null], $attributes));

	if($url)
	{
		return pa_get_mixcloud_embed($url, false);
	}

	return null;
};

Here we’re extracting the attributes that are passed in by the shortcode and making sure that there is a ‘url’ attribute set. If there is then we pass the URL into the previously created pa_get_mixcloud_embed() function and return it (in the background WordPress will echo the shortcode when it’s rendering your post). If no URL is set then we just return NULL.

Using the shortcode in your posts

Now it’s super easy to use the shortcode in your posts. Just type:

See it in action

You can see an example of this shortcode being used over on Ebauche.net.

Looking for some good quality mix sets? Make sure to check out

  1. Ebauche’s live and mix set page
  2. Invisible Agent’s “Agent Cast” podcast series
  3. MixCloud

Other Spectacular Shows!

Comments