Iframes & WordPress
An iframe allows you to embed a webpage inside of another webpage.
For security reasons, WordPress strips out iframe tags from pages/posts during the save process. The [WmsInclude] shortcode provides a workaround for this, allowing you to embed external web pages into your WordPress site, without actually using the iframe HTML tag.
You can only pull in content from a set of white-listed domains. If you’d like us to add a new domain to the list, contact [email protected].
Creating the shortcode
The [WmsInclude] shortcode can be set up 2 ways:
- using the shortcode builder interface in visual mode (recommended)
- manually typing in the shortcode and attributes into the editor
Select a tab below for the corresponding instructions.
To use the shortcode builder interface, you will need to have the Williams Shortcode Builder plugin activated, and be using the visual editor. This method is not available for sites.williams.edu. test
To create the [WmsInclude] shortcode:
- Place your cursor in the visual editor where you'd like the iframe content to appear.
- Click on the "Shortcodes" button, located in the 2nd row of your visual editor's toolbar (outlined in orange below). If you only see 1 row of tools, click on the kitchen sink (outlined in green below) to reveal the 2nd row.
- Hover over the "Embed External Content" menu to reveal its submenu, and select "Web Page (iframe)", outlined in red below.
Fill out the form in the dialog popup box. Hovering over the input boxes will reveal hints, helping you fill out the form.
Clicking “OK” will insert the shortcode into the visual editor.
Editing the shortcode
In the editor (in both visual and text modes), the shortcode will look something like this:
[WmsInclude url="http://www.williams.edu" width="100%" height="500" scrolling="no"]
You can edit the shortcode attributes (the values inside the quotes above) directly, or you can delete the shortcode, and create a new one using the shortcode builder tool again.
For the shortcode to work, you will need to have either the Williams Include or the Williams Shortcode Builder plugin activated. Shortcodes can be manually inserted in either visual mode or text mode. If the value of the attribute you wish to set matches the default value below, you may omit the attribute.
The URL of the webpage to be embedded into WordPress. A fully qualified URL (starting with http) is required for the shortcode to function.
The width of the iframe- a number in pixels (just the number) or a percentage (including the % sign).
The height of the iframe in pixels- just the number.
If set to 'yes', a scrollbar will be provided to allow you to see content beyond what can fit in the height/width allowance provided.
Any legal CSS code can be used here- what's entered for this will be used as the value for the style attribute.
If set to 0, the external page will be embedded without an iframe container. Not recommended - advanced users only.
If set to 'false', the iframe will not be allowed to expand to use the full screen. 'False' is not recommended because it may negatively impact your users' experience.
Using only required attributes:
Using all attributes:
[WmsInclude url="http://www.williams.edu" width="100%" height="500" scrolling="no" iframe="1" style="border:1px solid black" allowFullScreen="true"]
Here’s what an embedded iframe looks like: