There are often times when you’ll want to add an iframe element to your site. Many services offer cool widgets that come as iframes. Unfortunately iframes are also a bit dangerous, they are like windows into other websites which could be like windows into terrible alternate dimensions! For that reason WordPress is designed not to allow normal users to add iframes. There is, however, a solution. You can use a shortcode to add your iframes. It’s already a function of your site and it’s super easy.
Adding a Calendar to Your Site
A common thing that people want to do is to add google calendars to their sites. If you are reading this tutorial you’ve probably already pasted the iframe link into the text window of the page you wish to add, hit publish, and become frustrated that nothing shows up. It’s not your fault! WordPress strips the offending iframe before it even hits the web. Let’s look at the iframe you want to add, this one is for my ALC calendar:
<iframe src="https://calendar.google.com/calendar/embed?src=drew%40alc.network&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
If you drop this code into the editor it will just vanish, what we are going to do is convert this code into a shortcode. A short code has a format like this:
[shortcode_name attribute=”value”]
The shortcode to display iframes is named iframe and it takes all the same attributes as a normal iframe, so making your iframe work is simply a matter of changing < >’s to [ ]’s and removing the closing tag! I’ll highlight the above example with red where you would delete or change, then show you the proper shortcode:
<iframe src="https://calendar.google.com/calendar/embed?src=drew%40alc.network&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Turns into this:
[iframe src="https://calendar.google.com/calendar/embed?src=drew%40alc.network&ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"]
Which will display like this: