UPDATE [17th January 2017] I added a snippet to make the Mixcloud player with a lighter background. —
UPDATE [5th July 2014] WordPress 4.0 includes Mixcloud on the internal oEmbed whitelist. From version 4.0 onwards you won’t need to add Mixcloud as a provider anymore.–
From time to time I bump into a new online service. Yesterday, I met Mixcloud.
On one of my last works I was asked to provide an easy way to paste & embed links from Mixcloud into the post content. Although the web app has a clean and comprehensive share popup, including an option to copy the WordPress shortcode which btw won’t work in a self hosted WordPress installation, Client asked for a better solution.
Sure there are plenty of plugins that you could install to solve this problem, but this time, that wasn’t an option. Specially when you find out that it is very clean and easy to convert a Mixcloud link to a nice player. Here are my findings…
Add a new provider
The first step is to register a new oEmbed provider to the list of allowed services in WordPress. For that we just need to add the following function in the theme’s functions.php or in a plugin, using Mixcloud oEmbed endpoint:
wp_oembed_add_provider( 'http://www.mixcloud.com/*', 'http://www.mixcloud.com/oembed/' );
Don’t forget to define the content_width of your theme as it plays an important role when embedding content.
Tweak the height
By following the above you are ready to start dropping Mixcloud links directly into your WordPress editor. WordPress will do the heavy work for you. But you might like to restrict the height of the embed player. According to the tests I made, the player was being rendered with a max-height of 900px which is way more than what I wanted. Fortunately WordPress has a hook to tweak the url before fetching the embed code:
/** restrict max height to 180px */
function my_mixcloud_oembed_url( $provider, $url, $args) {
if( false !== strpos( $provider, 'mixcloud' ) ) {
$provider = add_query_arg( array( 'maxheight' => '180'), $provider );
}
return $provider;
}
add_filter( 'oembed_fetch_url', 'my_mixcloud_oembed_url', 10, 3);
Tweak the background
Using the same technique, you could ask for a lighter version of the Mixcloud player, using the parameter light, as follows:
/** Mixcloud: ask for the light player version */
function my_mixcloud_light_oembed_url( $provider, $url, $args) {
if( false !== strpos( $provider, 'mixcloud' ) ) {
$provider = add_query_arg( array( 'light' => '1'), $provider );
}
return $provider;
}
add_filter( 'oembed_fetch_url', 'my_mixcloud_light_oembed_url', 10, 3);
More info at Mixcloud developers.