How to embed iframes into your WordPress page using Shortcodes

Written by on August 2, 2011 in WordPress - No comments
embed-iframe-wordpress

Where’s my iframe?

You may have run into a common problem in WordPress, disappearing iframes. Why does this happen? The visual editor in WordPress (TinyMCE) strips out iframes. So if you embed an iframe in HTML view in WordPress and then flip over to the ‘Visual’ view your iframe is going to be removed. This can be extremely annoying.. say you’re embedding a Google map an the editor decides to remove the code.. bye bye map!

My solution to this problem is a pretty simple process. First, install the shortcode generator. Then:

Create a new shortcode.

wordpress shortcode generator

Paste in your Google Maps iframe

wordpress-shortcode-generator

Paste the shortcode into your WordPress post or page.

map shortcode

Voila

wordpress-google-map

The editor in WordPress won’t strip out the shortcode text, so with this method your iframe is safe. Also, it helps clean-up the amount of text in your WordPress editor.

About the Author

Mike Ilsley "ilz" is a Boston based website designer, front-end developer, WordPress addict, owner of Beantown Design, and exclusive ThemeForest author. Check him out on Twitter, Facebook, Google+ and don't forget to subscribe to the WebDesign&Such email RSS feed. Also, check out his latest project, jQueryMobileShowcase.com.