Working With WordPress Native Galleries

Did you know that you can create a WordPress gallery in one post by referencing a gallery from another post or page? Well, you can. This tutorial shows you how to use a gallery from one page in a second post, and also has some tips for working with WordPress galleries.

WordPress gallery added to a page
All images from www.unsplash.com



To get the most from this tutorial, you need to know how to find the id for your images and the id for your posts or pages. If you don’t know how, please see the tip at the bottom of this post.

Step 1. Create a Page with a Gallery

For this tutorial, I add the original gallery to a page – Page Gallery 1, and then use that gallery in a post – Post 1 Page Gallery 1, just to make things easier to follow. I also refer to the gallery in the page, as “original gallery”, and the gallery in the post as “secondary gallery”.

  • Page Gallery 1 = page = original gallery
  • Post 1 Page Gallery 1 = post = secondary gallery

But you can add your galleries to pages, posts, or custom post types and use them in any other of these, as well.

For the original gallery, images with ids 271, 272, and 273 were uploaded directly when creating the gallery. Some additional images with ids 268, 269, 270 were also added to the gallery from the Media Library. You can see that images with ids 271, 272, and 273 are “Uploaded to: Page Gallery 1” and the other three are Unattached.

Quick Tip: Images that are uploaded to a specific post or page are listed as “Uploaded to” in the Media > Library in list view. Images that are uploaded directly to the Media > Library are “Unattached”. You can attach the Unattached images to a post or page by clicking the blue “Attach” link and selecting a page or post from the list.

media library showing attached images and IDs

When we view Page Gallery 1, we see a gallery with all 6 images.

WordPress gallery added to a page

Step 2. Add the Gallery from the Page to a Post

  1. Next, find the ID of the page with the gallery. Go to Pages > All Pages. For me, Page Gallery 1 has an ID of 297.
  2. Now create a new post; I named it Post 1 Page Gallery 1.
  3. Switch to Text mode in the editor.
    Add the following:
    [ gallery id=”297″ ] where 297 is the ID of the post, page, or custom post type that has your gallery.
    (Note that I have added a space after [ and before ], so that you can see the shortcode. Be sure to remove the spaces in your post.)
  4. You can switch to visual mode now, and you will see only the three images that are attached to Page Gallery 1 in the Visual editor.
  5. You can Publish the post now.

Quick Tip: There are some tips for working with gallery shortcodes here in Method 1 – Edit the Gallery Shortcode in Each Gallery Post.

WordPress gallery inserted in post from a page

Only the images that have actually been uploaded to the original gallery in Page Gallery 1 (images “Uploaded to Page Gallery 1”) are included in the secondary gallery in Post 1 Page Gallery 1.

Step 3. Add New Images to Original Gallery

The original gallery (Page Gallery 1) will stay synced in the post (Post 1 Page Gallery 1), as long as you don’t actually edit the gallery in the post.

Let’s see how this works.

Return to Page Gallery 1 where you have the original gallery.

  1. In your Visual editor, click on the gallery images, and then on the pencil to edit the gallery.
  2. Click Add to Gallery.
  3. Upload a new image to the gallery (so that it’s “Attached to” in Media > Library.
  4. Click Update Gallery button.

How does it look in the secondary gallery?

View the Post 1 Page Gallery 1 – the post where you are using the same gallery. You should see the image that you just added to the original gallery page. Reload the post, if you don’t see the new image that was just added to Page Gallery 1.

So the galleries will stay synced.

Step 4. Edit the Secondary Gallery in the Post

What if you want to make some changes to the secondary gallery that you added to the post?

You can edit the secondary gallery, but once you do, changes to the original gallery in the page no longer update the secondary gallery; the galleries are no longer in sync.

edit WordPress gallery

Edit the secondary gallery in the post (Post 1 Page Gallery 1).

  1. Go to the Visual editor tab in the post.
  2. Click on the gallery images, and then on the white pencil icon to edit the gallery.
  3. You can make edits, add more images, remove images, change column number, etc.
  4. Click Update Gallery button.
    OR
  5. You can just simply click the Update Gallery button without making any changes.

Now if you switch to Text mode again, you will see that your gallery has been edited to list the ids of each image. It had the original page id=”297″, but it also lists the image ids=”273,272,271″ too. The image ids listed in the shortcode are the only images that appear in the secondary gallery.

[ gallery id=”297″ ids=”273,272,271″ ]

(Note that I have added a space after [ and before ], so that you can see the shortcode. Be sure to remove the spaces in your post.)

Once you edit the secondary gallery, you have a unique gallery in the post (Post 1 Page Gallery 1). When you upload a new image to the original gallery in the page (Page Gallery 1), the secondary gallery in the post (Post 1 Page Gallery 1) will no longer change; it won’t stay in sync.

So this is another way you can work with the WordPress native galleries to add to your posts, pages, and custom post types.

Tip: How to Find Post, Page, and Image IDs

There are three methods for finding IDs.

Method 1:

You can add a plugin, such as Reveal IDs. I’ve done that here, so you can easily see my IDs. In the images in this post, you can see that this plugin adds a column with the IDs to your admin.

post and page IDs
Method 2:

Posts or Pages:

Go to Posts > All Posts or Pages > All Pages:

  • You can click on Edit for the post or page. In your browser URL bar at the top, you will see something like this where the id for this post is 273:
    …/wp-admin/post.php?post=297&action=edit

Images:

In Media > Library:

  • When you are in list mode, if you click on an image or on the Edit link, you will see “post= ” in your browser URL bar:
    …/wp-admin/post.php?post=271&action=edit
  • When you are in grid mode, if you click on an image, you will see “item= ” in your browser URL bar:
    …/wp-admin/upload.php?item=271
Method 3:

When you are on your on your All Posts or All Pages screen or Media > Library screen in list mode, if you hover over any title, your browser will show a line like that in Method 2. at the very bottom of the browser.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

Leave a Reply

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