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.
Customization:
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 Result, JavaScript, HTML and CSS tabs are visible in the fiddle.
There are two themes, light and 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.
