Use an iframe to Display WordPress Posts

A Case History from the design of the Complete Trivia site – see it in action at

Example Trivia Questions and Answers

I have spent many hours searched for tutorials about iframes and light boxes and tried several times to use iframes in WordPress but for a long time I failed to find a plugin that solved my problems. At those times it was not important enough to keep searching. Although  I solved some iframe problems by using an include plugin.

Then I had to get this solved when I created the Complete Trivia site, it really couldn’t be done any other way. They wanted to show examples of trivia questions and have the answers hidden, yet available to view, but without leaving the page.

The problem with iframes in general, is that the visual editor of WordPress does not like the iframe tag. It appears that while iframes themselves are not inherently insecure, they are a favourite tool for malware distribution, and if the code is done incorrectly in the iframe, the iframe becomes a security issue. WordPress “may” leave some code alone if you enter it in HTML view and save it without ever clicking back to visual mode, but most often when we save our changes and they contain an iframe tag – the iframe and text simply disappears.

Does your iframe code keep disappearing in WordPress?

WordPress just strips out iframes and it’s confusing, annoying and requires a solid solution, so that random edits don’t mess with the content you want in your posts. An include option allows you to put the iframe code in a text file and include it in a post. This will solve the problems for content that appears inline, (meaning an iframe that is displayed on the page). Use this plugin. Inside your wp-content folder create a new directory (right click for menu and choose new directory) using FTP and give it a short name like “use” or “inc”. Paste your iframed text into a notepad doc and ftp to this folder and use the shortcode from this plugin to include it.

On click open in a box

However, what I was searching for was a way to hide some wordpress content until someone clicked a link and then, on a click the content would open in a box. Within an iframe, and only the content in the linked post (not the whole website with headers and sidebars) should appear in a scrollable, closeable, pop up box.

I am a WordPress user not a programmer.  I was looking for plugins to do the job and almost reached the point where I considered hiring a plugin developer to write one for me.

I puzzled over ajax plugins, I checked out plugins with lightboxes and shadow boxes, I tried several include plugins but nothing appeared to do exactly what I wanted. But eventually, I did find a solution and that is what this tutorial will now show you how to do.

You will need to install these two plugins. Search for “easy fancybox” and “show content only” and install under dashboard Plugins > Add New or read manual installation instructions at easy fancybox link. Activate the plugins.

These 2 plugins will work together to display WordPress posts in an iframe that pops up in box when you click a link.

The easy fancy box plugin creates the iframe and box
Show content only removes the website frame and only shows the post content.

After activation you will find a new section for FancyBox under Settings > Media (note it’s called Media NOT Fancy Box!) where you can manage the plugins options.

Ignore all options (for this usage) other than to enable the iframe option at the bottom of the page. Leave the default settings for now unless you know what size you want your iframe box to be.

Create the WordPress post you want to show in the iframe.

Show Content Only

Show content only displays only the post or page content, without a theme, sidebars, scripts or stylesheets. It does display header tags but may not use your style for a header, it also doesn’t show separated lists. So you may need to experiment a little with the content of your post so it displays nicely within the box. But this is a small price to pay to remove the distractions of the sidebars etc.

Once Show Content Only has been enabled, you’ll discover every post now has an extra area at one side with 4 possible links. The first is for only content and the others will display tags, categories or both as well as content. You’ll need to copy this link and paste it into the code you use to display the box.

Displaying Post in the iframe

On the post where you want to display the iframe box you’ll want to enter the following link in HTML view. The url (placed between “quotes”) is your show content only link and your “instruction” (between >Text To Display<) is the the anchor text displayed on the page, telling people to click it to see whats in the box. Ensure that all the rest is left as it is written below.

<a href=”(http://www.domain.com/replace this with show content only link)” >Text That Will Display – such as Click Here to See …</a>

Remember to enter the link in HTML view where you want the link to be shown. Save your post, and then view it to check that the iframe is working. If the box is too wide or not wide enough, or if you wish to change the height, you can return to Settings>Media to adjust the size of the iframe box.

Tagged with: iframe

Filed under: Case History • CMS • Plugin • Tutorials