Last Updated: January 15, 2018
Revision Update: I have updated the wording.
This tutorial was written using the following plugin Ultimate TinyMCE. This plugin is no longer supported. (The following plugin WP Edit is the new version added in the repository to replace the previous one. The new plugin only works with WordPress 3.9 and above).
WP Edit is maintained on a regular basis and supported very well. It provides some handy tools for you to add many different features to your post and pages using the added tools in the menu bar in the TinyMCE editor.
Note: You should not be running your website with and old WordPress version. You should update to the latest version.
The browsers tested:
- IE 11
- Google Chrome
- Microsoft Edge
Note: Always have the latest version of the browser installed. Make sure you clear your cache regularly. Make sure Java is always up to date.
- document.write = which will write the text to your post. The text that it will write is Hello World!.
Always edit or add the code using the Text editor. See image below.
Step 3 ) The following image you have switched back to the Text editor. This time you will notice some code added by WordPress, // <![CDATA[ at the beginning of the script and // ]]> at the end of the script.
Note: You can read more about this by clicking in the following URL Wikipedia CDATA.
Add iframe To WordPress Post or Page
Step 5 ) Copy and paste the iframe code you selected to your post or page through the Text editor by clicking on HTML tab. The editor will place the iframe in between < p > < /p > tag. See image below.
Using Ultimate TinyMCE.
Step 6 ) The following instructions are for those who want to use the plugin to add an iframe. Select the following icon and add your code, url and other settings you prefer. See images below.
Remember: You need to set up Utlimate TinyMCE and add all the tools you want to include in your wysiwyg editor especially the one used in this tutorial.
Step 6-a ) The image shows you what to select to proceed. Go to Insert -> Media.
Step 6-b ) The following image General allows you to set up the following options.
- Dimensions = choose whether you want to enable Constrain proportions or not.
Step 6-c ) The following image Embed allows you to paste the source code.
Step 6-d ) The following image Advanced allows you to set up the following options.
- Alternative source
- RawHtml Allows you to insert raw HTML or other codes in your posts and pages. You can also disable smart quotes and other automatic formatting on a per-post basis.
In regards to Raw HTML, there are two versions available Free and Pro. The free version only works with the HTML editor, it is not compatible with Visual editor. To use with Visual editor you need to purchase the Pro version.
Note: Always create a backup before you try any new plugin just in case something happens.
I hope this helps you and puts you on the right track. If you need any help just leave a comment or send me an e-mail.
Come back for more information as I keep updating this post.