Using Hana Code Insert to display an iFrame in WordPress

by · May 14, 2009

This video shows how to use Hana Code Insert to to incorporate an iFrame into your WordPress blog.Hana Code Inserts are handy because it permits you to display any level of HTML, JavaScript, and other client-side web programming into your posts and pages whereas without it you will likely find that your code does not render well when inserted directly into your pages and posts.

This technique is not limited to the use of iFrames as you can and probably should use Hana Code Insert to display any large amount of HTML, but this is a good use for Hana Code Insert. You will probably need to watch the video in addition to reading the instructions below so you have a visual reference.

A video used to be embedded here but the service that it was hosted on has shut down.

To begin, look for the Hana Code Insert plug-in which is accessible from the Settings tab in your WP Dashboard. There you will see space for a “New Entry” where you can copy/paste your HTML code and label the insert. Then press SAVE or UPDATE which will create the instance of this Hana Code Insert and displays it at the bottom of all other Hana Code Inserts you have created. Now grab (copy to clipboard) the Hana Code Insert from bracket to bracket which should include the words “hana-code-insert” plus your label and looks like this:

[ hana-code-insert name='YOUR LABEL' / ]

Next you go to the Page or Post you wish to create or edit and paste the code from bracket to bracket into your entry. You can paste this code in the Visual editor or the HTML editor. Doesn’t matter. You can also insert text, images, and other copy as necessary above or below your insert.

Now press PUBLISH or UPDATE or SAVE DRAFT to finalize this entry and when you preview it you should see your code appear just like normal. It’s that simple.