Iframe Alternative

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].

    • williams.edu
    • google.com
    • 8tracks.com
    • bandcamp.com
    • flickr.com
    • flipsnack.com
    • mixcloud.com
    • prezi.com
    • shoutcast.com
    • soundcloud.com
    • surveymonkey.com
    • vimeo.com
    • zoho.com

Creating the shortcode

The [WmsInclude] shortcode can be set up 2 ways:

  1. using the shortcode builder interface in visual mode (recommended)
  2. 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:

    1. Place your cursor in the visual editor where you'd like the iframe content to appear.
    2. 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.
    3. Hover over the "Embed External Content" menu to reveal its submenu, and select "Web Page (iframe)", outlined in red below.

    sc-menu-wms_include

    Fill out the form in the dialog popup box. Hovering over the input boxes will reveal hints, helping you fill out the form.

    sc-dialog-wms_include

    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.

    Legal attributes

    url
    Default: n/a
    required

    The URL of the webpage to be embedded into WordPress. A fully qualified URL (starting with http) is required for the shortcode to function.

    width
    Default: 600

    The width of the iframe- a number in pixels (just the number) or a percentage (including the % sign).

    height
    Default: 400

    The height of the iframe in pixels- just the number.

    scrolling
    Default: no

    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.

    style
    Default: n/a

    Any legal CSS code can be used here- what's entered for this will be used as the value for the style attribute.

    iframe
    Default: 1

    If set to 0, the external page will be embedded without an iframe container. Not recommended - advanced users only.

    allowFullScreen
    Default: true

    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.

    Example

    Using only required attributes:
    [WmsInclude url="http://www.williams.edu"]

    Using all attributes:
    [WmsInclude url="http://www.williams.edu" width="100%" height="500" scrolling="no" iframe="1" style="border:1px solid black" allowFullScreen="true"]

Demo

Here’s what an embedded iframe looks like: