Adding Images and Other Media

Adding images and other media files such as videos, documents or PDFs is extremely easy within WordPress. All your images and files are stored in the Media Library. Once they’re uploaded into the Media Library, it’s a very simple matter to insert them into your Page or Post content. In the case of files such as Word Documents or PDFs, if necessary, it’s a simple process to create links to those files so that people can then download them.

Inserting an Image

Using the WordPress media manager, it’s extremely simple to insert, align and link your individual images and image galleries.

 ) and then simply drag your image(s) from wherever they are on your computer, into the browser window. Your file(s) will be automatically uploaded. Alternatively, click the Select Files button and then select the file(s) that you’d like to upload, using the dialog window that is displayed. It’s also possible to simply drag your image straight into the Visual Editor, rather than clicking the Add Media button.

No matter whether you’ve clicked the Add Media button or simply dragged and dropped your image into the Visual Editor, once your image is uploaded, your Media Library is displayed, which contains all your previously uploaded images. The image(s) that you’ve just uploaded will be automatically ‘selected’ for easy insertion into your Page or Post. Selected images are shown with a ‘tick’ icon in the top right corner of the image. After uploading your image(s), you can then select other previously uploaded images by holding down the Ctrl key (Cmd key on Macs) and simply clicking on them. To deselect an image, click the ‘tick’ in the top right corner of the image. At the bottom of the window you will see a count of the number of images currently selected. There are several options within this Insert Media window to help make it easier to add images into your Page or Post. By default, all previously uploaded images are shown, starting with the most recent uploads. If you’d like to narrow this list down, at the top of the window is a dropdown list that allows you to filter your displayed images by All media items,

items Uploaded to this post/page, or Images, Audio files, Video files or Unattached files. You can also filter your media files by selecting a date, or alternatively, there is also a Search field that allows you to search for specific images.

The properties of the currently highlighted image (i.e. The image with the blue border) will be shown on the right-hand side of the Insert Media window. These properties include the filename, the date the file was uploaded and the image size. It’s at this point you can also change the image Title, Caption, Alt Text and Description for each image, as well as the Alignment, Link and the Size at which the image is inserted.

  • Title - is displayed as a tooltip when the mouse cursor hovers over the image in the browser
  • Caption - is displayed underneath the image as a short description. How this displays will be dependent on the WordPress theme in use at the time. You can also include basic HTML in your captions
  • Alt Text - is displayed when the browser can’t render the image. It’s also used by screen readers for visually impaired users so it’s important to fill out this field with a description of the image. To a small degree, it also plays a part in your website Search Engine Optimisation (SEO). Since search engines can’t ‘read’ images they rely on the Alt Text
  • Description - is usually displayed on the attachment page for the media, however this is entirely up to the theme that is currently in use

For each image, you can select how you would like the image aligned, either Left, Center or Right aligned, using the Alignment dropdown list. You can also select None for no alignment which will mean the image will display using the default alignment setting for your Theme. You can also change what your inserted image(s) will link to using the Link To dropdown list. You have the choice of linking to the image’s attachment page by selecting Attachment Page, or you can link to the full size image by selecting Media File. You can also link to any URL by selecting Custom URL. When you do this, a new field will appear that allows you to enter in the custom URL. You can also choose not to link to anything by selecting None. When your image(s) are uploaded, WordPress will also create several copies of your file at various sizes. You can choose which one you’d like to insert into your Page or Post using the Size dropdown list. To insert the image at the exact size you uploaded, simply select Full Size. Next to each size listed in this dropdown will be the actual dimensions of the image, in pixels (e.g. 300 x 225).

Once you’ve selected all your images, click the Insert into post button to insert the selected image(s) into your Post at the current cursor position (when editing a Page, this button will say Insert into page). If you’d like to change the order of your images, click the Edit Selection link at the bottom of the Insert Media window. The window will change so that only the selected images are shown. Alternatively, clicking the Clear link will deselect all images. After clicking the Edit Selection link at the bottom of the Insert Media window, all the currently selected images are shown. You can change the order in which the images will appear in your Page or Post by clicking and dragging each image to reorder them. You can also update the image Title, Caption, Alt Text and Description for each image. To remove one of your selected images, click the small ‘-’ that appears in the top right corner of the image when you hover your cursor over the tick.

Clicking the Return to library button will take you back to the previous screen that allows you to select or deselect your images.

When you’re editing your Post/Page, if you wish to insert an image that you uploaded earlier (as opposed to uploading a new image), click the Add Media button again (). Once the pop-up window displays, click the Media Library tab at the top of the pop-up window rather than dragging a new file into the upload window. All your previously uploaded images will be displayed, with the most recent ones shown first.

Select the image(s) that you’d like to insert into your Page or Post and then simply click the Insert into post button (or if you’re editing a Page, this button will say Insert into page). As mentioned earlier, you can also click the Edit Selection link at the bottom of the window if you’d like to change the order the images are inserted.

Edit or Delete an Image

There are various options available for adjusting the layout of inserted images. After clicking on an image that has already been inserted into your Page or Post, a small toolbar will appear over the image. By selecting one of the alignment

() allows you to edit the image properties. Clicking () will remove the image from your content. It will only remove the image from your Page or Post, it will not delete the image from your Media Library. When you click on an image in your Page or Post, as well as the alignment, edit and delete icons mentioned above, the image also displays ‘resizing handles’. These are the small squares you see around the edge of the image. To resize your image, simply click and drag one of the corner resize handles. As with any image editing software though, if you try to enlarge a small image, it will tend to get quite pixelated. It’s always best to insert a large image and then resize down.

After clicking the Edit button () the following pop-up window will appear.

The Image Details pop-up window allows you to edit the various image and link properties:

  • Caption - Displayed underneath the image as a short description. How this displays will be dependent on the WordPress theme in use at the time. You can also include basic HTML in your captions

  • Alternative Text - Displayed when the browser can’t render the image. It’s also used by screen readers for visually impaired users so it’s important to fill out this field with a description of the image. To a small degree, it also plays a part in your website Search Engine Optimisation (SEO). Since search engines can’t ‘read’ images they rely on the Alt Text

  • Align - Allows you to select how you would like the image aligned. They can be either Left, Centered or Right aligned. Setting alignment to None will remove the other alignment settings. How this affects your image within your content will depend on the current theme in use

  • Size - Select a specific size from the dropdown list or select ‘Custom Size’ and then enter the Width and Height (in pixels) in the input fields that appear
  • Link To - Select where you would like to link your image to from the dropdown list. You have the choice of linking to the image attachment page by selecting Attachment Page, or you can link to the full size image by selecting Media File. You can also link to any URL by selecting Custom URL. When you do this, a new field will appear that allows you to enter in the custom URL. You can also choose not to link to anything by selecting None
  • Image Title Attribute - Displayed as a tooltip when the mouse cursor hovers over the image in the browser
  • Image CSS Class - By default, WordPress will assign several CSS Classes to your image. If, for some reason, there’s other CSS Classes that you’d like to assign to your image then you can add them into this input field
  • Link Rel - Describes the relationship from the current document to the specified link. More information on the rel HTML attribute can be found on Wikipedia
  • Link CSS Class - If there is a specific CSS Class that needs to be set on the HTML link then you can add it into this input field

Clicking the Edit Original button allows you to perform some simple manipulation with your uploaded image. You’re able to rotate and flip your image as well as scale and crop it to different sizes.

If you’d like to replace the image entirely, click the Replace button and you’ll be shown your Media Library where you can select a new image.

Once you have updated the image properties, click the Update button to save your changes. Alternatively, click the small ‘x’ in the top-right of the pop-up window to close the pop-up without saving any changes.

Setting a Featured Image

Some themes allow you to specify a Featured Image for your Page and Post. A Featured Image, often called a Post/Page Thumbnail, is usually some sort of image that is representative for that particular Page or Post. How these images are displayed is dependent entirely on the Theme that is currently in use. If your Theme allows you to set a Featured Image, the following Featured Image panel will be displayed when you’re editing your Page or Post. If Featured Images can’t be set then this panel won’t be displayed.

Setting your featured image is very similar to adding an image into your Page or Post. After clicking the Set featured image link a pop-up window will display that looks similar to the one that displays when you add an image to your Page/Post. You can upload a new image to use as your Featured Image or you can simply choose from one of your previously uploaded images. By default, you’ll be shown a list of the previously uploaded images. If you’d like to upload a new image, click on the Upload Files link at the top of the pop-up window. After clicking the image you’d like to use as your featured image you can then update the Title, Caption, Alt Text and Description. To set the image as your Featured Image, click the Set featured image button. Your chosen image will then appear in the Featured Image panel.

Insert an Image Gallery

WordPress has its own simple built-in Image Gallery that allows you to add multiple images to a page in one easy step.

To insert an image gallery into your Page/Post, click the Add Media button (). A pop-up window will display that looks the same as the one that displays when you add an image to your Page/Post. You can upload new images to use in your gallery or you can simply choose from your previously uploaded images.

By default, you’ll be shown a list of your previously uploaded images. If you’d like to upload a new image, click on the Upload Files link at the top of the pop-up window.

Click the Create Gallery link in the left-hand navigation then select the images that you’d like to insert into your gallery.

After selecting your images, click the Create a new gallery button at the bottom of the pop-up window. The window will change so that only the selected images are shown.

All the images that appear will be used within your Image Gallery. To reorder the images simply click on an image and drag it to its new position. If you’d like to add captions to your images, click the ‘Caption this image..’. text below each image and then type in your caption. Alternatively, click each image and then update the Title, Caption, Alt Text and Description on the right-hand side of the pop-up window. You can also include basic HTML, such as links, in your captions. If you decide you no longer want a certain image to appear in your gallery, click the small ‘-’ that appears in the top right corner of the image when you hover your cursor over the ‘x’. Since the built-in gallery is quite simple, there aren’t that many options to choose from when setting it up. Link to - This sets what happens when the thumbnail image is clicked. Selecting Media File will open the full size image directly in your browser window. Selecting Attachment Page will open the image within one of your WordPress formatted pages

Columns - Specifies the number of columns to use when displaying your thumbnail images. Ultimately, this will be dependent on your Theme and how wide your page is. If you find the gallery isn’t displaying properly after changing this number you may need to change it to another number Random Order - Click this checkbox to display your images in a random order Size - Selects the size of the image to use in your gallery

Edit or Delete an Image Gallery

Editing or Deleting an Image Gallery is much like editing or deleting an image. After clicking on an Image Gallery that has been inserted into your Page or Post, two icons will appear on top of the gallery. Clicking the Edit button () allows you to edit the image gallery properties. Clicking the Remove button () will delete the image gallery from your content. It will only remove the image gallery from your Page or Post, it will not delete any images from your Media Library.

After clicking the Edit icon you will be shown the same pop-up window and options as when your image gallery was inserted into your Page/Post.

Insert an Audio or Video Playlist

Inserting an audio or video playlist is almost identical to inserting an image gallery. Click the Add Media button (). A pop-up window will display that looks the same as the one that displays when you add an image to your Page/Post. You can upload new media files to use in your playlist or you can simply choose from your previously uploaded files. By default, you’ll be shown a list of your previously uploaded files. If you’d like to upload a new media file, click on the Upload Files link at the top of the pop-up window. To create an audio playlist, click the Create Audio Playlist link in the left-hand navigation. The pop-up window will display a list of your audio files. Alternatively, to create a video playlist, click the Create Video Playlist link in the left-hand navigation. The pop-up window will display a list of your video files.

After selecting your media files, click the Create a new playlist button at the bottom of the pop-up window. The window will change so that only the selected media files are shown.

All the media files that appear will be used within your playlist. To reorder the files simply click on a file and drag it to its new position. You can change the title for each file by clicking the text below each file and then typing in your new title. Alternatively, click each file and then update the Title, Caption and Description on the right-hand side of the pop-up window. If you decide you no longer want a certain media file to appear in your playlist, click the small ‘x’ that appears in the top right corner of the file when you hover your cursor over it. You can change how your playlist appears in your page by selecting which items you’d like to appear.

When inserting an audio playlist you have the following display settings.

Show Tracklist - Ticking this checkbox will show a list of all the audio files within your playlist Show Artist Name in Tracklist - Ticking this checkbox will show the artists name next to each track name Show Images - Ticking this checkbox will show any associated audio file images When inserting a video playlist you have the following display settings. Show Video List - Ticking this checkbox will show a list of all the video files within your playlist Show Images - Ticking this checkbox will show any associated video file images

Inserting Video, Audio or Other File Type

The procedure for inserting any other type of file into your Page/Post is exactly the same as Inserting an Image. Simply click the Add Media button (). Once the relevant pop-up window displays, perform the same steps to upload your file to your site and to insert it into your Page or Post. When inserting video or audio files, you can select Embed Media Player from the Embed or Link dropdown list in the Insert Media pop-up window to use the new audio and video players that are now built into WordPress. Supported audio/video formats include M4a, MP4, OGG, WebM, FLV, WMV, MP3, WAV and WMA files.

!!!caution It’s recommended that you make your filename ‘server friendly’. Make sure the filename has no spaces, apostrophes, slashes or other non- alphanumeric characters (such as $, % and &). Rename the file before uploading if it does. To preserve readability, some people replace spaces with the underline character or hyphen. For instance, My File Name.txt becomes My_File_Name.txt or My-File-Name.txt

Embedding a Video, Image or Other Content

Another way to add video or other content into your pages is through embedding. A popular example of this is embedding a YouTube video into your page. When you’re embedding a file, there’s no need to upload the file to your site. You’re basically just creating a link to the file, from within your own page.

WordPress is able to automatically embed files from a number of different services. To embed something into your Post or Page, simply paste the URL into your content area. The URL needs to be on its own line and not hyperlinked.

When embedding content in this manner (as opposed to using the embed shortcode mentioned below), your url will change to show a preview of that content. For example, when embedding a video from YouTube, after pasting in the URL to the editor, it will magically change to show the actual video content, right there in the editor.

If you’d like to specify the width and height, you can wrap the URL in the [embed] shortcode. Embedding your link using this shortcode does not require the URL to be on its own line. The format for using the shortcode is:

[embed width= “123” height= “456”] *url* [/embed]


WordPress will automatically embed content from the following sites:

  • Animoto
  • blip.tv
  • Cloudup
  • CollegeHumor
  • DailyMotion
  • Flickr
  • FunnyOrDie.com
  • Hulu
  • Imgur
  • Instagram
  • iSnare
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Polldaddy
  • Rdio
  • Reddit Comments
  • ReverbNation
  • Scribd
  • SlideShareSmugMug
  • SoundCloud
  • Spotify
  • TED
  • Tumblr
  • Twitter
  • VideoPress
  • Vimeo
  • Vine
  • WordPress.tv
  • YouTube (only public and “unlisted” videos and playlists)