If you have an existing WordPress Gallery already on your website, and wish to add or edit the photos it contains, follow these easy step by step instructions.

These instructions are for the latest update of WordPress, and using the Native built in Media / Gallery feature for Version 3.5+. To find out which version of WordPress you are using, you can look on the main dashboard homescreen under “Right Now”. There will be a line saying something like “You are using WordPress 3.5.1.”

The Media Manager has improved greatly in the latest update to WordPress. This tutorial will not be terribly helpful if you are not using v3.5 or higher.

1. Locate the Page or Post which contains the Gallery you wish to edit.

There are 2 ways to do this easily.

  • Navigate through the Dashboard to Pages (or Posts as applicable), and find or search for the page which contains the Gallery in the list of available pages / posts, and Click Edit (not “quick edit”).
  • Or, from the front end of the website, once logged in, view the page containing the gallery and click “Edit Page (or post)” from the grey admin bar at the top of the screen.
Editing a WordPress Media Gallery

Click on “Edit Page” located on the top grey Admin Bar.

2. Click on the large box within your “Visual” Editor.

Once you are in the editor of the page or post containing your Gallery, you will see a large box with “media icons” inside it. Click somewhere within this box. This will reveal 2 icon options in the left hand corner. The first is “Edit”, and the second will delete the entire gallery. Click the first icon, to edit the Gallery.

Editing a WordPress Gallery

Click the gallery to reveal the option to Edit it.

3. The Media Manager.

After you have clicked the “edit” icon in the previous step, you will have a popup on your screen showing the media manager.

Using the WordPress Gallery

Inside the Editing features of the WordPress Media manager. The highlighted circles in the image above shows the Editing options you will need.

 

Edit Gallery, or Add to Gallery
This image is the “Edit Gallery” screen. If you click “Add to Gallery”, you will have a simple “Upload Media” button to add new images. Once new images are uploaded, make sure they are all selected (this should have happened automatically if you uploaded all the new images in one go), click “Add to Gallery” (bottom right of screen) and you will be be taken back to this “Edit Gallery” screen. You do not need to worry so much about filling out the info for each image on upload, as it can be done once back in the editor for the Gallery (detailed below).

On the right hand side, you have a set of options. “Title”, “Caption”, and “Alt Text”. These are the 3 main ones you will need.

  • The Title and Alt Text is usually ok to input the same thing in both, but always input some “alt text”.
  • The Caption is the part that will display directly underneath the image on the main page of the Gallery.

If you have a [tooltip tip=”When you click on an image (usually a small thumbnail), and a larger version pops up on your screen, this is called a lightbox”]Lightbox[/tooltip] feature on your website, it is usually the Title which is displayed directly under the image when brought up in the lightbox – but still the caption which is displayed under the image on the page. This may differ slightly depending on the lightbox being used, and it’s configuration.

4. Saving and Updating

Once you are done inputting all the Titles and Captions etc, and have dragged the images around to their desired order, Click the “Update Gallery” button in the bottom right corner. This will bring you back to the main Page or Post editor. Click the “update” button at the top right of this screen to save the updated gallery on the page.

 

Tips:

If you wish to add a caption under the photo, for example, someone’s Name and Job title, and want the job title on a new line under their name, write “<br />” after their name. (without the quote/speech marks, but with the <> brackets). This will create a “line break”.

 

The images used in the example gallery in these tutorial screenshots are from LoremPixel

Leave a Reply

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

Get a website quote

If you would like a free no obligation quote on a website design and development project, download our "project questionnaire" (docx format), fill it out and email it back to us. We will aim to provide you with a development proposal quote within 24-48 hours.