iFrames in WordPress Post Editor Using Shortcodes and Custom Fields

I was looking for a way to embed a Google Map into one of my Reviews, but the FCKEditor, otherwise known as the Visual (or pretty) Editor, would remove any iFrame code. Posting it via the HTML tab works so long as you don’t click to the Visual tab, as it will strip the iFrame code. This can get pretty frustrating. I didn’t want to have to install another plugin to do iFrames either. Fortunately through a quick Google search I found Walt had a very elegant solution using WordPress Shortcodes and Custom Fields.

His technique worked out quite nicely and will allow me to post other iFrame content while still using the Visual Editor and not worry about the iFrame code getting stripped out. So I’m reposting his technique here for future reference.

You need to have a functions.php file in your theme for this to work. If it doesn’t exist, just create one and drop this line of code into it, making sure it is wrapped by <?php and ?> (thanks to Smick for reminding me):

[sourcecode language=”php”]
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’);

Upload that file into the theme folder that you are using or want to enable iFrames for.


Now any anytime you want to embed a Google Map iFrame, all you have to do in your Post Editor is decide where you want the iFrame to appear and put:

[field name=iframe]

Then scroll down to the Custom Fields box and under Name write iframe and under Value paste in the exact code. Here’s an example:


Make sure you click Add Custom Field to save the entry or it won’t show up in your post when you publish or update the changes. Now you can easily edit the existing post using the Visual Editor and not have to worry about losing any of your iFrame code.

Also note that unlike a plugin where you can switch themes and the code will continue to work, once you switch to a new theme, the iFrame code will no longer appear in any of your posts so make sure to include this line of code in your new theme. You could also save yourself the headache and make this function into a WordPress plugin.

14 thoughts on “iFrames in WordPress Post Editor Using Shortcodes and Custom Fields”

  1. I used code, that is written above, made a custome field – iframe and put

    When I take a look into post, all I see is just text -> [fieldname=iframe]

    Where did I make a mistake? Can you help me somehow?


    1. It sounds like it’s not processing correctly in the functions.php. Can you email me the contents of your functions.php file so that I can take a look.

      The only other thing I can think of is you put [fieldname=iFrame], but you write iframe in the Custom Field Name. It is case sensitive.

          1. I was actually wondering what the out come to that last statement was. I am having the same problem. all I see is [fieldname=iframe] in the post. I’m sure I followed your instructions, by now I have read them 40 times. any help

  2. John: The outcome of the Mateya’s problem was never quite solved. I looked at the functions.php file and it had a lot of “odd”, possible spammy, code that could have contributed to the problem.

    If you send me your functions.php file, I can take a look at it.


    1. Dear Richard,

      I seem to have the same problem as above. I’ve been very cheeky and have emailed my functions.php file to you as well, hoping you would have some time to see if I’ve placed it ok and what could be causing me to see:



    1. Awesome! I didn’t even notice that, LOL! Credit for function trick goes to Walt at VividVisions.com.

Leave a Reply

Your email address will not be published. Required fields are marked *