Embedding Content in WordPress

One of the easiest things you can do to customize your site and add visual interest and meaningful interpretation is to embed content in your site.

This tutorial and its accompanying video were created in versions of WordPress using the Classic Editor. WordPress has since upgraded to a new, block-based visual editor. You can return to the Classic Editor shown in these tutorials by activating the "Classic Editor" plugin. For more on how to use the new WordPress Editor, see UMW's Gutenberg Editor Walkthrough.

What is "embedding"?

Embedding simply means that you are bringing in content from somewhere else on the internet and inserting it into a post or page on your site.

What types of content can you embed in WordPress?

There are many different types of content you can embed in WordPress. For the purposes of COPLACDigital, you'll most likely be bringing in interactive media to supplement your projects. These media include, but are not limited to:

Timelines from Knight Lab's TimelineJS tool
Maps from:
Videos from YouTube and Vimeo
Audio from Soundcloud
Image sliders from Knight Lab's JuxtaposeJS tool
Scrolling, interactive narratives from Story Map Cascade

...and anything else that supplies an embed code for you.

How do you find embed codes?

Where and how you find embed codes will differ based on where you are bringing the content from. Some tools, such as those from Knight Lab, will supply the embed code for you without you having to search for it.

Iframes are the best way to embed something in WordPress without using a separate plugin, so look for code with an iframe.

For most websites, you'll find the embed code in "Sharing" options. These options will be in different places for different sites, but generally you can look for:

A simple "Embed" option, such as that pictured above
A simple "Share" option, such as on YouTube
A link symbol, such as:
A plane symbol, such as on Vimeo:
A symbol of three vertical dots (generally meaning "Show More")

Where do you put embed codes?

You can put embed codes in the body of a post or a page in WordPress. Embed codes do NOT work in the default Visual Editor in WordPress, so make sure you've switched over to "Text" mode (as shown in the video below) before inserting your embed code.

Why don't embed codes work in the Visual Editor?

The Visual Editor in WordPress is essentially an online word processor (so a simpler, online version of Microsoft Word). Word processors aren't made to understand HTML, which an embed code is, so they can't process HTML or display its output. If you pasted your embed code into a Microsoft Word document, nothing would happen—it would just stay as a couple lines of static text. The Text Editor in WordPress, on the other hand, is made to process HTML (and in fact will display a simple HTML version of your page/post if you switch over to it), so that is why the embed code has to go into the Text Editor to work properly.

Back to Tutorials