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’);
[/sourcecode]

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:


View Larger Map

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:

WordPress-iframe-shortcode-functions-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.

Related Posts with Thumbnails You can leave a response, or trackback from your own site.
14 Comments Web

Comments

13 Comments so far. You can leave a response, or trackback from your own site.
  1. You might want to mention that it this function needs to be wrapped in a php tag

  2. Mateya,

    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?

    Thanks

  3. Mateya,

    * and put the iframe code in it.

    • Richard Bui,

      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.

  4. Richard Bui,

    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.

    Thanks.

    • 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:
      [fieldname=iframe]

      Thanks,

      Shane

  5. Here’s the fix:

    [field name=iframe] == This works

    not

    [fieldname=iframe] == This doesn’t

    Thanks for a great plugin. You saved my bacon.

Add Your Comments

Required
Required
Tips

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <ol> <ul> <li> <q cite=""> <strike> <strong> <sub> <sup> <u>

Your email is never published nor shared.

Ready?