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:
1. Upload 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.
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.
Sheikh Heera is a freelance web application developer currently living with parents and two yonger
sisters in Sylhet, Bangladesh and working with Halal IT (As a Programmer) and Protisruti drug rehabilitation
center (As a Founder Member and Director). Read more →