Do you have an already written HTML snippet you would like to include in your WordPress blog or website but are having trouble? We can help! It would certainly save a lot of time if there was an easy, clever way to embed the code without having the WYSIWYG editor destroy the original HTML code, right? I certainly think so! That’s why I wrote this tutorial about two ways to include existing HTML in a WordPress post or page. It’s not too difficult, so let’s begin.
THE EMBEDIT WORDPRESS PLUGIN
One quick and easy way to embed regular HTML code inside a WordPress post is to use the EmbedIt WordPress Plugin. The plugin works with Meta tags by using the built in WordPress custom keys feature. Those of you using WordPress 3.1 or higher may be a little confused as to where to locate the custom keys feature because they no longer show custom keys in post editing pages since version 3.1, so we will explain how to remedy the situation in the plugin instructions. Here is how to use the EmbedIt plugin in half a dozen simple steps:
- Download the plugin to your desktop from: http://www.matteoionescu.com/wordpress/embed-html/
- From your WordPress dashboard, go to “Plugin”, click on “Add New” and then click “upload” in the top navigation bar of that page.
- Click the “Browse” button to locate the .zip file with the plugin on your desktop. Then click on “install now” and you are ready to use the plugin!
- Add a new post in which you will add your HTML code snippet to. Wherever you want the HTML snippet to start, place the text “HTML1” in square brackets as in the following screenshot:
- If you are using WordPress 3.1 or higher, activate the custom fields feature by clicking on “Screen Options” in the upper right of your add posts page and putting a check mark by “custom fields”. See the example image below to help you find the custom fields option:
- Now create a custom field named “HTML1” without the quotes. Then cut and paste your HTML snippet into the value field of the custom field and you are done! Here is a screenshot of the process when we did it:
That’s one easy way to include HTML snippets into your WordPress site. This technique is great for videos that use embed tags such as ones from YouTube and other sites. It can also be used for just about any other HTML code you have trouble inserting with the WordPress WYSIWYG editor.
PREPARING YOUR HTML CODE:
While it is true that many code snippets can be inserted into a WordPress site using the above mentioned EmbedIt plugin, there are some situations or code structures to watch out for. You don’t want to put any HTML tags in your site that should not be repeated or accidentally close any open tags from the WordPress Theme’s header.php file or other template files. To avoid this you should strip your HTML code snippet of any of the following tags:
- HTML tags, i.e.: <html> or </html> normally close to the top of the file and at the very end normally. You should always delete these.
- Body tags such as <body>, <body style=”….”> or </body> will again be close to the top and bottom of the file. You should always delete these as well.
- Head tags like: <head> or </head> should be deleted, but probably not everything in between them (see below).
- Title tags which would be either and anything text in between them can be safely deleted.
- Meta tags such as
Those are all probably all of the tags you can simply just delete. Only in some cases can you also delete what is in between the opening tag and closing tag. For example, you should always be able to safely delete what’s in between the opening title tag and closing title tag, but you would not want to do the same with the body tag obviously or you wouldn’t have any code left!
EDITING YOUR HTML FOR CSS STYLE
If you have CSS in your HTML snippet that you plan to use with the EmbedIt plugin, then there are more special instructions for you to follow yet. If there is anything other than inline styles in your code snippets tags, you will want to rewrite it or move it. By inline styles, we mean ones that are inside of tags. An example of this situation would be a div tag with the style attribute set like:
That would be fine. However there are two other ways of including CSS styles in your HTML that will not work so good with WordPress and the EmbedIt plugin. CSS styles can also be included in the head section of the HTML page or linked to from within the head section of the HTML. Either way is going to require a little work unless you get lucky and it looks good.
FIXING INTERNAL STYLES
Internal styles, or styles defined in the head of your HTML document or code snippet will need to be moved. Now the correct way to do this would be to convert them all to inline styles defined in each individual tag, but that could take forever and be quite complex as well, so there is another option. The other way to do it is explained here:
- Remove the head, body and title tags from the top of the document and there closing tags and any other tags explained above that can be removed.
- Cut all the text from the opening style tag to the end of the closing style tag and paste it to right after where the body tag was before you removed it. It should basically be the first thing in your HTML code snippet.
That’s how you remedy styles defined in the head of the document, but if they are linked to in the head you will do it like this:
- Locate the CSS file that the link points to.
- Delete all unwanted tags from your HTML snippet as explained above.
- Insert opening and closing style tags at the beginning of the cleaned up HTML code snippet. They can simply look like this:
. - Now copy your entire CSS file to your clipboard by using select all and copy.
- Paste the contents of your CSS file in between your opening and closing style tags.
Custom Types
Now you should have a code snippet that will work with the EmbedIt plugin and WordPress You will often have to make some style changes to make it look like it did before installing it into WordPress because WordPress default or custom styles may affect your code in ways you don’t like or want. Play with the CSS within the HTML code snippet until it looks like you want it to. If you don’t have any style in your code snippet and it looks bad, you can add style to it just like we did for adding the external style sheet style at the top of the HTML code. Just type in your opening style tag, define your styles and type the closing style tag and you are done. Test, fix test…
INCLUDING HTML WITHOUT USING A PLUGIN
If you use a plugin, EmbedIt is probably one of your best options. Some People, including myself sometimes, just don’t like to use too many plugins. For those of you who don’t want to use the EmbedIt plugin and don’t want to alter the code to be compatible with the method explained above, there is another option, iFrames. I know some of you cringe at the thought of iFrames while some people love them. iFrames have their place in HTML though and they really are not as bad to use as some people make them out to be, especially in WordPress where they are a solution to some problems rather than a cause of a problem. For one thing, they are much easier than using the EmbedIt plugin described in this tutorial to insert an HTML snippet in your WordPress site. Perhaps the best part about using an iFrame instead of a plugin is that you can leave your CSS styles intact. For those of you that don’t mind iFrames or are at least willing to give them a shot, we are going to show you how to set a home page and put an iFrame tag in it.
SETTING A WORDPRESS PAGE AS THE HOME PAGE
First, to be able to include our iFrame example in the home page of the site, we will quickly demonstrate how to set a page as a home page in WordPress so that it stays the home page:
- Go to pages and name an empty page something like “Home” or “Home Page”.
- Add whatever header and other content you want that will go before your iFrame content.
- Publish the page.
- Go to your WordPress dashboard, hover over “Settings” on the left sidebar and click on “Reading”. On top of the “Reading Settings” page where it says “Front page displays”, select “a static page” and then select the name of the page you created in step one.
- Save your changes.
INCLUDE AN IFRAME IN A PAGE
Here is how to include your HTML snippet in your WordPress home page using HTML iFrame tags:
- Pick a spot in your page or post where you want your frame to appear. You can include an iFrame with no border and no one will be able to tell there is an iFrame in your page.
- There is a magically little code snippet we use to include iFrames. It needs to go in the functions.php file in your theme’s folder. Here is the code to copy and paste there
- To include the iFrame in the WYSIWYG editor while making your page, go to the spot on the page that you want the iFrame to appear and enter the following code:
- Save your edited home page and preview it to see that it works and then you can publish it or finish editing. You are all done!
