WP-Fiddle WordPress Plugin
Well, this is not an article about how to use jsFiddle instead it’s about a WordPress Plugin which has been developed to embed jsFiddle in WordPress Blog. Although, it’s really easy enough to embed the jsFiddle in to your blog without any plugin but this plugin simplifies the whole process by using a shortcode which you don’t have to write by hand instead, you can insert it using a button from the WordPress’ editor and can customize the fiddle from the options page.
Below is an example of the jsFiddle rendered by this plugin
How to use this plugin:
WP-Fiddle to your plug-in directory.
2. Activate the plugin through the
Plugins menu in WordPress.
3. Go to the settings page and customize the plugin options.
4. Add JSFiddles to your posts/pages from the WordPress’ editor by clicking on button.
Alternatively you can also write the
shortcode manually and can change the style of the frame like
[wp-js-fiddle url="your_jsFiddle_link" style="width:100%; height:400px; border:solid #4173A0 1px;"] just replace the
your_jsFiddle_link with your actual jsFiddle link.
From the settings page you can check or uncheck the
tabs to display in the fiddle and also you can change the display order of the tabs by drag and drop the tabs. By default there are all four
There are two themes,
presentation which affects the visual style of the code displayed in the fiddle. By default
light theme is enabled.
You can also set up the fiddle options to change the visibility of your fiddle in some pages of your blog, for example you can tell the plugin not to show the fiddle in the
front page or
category page or
archive page by checking or unchecking the check boxes. By default, the fiddle will not be displayed in all three pages mentioned above.