WordPress: Add iframes to your post using custom fields and shortcodes

The visual editor of WordPress (TinyMCE) loooves to remove iframes from the content. This can be extremely annoying when you want to add Google Maps or other iframe-based widgets to your post. There are several approaches to a solution:

Turn off the visual editor
No problem for someone who has a good grasp of HTML. Not quite a solution, more of a workaround.
Edit the TinyMCE configuration files
The required changes are simple but could be lost with the next update of the editor.
Use plugins
I’m sure, there are tons of WordPress plugins which address exactly this issue but more plugins also mean more maintenance. Especially, when there is a much simpler solution.

Add the following code to the functions.php file of your theme:

function field_func($atts) {
   global $post;
   $name = $atts['name'];
   if (empty($name)) return;

   return get_post_meta($post->ID, $name, true);
}

add_shortcode('field', 'field_func');

Now you can display the value of a custom field in your post by adding the shortcode [field name=name-of-your-custom-field] to your content at the position where you would like it to be shown. Just make sure that the shortcode stands alone on a line, otherwise WordPress would wrap it in a paragraph, which would result in invalid HTML.

To add an iframe, simply paste the HTML code into the ”value” area of your custom field, like shown here:

WordPress field function

Voilá. Your iframe (or any other HTML code for that matter) will not be removed from your post and you can edit the code without having to switch to the HTML mode.

Update: You’ll need at least WordPress 2.5 to be able to use shortcodes.

Similar posts:

February 11^th, 2009
40 comments
Leave a comment!
Bookmark & Share
English, Main blog, Tutorials, WordPress

40 comments (Skip ↓)

[...] of WordPress screwing up iFrame HTML when switching the editor from Visual to HTML mode. Thought I’d post a link to it here as it’s quite an elegant solution Just a test post for embedding iframe maps View Larger [...]

Embedding Google Maps in Wordpress | McG
March 04^th, 2009
17:16

Awesome, thanks. That’s a really elegant solution!

Ciaran
March 04^th, 2009
17:20

@Ciaran: Thanks! Glad you like it.

Walter
March 05^th, 2009
23:17

Thank you very much… never dawned on my to use custom fields to correct the iframe problem. Thank you for the heads up!

Mick
April 09^th, 2009
21:29

Hi there, this sounds like a great solution however, I’m a bit of a code novice. My functions.php file already has this code in it:

”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));

when I add your code, my site seems to screw up. Do I need to add your code within this?

Thanks,

Jack

Love Clapham
May 24^th, 2009
14:09

@Jack: The code (and all other functions) should be added somewhere between the PHP tags < ?php and ?>.

Walter
May 24^th, 2009
14:35

Thank-you Walter, this is a brilliant and clean solution to an annoying problem. Thanks also for replying so quickly!

Love Clapham
May 24^th, 2009
17:49

[...] Quellen: GoogleWatchBlog vividvisions.com [...]

Hol Dir Google Web Elements auf Dein (Wordpress-)Blog - Klicken zum Vergrößern, functionsphp, Wert, Google, Euch, Blog - Plerzelwupps Erfahrungen
May 29^th, 2009
07:41

Thank you very much … I never fall use custom fields to remedy the problem IFRAME. Thank you for the Heads Up!

tilda
June 19^th, 2009
12:04

Thanks! Easy fix to a pesky glitch! Woot!

Lizard
August 13^th, 2009
22:32

Not working on my site… IFRAME tags still stripped from final HTML output.

Christian
September 23^rd, 2009
22:43

@Christian Weird. Still works perfectly here. Anyone else with this problem?

Walter
September 29^th, 2009
22:06

does this work with posting to pages? works fine for posts but not pages.

pablo
October 03^rd, 2009
20:39

@pablo: Should work fine with pages, too. Just tested it again.

Walter
October 03^rd, 2009
21:36

Yes, it works. I’m using WPMU 2.8.4 and I can confirm that it works great. I must have made a typo. Thanks for saving me.

pablo
October 03^rd, 2009
23:40

Wow. This is a great solution. My clients were always removing their Google maps by accident and this solution doesn’t break the visual editor or require installing. It will always be in my functions file from now on.

Jacob Kennedy
October 17^th, 2009
16:44

Hi!

I did an wordpress plugin named Insere Iframe that let you insert an iframe in your posts.

You can find it at http://www.idealmind.com.br/wordpress/insereiframe-a-simple-wordpress-plugin-to-insert-iframe-in-posts/

IdealMind
November 09^th, 2009
00:50

@IdealMind Thanks!

Walter
November 09^th, 2009
22:08

ThankYou Today I can add iframe from caleadar google app to my web

easy4com
November 19^th, 2009
06:16

[...] plugin to do iFrames either. Fortunately through a quick Google search I found Walt had a very elegant solution using WordPress Shortcodes and Custom [...]

iFrames in WordPress Post Editor Using Shortcodes and Custom Fields | Bui4Ever | Bui4Ever.com
December 24^th, 2009
06:42

@szda Vielleicht hilft das hier: http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/

LoungeFM (LoungeFM)
January 31^st, 2010
10:18

Found this brilliant post which helps get around the wordpress’s iframe in the editor problem. Found this so useful. http://bit.ly/LEaUd

mikemcmullan (mikemcmullan)
February 24^th, 2010
00:16

http://tinyurl.com/lbo2nk
WordPress: Add iframes to your post using custom fields and shortcodes › VividVisions • information design

bunny_car (bunny_car)
March 15^th, 2010
04:24

[...] I found a cleaner solution: Use custom fields and shortcodes. This is described most elegantly here. [...]

Embedding a Google Map Into WordPress
March 27^th, 2010
17:28

It really works great but how do I style my iframe. Can I do this also in the custom field or do I have to add it inside my css stylesheet ?

dutch-dots
March 28^th, 2010
14:37

@dutch-dots: It works both ways. You can add the style attribute to the HTML code in the custom field or add the styles to the CSS file.

Walter
March 28^th, 2010
14:59

Hi–thank you, this did exactly what I needed it to without having to install another plugin! You should really circulate this solution on the WordPress forums because it certainly seems like there’s a lot of people with TinyMCE out there who might have problems with this. It’s a very elegant workaround, and even someone without any coding knowledge (like me, CSS is basically all I can do) can get it to work. So again, thanks.

Joni

Joni
April 01^st, 2010
16:02

Wow, that worked!
I love it when I have a problem, Google it and there it is.
Thanks, you saved me hours of BS.

Andrew
April 11^th, 2010
05:56

@Joni & Andrew: You’re welcome!

Walter
April 11^th, 2010
09:59

Hi, just wanted to thank you for such a helpful article. Very efficient and easy to use!

Milad
May 23^rd, 2010
08:36

This works great in the Thesis theme. The code goes “as is” into the Thesis custom_functions.css file, the [field name=iframe] goes on the page where you want the iframe to appear (in this case, a satellite shot), and the Custom Fields instructions remain the same. Fantastic!

Here’s a link to display the result (near page bottom):

http://viking.twolaneroads.com/2010/05/02/rr-mogadishu/

Twolane
June 17^th, 2010
00:01

This works very good. Thank you for this useful article. It helped me a lot!

lucas
June 29^th, 2010
08:20

Excellent solution – and probably the simplest around.

Andy D
July 13^th, 2010
17:18

Many thanks — exactly what I needed, appreciate your efforts writing it up.

Alex
July 25^th, 2010
03:04

[...] είναι η δημιουργία sort code και η χρήση custom fields του wordpress (διαβάστε περισσότερα εδώ). Με αυτό το τρόπο το iframe περνάει μέσα από ένα short code και [...]

iframe μέσα σε post του Wordpress | wordpress.learning.gr
July 28^th, 2010
11:58

Really superb man it is gr8t
great solution
it helped me a lot to embed i frame into my site movies.infotid.com
hats off to u man

goutham
August 05^th, 2010
19:47