css.php

WordPress makes it easy to embed content from many content providers by simply inserting the external URL (its web address) on a separate line in a page or post if you are using the Classic Editor.

If using the Block Editor, click the plus sign to add a new block, select “Embed” and choose the content provider and paste in the URL. See below:

 

Custom Embeds

In some cases, content cannot be embedded this way. Some content providers supply embed codes that use HTML iframe tags which pose a security risk for the Commons. Others suggest using out-of-date plugins.

Listed below are file and content types which require a bit more effort to embed.

PDFs

To embed a PDF, activate the “PDF Embedder” plugin. Go to “Add Media” and add the PDF file to the media library.

In the Block Editor, you will see “PDF Embedder” as a block. Add it and select the PDF from the Media Library.

Microsoft Files and PDFs

Microsoft Files and PDFs can be embedded using the “Embed Any Document” plugin. The documents are stored in the Media library.

In the Classic Editor, you will see a new option in your toolbar. Simply click and select the file you want to embed.

In the Block Editor, you will see a new “Document” block. Click and choose your document.

Google Docs, Sheets, Forms, etc.

Commons Developer Ray Hoh developed a plugin for embedding Google files. Activate the “Google Docs Shortcode” plugin and follow these instructions to create your shortcode.

In the Block Editor, create a shortcode block and paste in the shortcode.

Google Calendars

For Google Calendars, you need to use the plugin ”Simple Calendar.”

You will need to get the ID of your calendar from the shareable url (the ”cid” parameter) that is available from your Google calendar, and put it in the appropriate place in the calendar “add” section. Then you will get a shortcode such as this – [calendar=”1817″]

In the Classic editor, simply paste it in. In the Block editor, create a shortcode block and paste in the shortcode.

See Simple Calendar Documentation for more information.

YouTube

Videos can be easily embedded by just pasting in the URL in the Classic Editor, but you might want to activate the “YouTube” plugin for other cool options.

In the Classic Editor, you will see a new icon in your toolbar. Click it and follow the instructions to configure the shortcode.

In the Block Editor, you will see a block called “YouTube Wizard” in the Embed section after you have installed the plugin. You will also see a “YouTube” embed block which you can use without installing the plugin.

Google Maps

There is a plugin called “Embed Google Maps” – it requires an Embed API Key which can be obtained here. Another, maybe simpler option is to use the “Ultimate Shortcodes” plugin. You will see a “Google Map” option.

Many premium themes have Google Map embed code built in.

In the Block Editor, select the shortcode block and enter the “Ultimate” map shortcode.

Sutori

The Commons Dev team created a handler for Sutori content. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic editor for now.

Padlet

The Commons Dev team created a shortcode for Padlet content. It requires a Padlet key and optionally, the height. Watch how to find the Padlet key.

The shortcode syntax is:

For the Block Editor, you will need to use a shortcode block. Follow these instructions.

VoiceThread

The Commons Dev team created a handler for VoiceThread. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic Editor for now.

Prezi

The Commons team created a plugin for Prezi called “PreziWP.” Follow this link for information on how to configure the shortcode.

For the Block Editor, you will need to use a shortcode block.

Piktochart

The Commons Dev team created a handler for Piktochart. In the Classic Editor, simply paste in the URL.

The embed handler is not yet supported in the Block Editor. Please use the Classic Editor for now.

StoryMaps JS

In the Classic editor, just paste the URL on its own line.

In the Block Editor, paste the URL in the “Embed” block:
https://wpcompendium.org/wordpress-gutenberg/blocks/embed-block/

The URL must begin with “https://uploads.knightlab.com/storymapjs/“.

Tableau

In the Classic editor, just paste the the Tableau share URL on its own line.

In the Block Editor, use the shortcode block like this:
PASTE TABLEAU SHARE URL HERE

To get this tableau URL, click on the share icon as seen below: