Quick Tip for Showing JSFiddles in Your WordPress Blog

By December 14, 2016Blogs

I know for a fact I have shared this tip with colleagues multiple times over the last year, because it always seems to be just tricky enough to trip someone up when writing WordPress blog posts that would benefit from live JSFiddles in an iframe. And I realize that there are plugins for this also, but you might not have access to them, or maybe you just want a simple solution. So here you go, a quick tip to save you a headache.

And it really is simple, once you’ve done it one time!

If you use the Embed option from your JSFiddle and select the option “Prefer iframe”

2016-12-14-15_54_10-kendo-combobox-restore-previous-value-jsfiddle

Then copy the snippet from the Embed Code box:

2016-12-14-15_55_33-kendo-combobox-restore-previous-value-jsfiddle

You will end up with a snippet that looks like this:

Which is almost, but not quite exactly what you need. If you paste this into the markup tab of your WordPress blog post, you will get:

 

Exactly. Nothing. The code works when you paste it in and return to the visual tab, but as soon as you save or publish, it fails to display correctly.

What you need is instead:

Which looks like this, and doesn’t get wiped out during a save:

Here’s the full example:
For me, this looks completely broken in edit mode, but works perfectly once published or in preview (go figure). Enjoy!

Update 1/18/2017: Note that if the above doesn’t work for you and your WordPress hosting uses SSL, make sure your src tag uses https instead of http.

The following two tabs change content below.

Latest posts by Falafel Posts (see all)