JSFiddle Shortcode

JSFiddle Shortcode is a WordPress plugin to help you to easily embed Fiddles in your posts.

I was working on a post and wanted to embed a Fiddle to show an example. I’m currently using GitHub Gist Shortcode plugin to embed gists and tough there maybe something similar for JSFiddle, but after a quick search I couldn’t find anything available in the Plugin Directory. I decided to created it my self and this the result.

The plugin was tested against WordPress 3.2.1 but it’s so simple that it should work with previous versions without problems. If you happen to test it against older versions, please let me know how it goes.

Usage:

[jsfiddle url="http://jsfiddle.net/wvega/UupFu/" height="300px" include="result,html,js,css"]
  • The only required attribute is url of the fiddle you want to embed, with or without trailing slash.
  • include can be any combination of result, html, js and css, separated by commas; the tabs in the embedded fiddle will follow the order specified with the include attribute.

Result:

<iframe style="width: 100%; height: 300px" src="http://jsfiddle.net/wvega/UupFu/embedded/result,html,js,css"></iframe>

I added only the basic features to the plugin to make it work. If you think there is something I should add, please let me know in the comments section.

The source code is available at GitHub and the plugin can be downloaded from the Plugin Directory.