How To Use The WordPress Media Library

In WordPress you can upload, store, and display a variety of file types (media) into your site’s content.

The most common file types are images, videos and audio files, but you can also use other file types such as PDF document files, spreadsheet files, code samples, etc.

Typically, you will upload and insert media into your content when writing a Post or writing a Page.

Adding media to the WordPress Media Library allows you to upload photos and create image galleries usingan interface that makes uploading files and placing them into your posts and pages very easy.

Additionally, you can create image galleries very quickly with drag and drop reordering, inline caption editing, and simplified controls for layout, amongst other things.

In this tutorial you are going to learn how to use the feature.

Note: Some settings such as specifying the size of thumbnail images and options for the location and structure of the upload directory (where your media files are stored) are controlled in the Media Settings section.

Watch the video below and then complete the step-by-step tutorial to learn more about using the WordPress media library …

How To Use The WordPress Media Library: Step-By-Step Tutorial

You can upload and store various types of media files in your WordPress Library …

You can also upload files to your site without creating a post or page first. This allows you to upload files to use with posts and pages later and/or get a web link to a particular file that you can share.

To view all the files in your WordPress site’s Library, go to your navigation menu and click on Media > Library…

This brings up the Library screen ….

A table listing all of your files will display in the Library screen. In a later section of this tutorial we will cover all the features available in this section.

If you have not added any files to your Library, you will see an empty table …

How To Add Media Files To Your WordPress Media Library

To add files to your WordPress site’s Library, go to your navigation menu and click on Media > Add New…

You can also add new files by clicking on the Add New button in your Library screen …

A new screen called Upload New Media opens up containing the WordPress Uploader functions …

There are three options you can use to upload files to your site:

1) Drag-And-Drop: You can add multiple files to your Library by selecting a group of files and dragging them into the Drop files here area surrounded by the dashed border.

2) Select Files: This opens a window that lets you select a folder in your hard drive and upload files from your computer.

3) You can also use the Browser Uploader if you experience any problems using the multi-file uploader…

Note: the maximum upload size for your files is determined by your web hosting account settings. In the example screenshot above, the Maximum upload file size is showing as 64MB (MegaBytes). Your screen may show a different maximum limit.

If you are experiencing problems uploading files to your WordPress site, your limit size may be set too low. You could use an image editing application to resize the image, but it’s best to ask your web hosting company to increase your file upload settings, or see this tutorial: How To Increase The Maximum File Upload Size In WordPress

Let’s go through each of the file upload methods now …

Drop files here – Drag-and-Drop method

The drag-and-drop method is useful if you want to upload multiple files located in the same source folder. However, you can also use it to upload a single image.

Make sure that both the Upload New screen and the folder containing your image files are open and visible on your screen (you may have to resize their windows on your browser to see both of them at once).

Next select a single image, or multiple images by holding down the Shift or the CTRL button, then drag your selected files from your folder into the blue dotted area of the Upload New screen (in the Drop files here section) and release your mouse …

If you have selected multiple files, these will begin uploading …

Once your files have been uploaded, they will display in your Library …

Select Files Method

This method allows you to search for the location of your files (e.g. in your hard drive), then upload one or multiple files.

Click on Select Files in the Uploader, and locate the folder containing your files, then …
Select one or more files to upload and click Open in the File Upload window …

Selecting the file(s) you want to upload and clicking Open activates a progress bar on the Upload New Media screen …

You can also use this method to upload different media file types (e.g. audio and video files) from different folder locations on your hard drive.

Selected files are placed in a queue waiting to be uploaded …

Using The Browser Uploader Method

If you experience any problems uploading your files using the previous methods, then try using the browser uploader instead.

After clicking on the browser uploader link, a new screen appears. Click the Browser button, then locate the file you want to upload and click on the Upload button to import your file …

Click on Switch to the multi-file uploader to exit the browse uploader and return to the multi-file uploader …

Attaching Media Files To Posts And Pages

Typically, there are two ways to upload media to WordPress:

You can upload files into a Post or Page while creating or editing your Post or Page
You can upload files that is not related to a Post or Page yet.

If a file is uploaded within the edit screen of a post or page, it will automatically be attached to that post or page.

If a file is uploaded via the Library, then the file(s) will be unattached. The file(s) may become attached to a post or page when inserted into a post or page later, but you can also attach unattached items directly inside the Library feature …

For example, here is a screenshot of an image that was uploaded via the Library and that is currently unattached to any page or post …

Clicking on the Uploaded to > Attach link associated with an unattached file brings up a screen that allows you to associate the file with a page or post …

To do this, search for the page or post you want to attach the file to, the select it from the list and click the Select button …

Your image will now be attached to your selected post or page and will show up as part of that post’s or page’s image gallery (see this tutorial to learn How To Insert And Format Images Into WordPress Posts Or Pages) …

Note: Media items are also “Posts” in their own right and can be displayed as such .

If the parent post of an attached media item is deleted, the item will become attached to the deleted post’s parent if it exists. If no parent post exists, the item will become unattached and available for re-attachment to another post or page.

Editing Media Files In The WordPress Media Library

Once a item is uploaded to the WordPress Media Library, it can be edited.

You can edit the item by hovering your mouse over it and clicking on the Edit link…

You can also edit the item by clicking on its file name and thumbnail image …

Uploaded media such as Videos, Audios, PDF documents, etc… allow you to edit features such as your File Title, Caption and Description …

Image files, on the other hand, offer far greater editing options than other media types …

We have created a separate tutorial on how to edit images in the WordPress Media Library.

Deleting Media Files From The WordPress Media Library

To permanently delete an item from the Library, hover your mouse over the item you want to delete and click on the Delete Permanently link …

Your media item will be permanently deleted …

See the Filtering Options section further below for instructions on how to delete multiple files.

Viewing Items Uploaded To The WordPress Media Library

You can view items you have uploaded to the WordPress Library by hovering your mouse over the item and clicking on the View link …

The item will be displayed as a separate post …

Additional Information – Table Of Media

Library items are displayed in a table, with all of your media items listed by row, and the newest uploaded item listed first …

The Table of Media contains the following columns:

[ ] – Check the box to select an item. Selected items can be processed by a Bulk Action.

Thumbnail – A thumbnail image of the item is displayed in this column.

File – This column displays the name of the file (Note: this is not the same as the filename of the uploaded media) …

The file’s type (e.g TXT, PNG, JPG, PDF) is displayed below the file’s name …

Author – This column lists the user who uploaded the item, or the file’s assigned author. Note: Files can be assigned a different author than the user who uploaded the file. See this tutorial for details on how to change authors for files.

Uploaded to – This column displays whether a file is unattached, or the Post or Page the file is attached to and the date of that Post or Page. Click on the title of the Post or Page to view that Post or Page in an edit Screen. If a media file is unattached, an “Attach” link will appear allowing the file to be attached to selected Posts or Pages.

Comment Bubble – This column displays the number of comments a file has received …

Date – This column displays the time or date the file was uploaded.

Sort the Columns

The column headings in the Table of Media can be clicked to sort items in ascending or descending order.

Hover over the column title (e.g. File), and the up arrow or down arrow will display. Click the heading to change the sort order of your media files …

Media Library Page Navigation

The number of items uploaded to your Library is displayed in the Table of Media, as well as the number of pages (if there is more than one page of media uploaded).

You can use the navigation arrows to skip to the first or last page, or to move backwards or forwards one page at a time. Also, you can enter a page number in the box showing the current page number to go directly to that page …

You can also specify the number of media items to display per page (see next section below).

Media Library Screen Options

The Screen Options allow you to choose which columns are displayed, or not displayed, in the Table of Media.

Click the Screen Options tab on the top right-hand corner of your Library screen …

A list of columns is displayed with a check-box next to each column. Check the box for each column that you want displayed in the Table of Media, or uncheck the box to hide that column.

You can also specify the number of items to display per page in the Table of Media. Remember to click the Apply button when finished to apply your new settings …

Click the Screen Options tab to close the Screen Options box.

Search Media

Above the Table, to the right, is a search box where you can enter one or more search terms and click the Search Media button to search and display all the files that include your search terms …

Your search results are displayed in the Table of Media …

Note: Click All in the Library menu to reset your page and display all files in the Table of Media …

Filtering Options

At the top of the Media Library screen are links such as All, Images, Audio, Video, Unattached, etc. that allow you to display only media files of that type in the Table of Media when the link is clicked …

Below these links are the Bulk Actions drop-down menu, Apply button, Show all dates drop-down menu and the Filter button …

Bulk Actions Drop-Down Menu – You can perform Bulk Actions on one or more media files selected in the Table of Media.Current;y, the only Bulk Action allowed for media files is to permanently delete all selected files.

To use the Bulk Actions filter, (1) select the checkbox(es) for all media files you want to delete. Do this by ticking each box individually, or click on the column header checkbox to select all media files (unchecking the header or footer title bar checkbox will cause all entries in the table to be unchecked), then (2) select Delete Permanently from the Bulk Actions drop-down menu,and (3) click the Apply button …

Show all Dates – This dropdown allows you to select which media files are displayed in the Table of Media by date. By default, “Show all dates” is selected and all of your files are displayed.

To filter media files by upload date, (1) select one of the available dates from the Show all dates drop-down menu, and (2) click on the Filter button to apply the filter selection …

Plugins

If you plan to use media frequently, there are a number of plugins you can add to your WordPress site to enhance your Library functionality and help you better manage and organize your uploaded media, like Media Library Assistant …

Go here for a tutorial on how to use plugins to enhance your Media Library: How To Enhance Your Media Library

Congratulations! Now you know how to use the WordPress Media Library.

WordPress is huge and can sometimes be overwhelming about where to start. As you move on to the next Page, you will have a clearer picture of where to start and progress to building a professional WordPress Site.

Looking through the WordPress Media Library https

WordPress Media Library https

As well as adding text, images and videos into your content, you can also insert audio files into your WordPress posts and pages.

This lets your visitors listen to (and/or download) audio-based content such as interviews, song previews, narrated articles, podcasts, lectures, seminars, classes and more. It also helps your site to engage better with your visitors, and keeps them longer on your pages.

You can add downloadable audio files to your WordPress site, or you can embed an audio player that lets your visitors listen to audio files while on your site … or both!

WordPress Media Library https

In this tutorial, you will learn how to insert playable audio files into your posts and pages and how to add downloadable audio files to your site.

Watch the video below and then complete the step-by-step tutorial to learn more about adding audio to WordPress …

How To Add Audio Files To Your WordPress Site: Step-By-Step Tutorial

WordPress provides a Media Uploader feature by default that allows you to easily upload media files such as images, videos and audio files to your WordPress site …

In WordPress Version 3.6, WordPress introduced the audio shortcode …

To embed an audio file into a WordPress post or page, just add the audio URL inside the audio shortcode as shown below, then publish …

You can add additional information such as fallbacks for other HTML5-supported filetypes ….

The WordPress Media Library lets you add audio files to your site.

From version 3.6, the option to embed an audio has also been added to the Media Library …

To embed an audio into your post, select Upload Files (1) and select your audio file (2) …

Your audio will then begin uploading …

Once your audio file has uploaded, select the file you want to insert into your post or page (optional: add or modify the file’s caption or description if you want) …

WordPress Media Library https

Choose Embed Media Player from the “Embed or Link:” drop-down menu and click on the Insert into post button …

The audio will be embedded into your post using the Audio shortcode …

Just publish your post or page and the audio will display on your site, ready to play …

How To Insert Audio In Earlier WordPress Versions

In earlier versions (e.g. v 3.5) WordPress did not not come with a default media player for playing audio files.

If you are using an earlier version of WordPress, then search online and you will find a number of plugins that allow you to embed audio files into WordPress. Refer to the section further below where we go through some of these plugins.

For now, let’s take a look at how to upload an MP3 audio file in WordPress using the default WordPress Media Uploader and then go through the process of embedding the audio file into a WordPress post or page using a simple plugin and a neat feature of WordPress called oEmbed.

oEmbed allows you to autoembed certain files into a post or page (e.g. a YouTube video) simply by adding the URL in a line of its own with no hyperlinks (i.e. the URL should not be clickable when viewing the post).

The WordPress oEmbed library currently supports a number of popular audio services like Rdio, SoundCloud, Spotify, etc. For the full list of services supported go here:

http://codex.wordpress.org/Embeds

Embedding MP3 Audio Files in WordPress

First, make sure that you have the audio file you want to add to your WordPress site ready to upload, then Click on the Add Media button …

Next, upload the audio file from your computer. You can upload files in mp3, ogg, and wav formats. If you need help using the WordPress Media Uploader, this tutorial …

Once your file has been uploaded, go to your Media Library, then locate the file you want to insert into your content and click on Edit …

In the Save section, select and highlight the File URL (1), then right-click with your mouse on your selection and copy the URL to your clipboard (2) …

Note: if you are currently working on a post or page and have already previously uploaded your media files, then do this instead:

Click on the Add Media button …

Select Audio from the Insert Media > Media Library drop down menu …

Select the file you want to insert into your content and copy the URL of the file to your clipboard …

Once you have copied the audio file URL to your clipboard, open up a new plain text file (e.g. Notepad), and paste the URL from your clipboard into this file …

You will need this URL later. For now, just minimize the text file and move onto the next step.

The next step is to download, install and activate a WordPress plugin called oEmbed HTML5 audio.

All you need to do for this plugin to work is install and activate it …

This plugin converts URLs of audio files (MP3, OGG, WAV) into HTML5 audio and embeds it into posts and pages using the oEmbed technology that is used by WordPress. Audio files are embeded using HTML5 audio tag, with a Flash-based backup player for MP3 format for browsers that don’t support either HTML5 or MP3 format.

After installing and activating the plugin, bring up the text file that you created in the previous step, and copy the file URL back to your clipboard …

Open up the post or page where you want to insert your audio file into, and make sure that you are in the Visual editor mode. Scroll down your content and create a new line where you want your audio player to appear, then place a string of characters to mark this location (e.g. @@@@@@@@) …

Next, switch to the Text editor, then find and highlight the string of characters you have used as a “marker” …

Note: make sure that you select all of the line where you have added your markers. The audio URL must be placed in its own separate line with no surrounding characters. This also includes no hyperlinks!

WordPress Media Library https

Paste the URL of the audio file’s location over the highlighted characters …

After publishing your post or page, the audio player should display in the location where you have inserted the code …

Remembers to click on the PLAY button and test to make sure that you have set up everything correctly …

Note: Depending on the browser type and version used by your visitors, your audio player might display differently. Below are screenshots of the same audio player viewed on different browsers.

Here is a screenshot taken of the audio player in the Google Chrome browser …

Here’s how the audio player looks in the Internet Explorer browser …

This is how the audio player displays in the Firefox browser …

Notes: If the browser does not support the HTML5 and/or the MP3 format, then a Flash based audio player will be used instead. The flash fallback method seems to work fine for most internet browsers and platforms.

Audio Player Plugins For WordPress

Some plugins allow you a little more customization than the one we have used earlier in the tutorial. Below is a list of free audio player plugins for WordPress that you may want to look at:

CP Media Player

With CP Media Player you can publish files in the following formats: MP4, OGG, WebM, WMV, MP3, WAV, WMA and WebSRT subtitle files. This plugin is based on MediaElement.js which guarantees support for all browsers that implement the HTML5 standard. For older browsers, it supports Flash and Silverlight. CP Media Player also allows you to associate a playlist to your media player and change the look of the player to match the design of your site as closely as possible.

Some of the plugin’s main features include:

Publish an Audio player and Video player anywhere
Support for audio and video files: MP4, OGG, WebM, WMV, MP3, WAV, WMA
Support WebSRT subtitle files
Allow playlist
Supported by web browser: IE, Firefox, Chrome, Safari, Opera
Supported by mobile devices: iPhone, iPad and Android devices

WP Audio Player

WP Audio Player introduces a meta box to each post that allows you to supply the URL to any audio file and will then append the player to the end of the post. This way, you can upload your media using the WordPress built-in Media Uploader, and then use the file’s URL to add the player to your posts.

HTML5 Audio

This plugin lets you use simple functions in your theme to display audio you have attached to Posts/Pages/Custom Post Types in your Media Library. Your player is styled 100% with CSS/images (if you want). Your audio player uses your browser’s native HTML5 capabilities when available with a fallback to Flash when necessary. Allows you to play audio inline on mobile browsers that support HTML5 Audio.

Another WordPress plugin you may want to look at if you plan on adding podcasts to your WordPress site is the Blubrry PowerPress Podcasting plugin…

This plugin lets you add essential features for podcasting to WordPress and offers full iTunes support, web audio/video media players and more.

Adding Downloadable Audio Files To WordPress

Depending on your business or the topic of your blog, you may want to share your audio files with your audience. If you want to let visitors to download your audio files instead of simply allowing them to listen to audios on your site, then here’s a simple way to do it:

First, make sure that you have already uploaded the audio file to your WordPress site, or a remote server location …

Next, open up the post or page where you want to insert the download link to your audio file. With the Visual Editor tab selected, click on the location in your content where you want to add your file download link to place a blinking cursor (1), then click on the Add Media button (2) …

Select the audio file you want to insert into your post or page and click on the Insert into post button (note: make sure that Media File is selected in the Link To drop down menu in the ATTACHMENT DISPLAY SETTINGS section) …

This places a link to the media file into your content …

After publishing your post or page, anyone will be able to download your audio file by right-clicking on the link and choosing “Save Link As …“

WordPress Audio – Useful Tips

Tip #1: It’s a good idea to add some helpful text for visitors, so they will know what to do to download your audio file …

Tip #2: You can store your audio files in a remote server (e.g. Amazon S3) as .zip files and create graphic “download” buttons instead of using direct links to your media files.

Tip #3: Adding direct links to media files does not allow you to monitor information about your downloads. For a tutorial where we explain how to manage, track and control your file downloads in WordPress go here: How To Manage Downloadable Files In WordPress

Additional Information

Some mobile platforms may not display certain video and audio players.
Uploading your audio files to your own server using the WordPress Media Uploader is fine, but it can lead to your bandwidth being consumed very quickly if your audio becomes popular. For example, if the size of your audio file is 10MB and 1,000 people listen to it, that’s 10 GB of bandwidth being consumed.
If you plan to add a lot of media to your WordPress site (e.g. videos and audios), a better solution is to upload your files to a remote storage location such as Dropbox or Amazon S3, then simply copy the links of the files and paste these into your posts.
If you plan to use audio extensively on your site or share music online, then consider signing up either for a free or premium account with SoundCloud – a service created specifically for sharing music and audio online …

SoundCloud is like a YouTube for audio files. You can upload your audios to your SoundCloud account and then embed your files as single files or entire sets (e.g. a lecture series).

Additionally, if you plan to use SoundCloud, you can download a plugin called SoundCloud Is Gold, which is useful if you want to avoid embedding audio codes manually into your posts. It also lets you customize your audio player and choose the tracks you want to play …