How to create a simple shortcode to embed an iFrame in WordPress

July 4, 2013 | PHP, Time Savers, Tutorials, Wordpress | 7 comments

I was just asked to add a nice little feature to a client site. Essentially they wanted to embed a copy of their newsletters into blog posts and pages but the CSS of the site was interfering with the content in the newsletter and breaking it. Plus it meant adding code to the editor which is never a good thing.

I decided the best solution would be to use an iFrame to display the content which would not be interfered with by the site CSS as before. Asking the client to remember iFrame code would be a big ask in most cases and so the the way to offer this would be to add a new shortcode.

The solution is simple.. upload the .html file from the newsletter and any accompanying images using the media uploader. Click edit next to the html document and you will see the uploaded URL. Simply take that URL to your post and use a simple shortcode as follows:

[iframe src="http://www.yoursite.com/file_url.html"]

When the page is displayed the iFrame is in place and no coding is required. The code I wrote defaults to 630px by 1500px but you can override it using the following example shortcode:

[iframe src="http://www.yoursite.com/file_url.html" width="700" height="800"]

The Code:

add_shortcode('iframe', 'ag_iframe');
function ag_iframe($atts, $content) {
 if (!$atts['width']) { $atts['width'] = 630; }
 if (!$atts['height']) { $atts['height'] = 1500; }

 return '<iframe border="0" class="shortcode_iframe" src="' . $atts['src'] . '" width="' . $atts['width'] . '" height="' . $atts['height'] . '"></iframe>';
}

Installation

You could do this as a plugin but I found it just as easy in this case to add to the functions.php file in the root of the theme directory.

A Donate Button!

7 Comments

  1. handymanbananas

    Finally got my aStore to work after I installed your code snippet in functions.php. First helpful code on getting iframes to work I found in over an hour of searching. THANK YOU!

    Reply
  2. Gino

    Many many thanks. I was looking for this. This is most wanted by allot of people.

    I was looking to a plugin but this is a far better way.

    Thanks

    Reply
  3. Steve Karr

    Thanks man, I battled with plugins for a couple of hours, none worked. You solution did! 🙂

    Reply
    • Gul

      Ya Steve you’re rite. I did the same thing.

      Reply
  4. Jasper

    How would you make a plugin of this?

    Reply

Leave a Reply to Jasper Cancel reply

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

CommentLuv badge

About this site and Sean Barton

Picture of Sean
Sean Barton is a Freelance Website Developer in Crewe, Cheshire. He is a Full Stack Developer but with extensive experience in Wordpress and other Frameworks. He is the Co-Founder of SitePresser, Layouts Cloud and Page Builder Cloud among other things..
This site was set up in 2008 as a tutorial and scripting resource for the PHP language and Wordpress.
Find out more about Sean on the About Me page or use the Hire Me page to get in touch. For more information about Sean's work take a look at the Portfolio

SitePresser is the plugin that packages child themes and layout packs for sale. Works with Divi and Elementor.