Embedding Rich Media in WordPress Posts

WordPress has excellent support for rich media content out of the box. With recent versions, you no longer need plugins or code to enable support for most common types of media, ranging from images and audio to embedded YouTube videos or even tweets. Media embeds fall into two general categories: local media and external embeds, using technology called “oEmbed.” In this post, I’ll go through the techniques for adding different types of media

Local Media – Images, Audio, and Documents

Local media refers to content that is hosted directly on your site and its web server. Rather than relying on a third-party source to host your content, WordPress enables you to keep it directly on your site giving you full control and ownership.

To add local media, you canadd-media-button upload files from your computer. Start by clicking the “Add Media” button at the top of the post, then go to “upload files” to add files to your media library. From your media library, you can insert content into your posts and pages.

Images

Images are the most common type of rich media on the web. Accordingly, WordPress has a shortcut for uploading rich media without even clicking add media – just drag & drop!

drag-drop-images

Once an image is inserted into a post, you can align it left or right so that text wraps around it, or make it full width. Use the handles on the corners of an image to resize it, and click the pencil icon to edit it or add a caption. You can also set some of these options when you first insert the image – in particular, pay attention to the image size option (it should usually be either small or medium, not full).

Top ↑

Galleries

When you’re inserting more than one image at a time, you can also create a gallery rather than inserting a long list of images. Different themes will generally display galleries differently, but they’re typically in a grid view, where you can choose the number of columns and size of the images. The Jetpack plugin also has some cool options for displaying galleries differently. To insert a gallery, go to add media, then create a gallery. From here you can upload files and choose from existing ones:

create-gallery

When you upload images for the gallery, be sure to title and caption them, as most themes will display captions. Here’s what that gallery looks like on our site:

Top ↑

Audio

You can upload mp3s or other audio files directly within WordPress, rather than using a third-party service like SoundCloud. As with images, go to add media and drop in your file(s). You can even create a playlist with multiple audio files, all directly within WordPress!

insert-audio-with-player

Here’s what the built-in audio player looks like on our site:

Top ↑

Documents

WordPress can support virtually any file types depending on your hosting environment, but things like word documents or powerpoint presentations should generally be avoided. Instead, save these as PDFs before uploading. These file types will typically display with a link to open/download the file, but plugins may be available to let your visitors see the content directly on your site.

Top ↑

oEmbed – Embedding from Third-Party Sources

The oEmbed API lets you insert rich media from third-party sources simply by copying and pasting a URL on its own line into a post. This works for sites like YouTube, Twitter, Instagram, SoundCloud, and more. Here’s a video demo:

Here’s an embedded tweet:

Here’s an Instagram post:

And finally, a SoundCloud embed:

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.