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:
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 11th, 2009
- 22 comments
Leave a comment! - Bookmark & Share
- English, Main blog, Tutorials, WordPress
[...] 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 [...]
March 04th, 2009
17:16
Awesome, thanks. That’s a really elegant solution!
March 04th, 2009
17:20
@Ciaran: Thanks! Glad you like it.
March 05th, 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!
April 09th, 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
May 24th, 2009
14:09
@Jack: The code (and all other functions) should be added somewhere between the PHP tags < ?php and ?>.
May 24th, 2009
14:35
Thank-you Walter, this is a brilliant and clean solution to an annoying problem. Thanks also for replying so quickly!
May 24th, 2009
17:49
[...] Quellen: GoogleWatchBlog vividvisions.com [...]
May 29th, 2009
07:41
Thank you very much … I never fall use custom fields to remedy the problem IFRAME. Thank you for the Heads Up!
June 19th, 2009
12:04
Thanks! Easy fix to a pesky glitch! Woot!
August 13th, 2009
22:32
Not working on my site… IFRAME tags still stripped from final HTML output.
September 23rd, 2009
22:43
@Christian Weird. Still works perfectly here. Anyone else with this problem?
September 29th, 2009
22:06
does this work with posting to pages? works fine for posts but not pages.
October 03rd, 2009
20:39
@pablo: Should work fine with pages, too. Just tested it again.
October 03rd, 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.
October 03rd, 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.
October 17th, 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/
November 09th, 2009
00:50
@IdealMind Thanks!
November 09th, 2009
22:08
ThankYou Today I can add iframe from caleadar google app to my web
November 19th, 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 [...]
December 24th, 2009
06:42
@szda Vielleicht hilft das hier: http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/
January 31st, 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
February 24th, 2010
00:16