wordpress: photo galleries

Add galleries to a post

Adding a simple gallery is easy in WordPress. Hopefully you are working on a development site and already know how to add a photo to a post. If not, check out the linked tutorials. It's important that you have a development site to make mistakes while you figure out which settings you want to use. 

Upload photos to a post gallery

Create a new post. Give it a title immediately and save a draft. I'm going to call mine WP gallery.

Click the Insert photo button above the post editor.

insert photos

A new window will open that will allow you to select all of your photos and upload them like we did on the previous page. This time, when you click Save all changes, a new Gallery Settings section appears. Change the settings on the top half of the window to match the image below. Leave the Gallery Settings alone for now.

insert gallery

Now lets examine the Gallery Settings.

  • Link thumbnails to: Image file opens the large image in a blank browser window. Attachment page opens the image in a new page that look like part of your site. 
  • Order images by: Choose Menu order to use the order created by dragging.
  • Order: Changing from Ascending to Descending will reverse the order of your gallery.
  • Gallery columns: Indicates the number of thumbnails in each row.

Adjust your settings to match the image above and click Insert gallery to return to the post. Save the draft immediately.

Take a quick detour

If you look the Media Library, you will see that the images are all attached to the post WP gallery.

media library gallery

 

How the gallery appears in the post editor.

Return to the post and make sure the editor is in Visual mode, you'll see something that indicates a gallery has been inserted. It looks like this: 

gallery post visual mode

Now switch to HTML mode. You'll see text that says [gallery]

gallery post html mode

This is called a short code and is specific to WordPress. When you insert this code into a page or post, WordPress knows to make a gallery out of all the images attached to the post. Preview your post and it should look similar to this:

gallery post

 

If you click a thumbnail image, the full image opens in a new, themed page. 

photo page

Click the image for a larger version

Notice how your site's furniture appears around the image. This means that if you have advertising in your header, you'll get page views every time a photo is viewed. You can change the design by editing the templates and CSS.

Next we'll add a plugin to customize our photo galleries.