wordpress: getting started

Adding Media

There are many ways to add images, video, audio, or PDFs to posts or pages in WordPress. Media can either be uploaded directly to your site through the WordPress media manager, or hosted on an external site such as YouTube or Vimeo (for video) or Flickr or Picasa (for images).

In general, we recommend hosting video on external services, for several reasons:

  1. Videos will probably be much larger than the max upload size allowed by your host.
  2. Video can be tricky to compress correctly (with a good size/quality ratio).
  3. Video can consume a lot of disk space to store and a lot of bandwidth to serve. Many hosts have quotas on these resources, and you can exhaust them quickly.

Images, however, should generally be uploaded directly to your site. However, there are some up-sides to using external services like Flickr. For example, these services make it super easy to create sophisticated slideshows, and may help you capture additional "drive by" traffic from those sites.

We'll cover direct uploads first, then the process of embedding externally hosted media.

On the right side of the Post field, there are a series of icons to Add Media to your post. Select the appropriate icon and follow the prompts to upload your content.

Adding an Image

Before you start uploading, place your cursor in the text of the Body field where you want the image to appear. This will save a bit of hassle later on.

Just above the formatting toolbar's icons, look for row of small icons labeled "Upload/Insert."

The first of these icons is for uploading images - click it.

Click Select Files and navigate to the image file you want to upload (you can actually upload multiple files at once, but we'll just work with one for now). Click OK, and you'll be looking at something like this:

Take a moment to study this panel. There's a lot you can do here!

Clicking the Edit button will reveal a sub-panel that lets you crop, scale, rotate, and otherwise manipulate the image itself (though we recommend doing this kind of image editing in Photoshop or iPhoto before uploading).

The Title, Caption, and Description fields are used in different ways by different templates and gallery plugins. You should use these as instructed by documentation or your webmaster.

The Alternate Text field is not displayed on the page, but is present in the HTML. This field is critical for handicapped users who have "screen readers" dictate the web page to them. The Alternate field is also used by search engines, so they have some sense of what the image is about. Remember, Google is the web's largest blind user!

The Link URL field lets you control whether the user can click the image to go elsewhere, and if so, where. Set it to None to make the image not clickable. Setting it to File URL will cause the image to link to a full-size version of the same image in a raw browser window, without your site's design/theme. Clicking Post URL will cause the link to go to an "Attachment page," which is a special WordPress page that hosts a piece of media associated with a story. This is a good choice for showing larger versions of images without losing the "context" of the site.

The Alignment options are pretty straightforward - set this to None, Left, Right or Center to control whether or how text wraps around the image.*

* Note: For these alignment options to work properly, your theme's CSS stylesheet will need to include the following rules. Your web developer can take care of this if your theme isn't aligning images properly:

.aligncenter { display:block; margin-left:auto; margin-right:auto; }
.alignleft { display:block; margin-right:auto; }
.alignright { display:block; margin-left:auto; }

The Size option lets you control the dimensions of the inserted image. When you upload an image, WordPress makes some decisions about whether to also create additional versions of that same image for use in various contexts. If your uploaded image is larger than your theme's content area width, or if you just want to show a small version, select the thumbnail or medium version, with the appropriate linking option as described above. To control the image sizes WordPress will generate, see Settings | Media | Image Sizes.

Finally, click Insert Into Post. The image will be inserted wherever the cursor was in the text when you began the upload process. If the image ends up in the wrong place for some reason, you can simply drag it to the right spot.

If you upload multiple images into a post, WordPress will give you the option to "Insert as Gallery." If you take this option, your images will appear as a small gallery of thumbnails, each of which links to the full-sized image on a separate page. See our WordPress Galleries tutorial for more on this topic.

Re-Using Images

When you first clicked the Upload/Insert icon, you may have noticed three "tabs" across the top - From Computer, From URL, and Media Library. You may also see a "Gallery" tab up there. The Gallery tab, if present, gives you quick access to all images that have been previously added to the current post. The Media Library tab gives you access to everything that's been uploaded to the entire site, ever! If you want to re-use an image you've used in the past, don't re-upload it - just use these tabs to pull it back into your post.


See also: Our tutorial on working with WordPress photo galleries.