Note: This tutorial covers the gallery functionality for WordPress versions prior to WordPress 3.5. The new interface adopted since 3.5 has a number of differences and some new capabilities, such as the ability to place multiple galleries on a page.

Putting together attractive presentations of graphic elements is an important part of making posts that visitors will enjoy and find useful. Sometimes you might want to add a gallery of images to a post, but trying to align them and present them in a uniform way using the WordPress post editor can be difficult, particularly if you want to show more than a few images. That’s the time to use the “gallery” function. In this tutorial, we’ll walk your through the steps for adding a gallery to your posts. For an even more comprehensive tutorial, you can check out the Support Images Gallery Tutorial on the official WordPress Codex, which has a vast amount of information for WordPress users.

Note: You should keep in mind that the gallery that you create will make use of the “thumbnail” size for each gallery image. The default “thumbnail” dimensions are set in the Settings tab under Media.

Let’s get started…

Step 1: Go to the post or page editing screen for either an existing post or page or a new post or page.

Step 2: Use the cursor to select where you want to insert the gallery, then use the “Add an Image” button to upload images from your computer that you want to include in the gallery.

Note: A word about attachments. When you insert an image directly into a post, the  image is automatically “attached” to that particular post, which means that it won’t be available for use in other galleries if it’s selected from the Media Library. That’s why we suggest that you upload your gallery images directly from your computer. Alternately, if you upload an image to the Media Library and don’t insert it in another post, you can “attach” it to the post you’re working on. Featured Images will also be brought in as part of the gallery, as will any images that you upload later for placement on the page; this results in having duplicate images. To avoid this, you can “attach” or include those images previously in another post–one that you don’t publish–then add the images to the post or Featured Image from the Media Library.

Step 3: Once your gallery images have been uploaded, choose the “Save all changes” option, and you’ll see that a new gallery has been created, which includes all the images you uploaded. You’ll also see a new section of the control panel entitled Gallery Settings

Step 4: The Gallery Settings allow you to decide how your gallery will be presented on the page. Here are the options:

  1. Link thumbnails to: Image File  or  Attachment Page
  2. Order images by: Menu order, Title, Date/Time, Random
  3. Order: Ascending or Descending
  4. Gallery Columns: 2 to 9
  5. Update gallery settings

Let’s cover each option in more detail.

Link thumbnails: The “Link thumbnails” setting asks where the thumbnails should link to if someone clicks on the image. The default is “Image File” which will just show the image by itself in the upper left corner of the browser window at the full size that it was imported. For Applied Imagination Media’s bizblog clients, the “Attachment Page” setting displays the image in the center of a prebuilt gallery page along with thumbnails of the previous and next images from the gallery. This is a more attractive option. If your theme doesn’t have an attachment page, however, the image will be displayed just as if the image was a single post.

Order images by:  This option lets you order how the images are displayed by Title (alphabetically), Menu Order (the order in which they appear in the menu, which you can change by placing a number in the box beneath the label “Actions”), Date/Time (when they were uploaded), or randomly. Once you’ve changed the image order, click on “Save all changes”, then click on “Update Gallery Settings.”

You can also order by Ascending (lowest to highest) or Descending (highest to lowest) depending on the “order by” selection previously made.

Gallery Columns: You  can also choose to display the gallery thumbnail images in one to nine columns spanning the width of the page. Depending on the thumbnail’s width and the width of the display area on your post page, you might find that you’ve chosen too many columns for the space. Check out the results using your “Preview” button before publishing the post.

Update gallery settings is the final option, and it pretty much does what it says. After making your gallery selections, click this button to update and save the settings.

Step 5: Back on the post edit screen, you’ll now see a blue box representing the gallery in the space it will appear on the page. You can access the Gallery Settings to make changes by clicking on the upper left corner of the gallery box then clicking on the Edit Gallery image icon. By clicking on the red slashed circle, you can delete the gallery.

Step 6: You can add additional post text and elements either above or below the gallery.

Step 7: Be sure to Publish or Update the post after making changes.

Once published, your gallery will appear as a set of thumbnails. If you’ve added captions to the images, they will appear beneath the image.

We hope this tutorial helps you put together some great posts!