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:
- Februar 11th, 2009
- 78 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 [...]
März 04th, 2009
17:16
Awesome, thanks. That’s a really elegant solution!
März 04th, 2009
17:20
@Ciaran: Thanks! Glad you like it.
März 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
Mai 24th, 2009
14:09
@Jack: The code (and all other functions) should be added somewhere between the PHP tags < ?php and ?>.
Mai 24th, 2009
14:35
Thank-you Walter, this is a brilliant and clean solution to an annoying problem. Thanks also for replying so quickly!
Mai 24th, 2009
17:49
[...] Quellen: GoogleWatchBlog vividvisions.com [...]
Mai 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!
Juni 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.
Oktober 03rd, 2009
20:39
@pablo: Should work fine with pages, too. Just tested it again.
Oktober 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.
Oktober 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.
Oktober 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 [...]
Dezember 24th, 2009
06:42
@szda Vielleicht hilft das hier: http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/
Januar 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
Februar 24th, 2010
00:16
http://tinyurl.com/lbo2nk
WordPress: Add iframes to your post using custom fields and shortcodes › VividVisions • information design
März 15th, 2010
04:24
[...] I found a cleaner solution: Use custom fields and shortcodes. This is described most elegantly here. [...]
März 27th, 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 ?
März 28th, 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.
März 28th, 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
April 01st, 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.
April 11th, 2010
05:56
@Joni & Andrew: You’re welcome!
April 11th, 2010
09:59
Hi, just wanted to thank you for such a helpful article. Very efficient and easy to use!
Mai 23rd, 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/
Juni 17th, 2010
00:01
This works very good. Thank you for this useful article. It helped me a lot!
Juni 29th, 2010
08:20
Excellent solution – and probably the simplest around.
Juli 13th, 2010
17:18
Many thanks — exactly what I needed, appreciate your efforts writing it up.
Juli 25th, 2010
03:04
[...] είναι η δημιουργία sort code και η χρήση custom fields του wordpress (διαβάστε περισσότερα εδώ). Με αυτό το τρόπο το iframe περνάει μέσα από ένα short code και [...]
Juli 28th, 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
August 05th, 2010
19:47
I use this all the time… thanks so much for writing this!
August 05th, 2010
23:43
Unfortunately, I guess because of my theme Atahualpa or some other interaction, this isn’t working for me. Thanks nevertheless!
August 07th, 2010
08:33
Hm, it should work just fine. Do you have spaces in your field names? Then you must use quotes in the shortcode, ie. [field name="my field"]
August 12th, 2010
09:58
Great! Really nice solution. So easy to implement, too.
Thanks
August 12th, 2010
18:56
[...] much googling I stumbled upon this excellent guide which provides a simple but effective [...]
September 12th, 2010
20:06
Great solution. Worked. This is much better than installing more plug-ins, etc. Thank you.
September 13th, 2010
21:25
[...] VividVisions “Add iframes to your post using custom fields and shortcodes” [...]
September 20th, 2010
13:52
Thank very much for information
Oktober 07th, 2010
00:20
This is so super! Thank you a lot
The problem was so annoying but this solution just works so smoothly
Oktober 11th, 2010
15:34
Kan nogle bekræfte, at dette #WordPress fix virker? http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/
Oktober 18th, 2010
11:15
Can anyone confirm this #WordPress bug-fix? http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/
Oktober 18th, 2010
11:15
Brilliant. No plugins, no bloat; just a quick fix!
Dezember 09th, 2010
17:22
Thank you so much for this, my iframes disappearing was beginning to get pretty damn annoying! I use Amazon’s iframes to supplement by book reviews with product links.
Dezember 27th, 2010
22:14
Excellent stuff. I use a lot of meta data so this can come in handy in several ways. Two thumbs way up!
Januar 20th, 2011
01:46
great tip, takes 2 minutes to implement, saves you countless hours
Februar 03rd, 2011
03:59
GREAT TIP! Been searching for a fix all morning… so many bad tips out there – this is great!
Februar 04th, 2011
22:07
I did exactly what you mentioned. When I view my page in the page editor, i can see my i-frame but when I log out and go directly to my site, i do not see the page. Newbee with codes.
Februar 09th, 2011
03:16
This worked perfectly! Thank you so much for taking the time to develop this work around. I’ve been trying to get this code to stay put longer than I’d like to think about. You have helped me immensely! Thanks again!
Februar 09th, 2011
07:04
@Lovely: You shouldn’t see the iframe in the page editor, just the source code of it. Do you see the shortcode in the preview?
Februar 16th, 2011
11:30
Thanks this just streamlined everything for me!
Februar 20th, 2011
00:13
[...] There is a good rundown of what to do here: http://www.vividvisions.com/2009/02/11/wordpress-add-iframes-to-your-post/ [...]
März 24th, 2011
22:45
[...] [...]
März 27th, 2011
23:00
Thanx for this great fix!
April 15th, 2011
13:34
looks like a great fix. where do i get the custom fields section? using the headway theme. thanks!
April 17th, 2011
16:01
@Nathan: It seems it has been hidden by default with version 3.1. When editing posts, click on “screen options” at the top right of the interface. Check the “Custom Fields” checkbox.
April 17th, 2011
17:36
@Walter – brilliant, thanks! (wonder if it’s worth mentioning this in the post above to save you from answering this again)
April 17th, 2011
19:43
Brilliant!! Thank you so much for this really useful idea!
April 26th, 2011
15:15
I am now preparing some tutorials on HTML5 and I wanted an easy and practical way of embedding iframes to show the demos. This is really useful. Thank you!
April 26th, 2011
21:03
Your info worked great. Thanks a ton.
April 27th, 2011
22:34
[...] membuat fields baru apabila ingin memasukkan ifarme didalam artikel. Cara ini saya ambil dari situs information design dengan beberapa beberapa [...]
Mai 22nd, 2011
22:22
Hi, it is very nice solution to modify functions.php. I use last verion of wordpress (3.1.3). I tryed this but not working. I am not php writer. Please what I do wrong? This is my code of my theme functions.php:
‘Header’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ‘‘,
‘after_title’ => ‘ ‘,
));
//GsL98DGtpo0W
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Sidebar Top’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Sidebar Left’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Sidebar Right’,
‘before_widget’ => ”,
‘after_widget’ => ”,
‘before_title’ => ”,
‘after_title’ => ”,
));
?>
Juni 04th, 2011
20:40
Thx for sharing +1
Juni 14th, 2011
22:46
@menyl: Just put the code at the end between
));and?>.Juni 14th, 2011
23:27
This is so elegant, and hides the “nasty” code from the content editor. I love it – I can already see several other nifty uses for this technique.
Thank You!!
Juli 01st, 2011
07:29
Have you thought about turning this into a Plugin for WordPress? I find myself using this thing on every site I’m developing. If you don’t want to, I would love to write this as a plugin and credit you. Let me know!
Juli 22nd, 2011
15:58
I need help! I tried implementing this code in the function.php file, but first i plassed it wrong (plassed it in the end of the file, after ?>. I deleted the code I added, but now things are f**ed up. If i try to change anything in the Admin panel. Logging out, editing files or preview post, a white page appears and nothing more.. :s The function file is back to normal (before i started), but that did not help.
Juli 25th, 2011
16:08
@Ellis: I have a base theme template which I use for nearly all of my projects. This function is part of it, so I don’t need this as a Plugin. But go for it, good idea!
Juli 25th, 2011
16:53
@Henrik: If the functions.php file is back to its original state, there shouldn’t be a problem. You can try to rename it and create an empty functions.php file and start adding the functions from your file one by one and test it each time. Just make sure that all PHP functions are nested within the < ?php … ?> tags.
Juli 25th, 2011
16:58
@Walter: Thanks for a very quick reply. I did not find the problem, but for some reason it solved itself when I replaced the function.php file for the fourth time :/
I must admit im a bit scared to mess with the file again. So I think im gonna backup before I try again. But so that its perfectly clear, I just copy the code, go to the end of the file and paste it in right before the ?> tags?
I am really not a n00b, but I sure feel like one today
Juli 25th, 2011
20:30
I see now that it may have been a coincidence that made me believe the problem was with me. The hoster has had some problems today while they updated.
Juli 25th, 2011
20:32
Thanks, I owe you a beer – you just saved me hours of work and research!
September 13th, 2011
10:54
Thank you so much! Went through 3 different plugins trying to find a decent workaround to display an ad widget properly, but this finally did the trick. Bookmarked for future sites…
Oktober 24th, 2011
11:39