A Step-by-Step Guide to Creating & Editing WordPress Galleries

A step by step guide to creating and editing WordPress GalleriesOne of the most challenging lessons we teach in our WordPress Intensive workshop is the WordPress Galleries module.

WordPress comes with gallery functionality built-in. You don’t need a separate gallery plugin.

Often WordPress beginners get frustrated with how many clicks it takes to create a default WordPress gallery and they’re concerned that they won’t remember how to do it when they try on their own.

In this tutorial, we walk you through each click step-by-step.

How do I add a Photo Gallery to a page in WordPress?

A step-by-step guide to creating & editing WordPress image galleriesClick To Tweet

Understanding the WordPress Media Library

The WordPress Media Library stores your images and other media files such as pdfs and audio files.

The Media Library Screen is typically used to view and delete Media previously uploaded. In the Media Library, there are two views: Grid View and List View.

When You Add an Image or Other Media

Upload and insert media in WordPress content directly from a Page/Post. You don’t need to move away from where you’re working.

How to Create an Image Gallery in WordPress

Follow these 9 steps to create and insert a native gallery in WordPress:

  1. Create or Edit the page where you want to display the gallery
  2. Click “Add Media
  3. Upload Files.
TIP: If you want to select images already in the Media Library you can change the dropdown from all images  to display only images Uploaded to this post. This will help narrow down your search.Screenshot WordPress Media Library - Choose images Uploaded to this page

  1. Click Create Gallery (top left corner – see screenshot below)Screenshot Create a Gallery in WordPress
  2. Select  all the images you want in the gallery (tick mark will display)
  3. Screenshot Gallery SettingsBefore clicking the  “create a new gallery” review the image Attachment Details. Be sure to add Alt Text for every image. Alt text will describe images for Screen Readers and Search Engines alike.
  4. Now click “create a new gallery” button at the bottom right (see screenshot above).
  5. On the right side review the Gallery Settings. We suggest changing Link To from Attachment page to Media File, we’ll use this in a moment to create a lightbox effect.
  6. And now for the moment you’ve been waiting for….. click Insert Gallery

Phew!

How to Edit a WordPress Photo Gallery

After inserting a gallery, you can return to edit the gallery by clicking on the image gallery in the WordPress visual editor. When you hover over your gallery, you will see a pencil and an x. The x will delete the gallery and the pencil will open the gallery editing screen.

On the Edit Gallery Screen, you can:

  • Rearrange your images: Drag and Drop image thumbnails to rearrange the order of images in your gallery.
  • Reverse Order: Reverses the order of the images in your gallery.
  • Remove images: Hover over a thumbnail and click on the “X” to remove any of the images you previously selected.
  • Add more images: Click on the “Add to Gallery” in the left-hand sidebar to add more images to your gallery.
  • Links To: Controls whether the gallery thumbnails (on the published page/post) link to the image attachment page or directly to the source image file itself. We suggest linking to the media file.
  • Columns: Set the number of columns – how many thumbnails you want to display across the page.

How to turn a WordPress Photo Gallery into a Slideshow

These plugins transform the WordPress native galleries into more functional and attractive galleries.

  • Foobox lightbox: Install and activate this plugin. If you changed the Gallery Settings to Link To Media File as we suggested in step 8 above. Then this will work out of the box. When someone clicks on a thumbnail in the page the image will open larger with arrows to navigate between images. NOTE: You may need to clear your browser cache to see the lightbox working.
  • If you want to transform your WordPress gallery into a slideshow, we suggest the Soliloquy Slider Plugin with the dynamic and thumbnail addons.

We hope that you found this post helpful. Pin, bookmark or share it so you can return here the next time you need to create or edit a WordPress photo gallery.

Extend the Learning….

Join us to learn WordPress with Gutenberg, January 17 & 18, 2019.

 

Or subscribe here to get our blog posts sent to your inbox.

8 thoughts on “A Step-by-Step Guide to Creating & Editing WordPress Galleries


  1. I am an old codger. So these tech things are always a challenge. I was very interested in the gallery writeup as my website has many, many photo inserts which are accumulating like bees to a bowl of honey. I have found when I delete an image from the accumulation the image is also deleted from the posting. For a guy my age, this is very confusing. So I thought I would welcome this LearnWP article, but once more agism creates a roadblock to comprehension for me.


  2. I used the video to create a gallery with 3 photos. I had previously installed the FooBox Image Lightbox, but does not seem to be functioning the way I would like. When I click on an image in the gallery, I get the light box but it is very small and both the caption and the alt text cover the image. How can I change this? Thanks.


    1. Hi Mary Lou If you go to Foobox -> Settings you can adjust the settings. Tick the box only show the caption when hovering over the image. If your images are small the lightbox will be small. Hope that helps.


  3. Thanks Ruth. I uploaded a bigger image to my media library. I then edited my gallery page to add the bigger image from the media library. This new image does not appear to be using FooBox at all.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.