Instructions on how to use the native WordPress gallery, and how to combine it with gallery post formats

1. Adding a Photo Gallery to a WordPress Post or Page
Inserting one photo at a time when writing a WordPress post is pretty straightforward, but what if you
want to add a whole collection of photos? Suppose you’re taking a trip around the world and you’ve set
up your blog to chronicle your travels, and in each post you want to include a dozen shots of the city you
visited that day?
The good news is that WordPress has gallery features built in, so you don’t even need a plugin to add a
basic photo gallery to a post or page.
The bad news is that it requires more steps than adding a single photo. In fact, if you’re not used to
WordPress, the latest features to help you display galleries might just make things more confusing for
you. (The WordPress development team knows it needs to work on media, but hasn’t had a chance to
tackle that yet. Improvements are in the pipeline.)
Meanwhile, WordPress galleries aren’t really that difficult once you get used to them, and there are
some great plugins and themes to allow you to add some spectacular effects. Here are the steps to
insert a no-frills photo gallery without adding any plugins.
1. Open the edit screen for the post or page where you want to insert the gallery. You can create a
new post, or add the gallery to an existing post.
2. Position your cursor where you want the gallery to appear. Moving galleries after you insert
them is more trouble than putting them in the right place to start with.
3. Click the Insert Image button at the top left of the post/page editing area.
1
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

2. 4. Click the From Computer tab to upload the images for your gallery.
5. Select and upload multiple images at once.
2
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

3. (Windows users can select non-consecutive images by holding down the CTRL key while clicking
the icons; Mac users can do the same with the CMD key. To select consecutive images, hold
down the SHIFT key.) Click Open when you’ve finished selecting images.
Tip: If you really are traveling around the world, uploading photos from your camera in
an Internet café anywhere but Japan or South Korea can be pretty time-consuming.
These days, even point-and-shoot cameras boast resolutions of 12 megapixels or more.
That’s a 4000 x 3000 pixel image: each JPG file will be 2.5 MB. A set of them will take
forever to upload over patchy hotel wi-fi or the satellite connection in that Mexican
café.
If you don’t plan to print the photos when you get home, go into your camera settings
and set your photo size and quality below the maximum. An image size of 1600 or even
1200 pixels on the longest edge is plenty for a website.
6. Wait until WordPress has finished “crunching” the files and click the Save All Changes button at
the bottom of the list of images.
3
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

4. Power Users’ Clinic: Add Titles and Descriptions to Gallery Images
For bonus points, after you click “Save all changes”, click “Show” next to each image and fill in each
image’s title, alternate text, caption, and description. Then Save all changes again. Giving the images
titles that mean something to you helps the search engines find you and it helps screen readers for
the visually impaired. And it will help you, too, when you’re going through your media library trying
to find a particular photo.
4
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

5. 7. After you click “Save all changes”, the Gallery tab appears at the top of the Add an Image dialog
box. From now on, whenever you click the Add an Image button for that post, you’ll see the
Gallery tab between From URL and Media Library. That tab only appears in posts that have had
galleries inserted. The number in parentheses after the word “Gallery” shows how many images
are in the gallery.
8. Choose your Gallery Settings from the options below the list of images in the gallery. This is
where you decide what order to put the pictures in and how many columns your gallery should
have.
If your gallery is going to appear on a page with a sidebar and you use the standard 150 x 150
pixel thumbnail size, you won’t be able to fit more than three images across. But if you use a
full-width page for your galleries, or a smaller thumbnail size, you can have five or six columns of
photos.
Note: to change the size of your image thumbnails, go to Settings  Media.
In addition to the built-in options to sort the images by Menu Order, Date/Time, Title, and
Random, you can manually order your images by numbering them in the boxes in the Actions
column and clicking “Save all changes” again.
The final option is whether to link the thumbnails to the original image file or to the attachment
page. If you’ve filled in an image description or want people to be able to submit comments on a
particular image, then it’s best to link to the attachment page. Lightbox and slideshow plugins
tend to override this option, but some will display the descriptions from the attachment page.
5
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

6. 9. When you’re happy with your settings, click the Insert gallery button.
Once you click the button, a gallery placeholder appears in your post editor window. If you’re
using the visual editor, the gallery placeholder looks like this:
6
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

7. If you’re using the HTML editor, the gallery placeholder looks like this:
What you’re looking at is called a gallery shortcode. (A “shortcode” is a command in square
brackets that substitutes for HTML or PHP.) If you need to move your gallery around in your
post, the easiest way is to switch to the HTML editor and cut and paste that shortcode.
10. If your theme supports post formats, toggle the “Gallery” radio button on. That way your gallery
can take advantage of any special design features your theme has for galleries.
7
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

8. WordPress introduced post formats in 2011 with WordPress 3.1. They’re designed to
help display certain kinds of content in special ways, much the way Tumblr does.
Older themes may not support post formats, or may support them in a different way. The
Coraline theme from Automattic supports Gallery and Aside post formats, but you have to
designate categories in the theme options in order to use them. If you’re inserting a gallery in
the Coraline theme, be sure to choose the right category.
If your theme doesn’t support post formats, don’t worry. The gallery itself will display just fine.
The main difference will be in the way the post excerpt appears on the blog index page.
8
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

9. 11. And now for the last crucial step: publish the post or page.
Your gallery post appears as a grid of neatly arranged thumbnails.
9
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

10. The actual galleries appear much the same in Coraline (above) and Twenty Eleven (below).
So What Does the Gallery Post Format Do?
If WordPress galleries themselves look the same in themes that support the gallery post format and
those that don’t, what does the gallery post format actually do?
First, it gives the designer the opportunity to make the rest of the post look different from other kinds of
posts—making it a full-width post where a standard post has a sidebar, for instance, or giving it a
particular background color.
Second, it changes the way the post appears in the blog index (the home page). The themes used for the
screenshots above both show post excerpts in the blog index. For a standard post, the excerpt is just a
few lines of unformatted text. That wouldn’t work very well for a gallery, so a gallery post excerpt is set
up to work a little differently.
“Coraline” and “Twenty Eleven” both represent gallery posts with a single thumbnail image and tell you
how many images are in the gallery, but the Coraline excerpt has a box around it and a link to “more
galleries.” The Twenty Eleven excerpt has a label above it saying “Gallery.” Those differences are design
choices made by the theme developers.
10
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

11. Coraline Gallery Post Excerpt 1
Twenty Eleven Gallery Post Excerpt 1
If galleries are important to you, check out the way a theme handles the gallery post format in the demo
before you decide to use it. Sure, you can hack the CSS in the stylesheet or install a plugin to change it,
11
but the better it works in the first place, the better off you are.
Page
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch

12. Power Users’ Clinic: Gallery Shortcodes
In earlier versions of WordPress, the only way to insert a gallery was with the shortcode [gallery].
Used by itself (you can type it into either the visual editor or the HTML editor), the [gallery]
shortcode will display a gallery of all images attached to that post or page.
But you can do more, because shortcodes come with options. In fact, the [gallery] shortcode comes
with more options than you have when you insert a gallery through the file upload screen. The
options associated with the [gallery] shortcode are:
 columns: number of columns in the gallery.
 id: ID of the post whose images you want to display. It does not have to be the post you’re
putting the gallery into. You can find the post ID by hovering over the post title in the All
Posts list and looking down into the lower left corner. You’ll see a small popup that says
something like “http://your.domain.com/wp-admin/post.php?post=ID&action=edit,” except
there will be a number after the “post=” instead of the word “ID”. That’s the post ID
number.
 size: the image size to use for the thumbnail grid: thumbnail, medium, large, or full. The
default is “thumbnail.”
 orderby: the criterion for ordering images. The choices are menu_order, date, title, ID, and
RAND.
 order: ASC (ascending) or DESC (descending).
 link: determines whether the thumbnails link to full-size images (file) or attachment pages
(attachment).
 include: tells the gallery to include specific attachment (image) IDs. You find these by going
into the WordPress Media Library and hovering over the image title. A popup appears in the
lower left corner of the browser, the same way it did to show you the post ID.
 exclude: tells the gallery to exclude specific attachment (image) IDs. You can use either the
“include” or the “exclude” option in one shortcode, but not both.
So if you wanted to insert a gallery that used a single column of large images, ordered by ID, and
including attachments 17, 18, 19, 25, 26, 27, 34, 35, 36 (from three different posts), the shortcode
would look like this:
[gallery columns="1" size="large" orderby="ID" order="ASC" link="attachment"
include="17, 18, 19, 25, 26, 27, 34, 35, 36"]
And then there are the really geeky options that probably won’t be of interest to anyone but theme
designers:
 itemtag: the type of (X)HTML tag used to enclose each item in the gallery. The default is
“dl”, which is “definition list.”
 icontag: the tag used to enclose each thumbnail image. The default is “dt”, or “definition
term.”
 captiontag: the tag used to enclose the caption for each thumbnail. The default is “dd” or
“definition definition.”
12
A designer might want to change these if definition lists are going to be important in the theme, but
Page
ordinary people can safely ignore them.
Sallie Goetsch sallie@wpfangirl.com t: @salliegoetsch