How To Add An Image Gallery In WordPress

In this tutorial, you will learn how to insert multiple images into your posts and pages using the WordPress image gallery feature.

This tutorial covers:

info

This tutorial explains how to add an image gallery to your posts and pages using the WordPress Classic Editor.

For a step-by-step tutorial on adding an image gallery to your content using the WordPress Block Editor, go here: WordPress Block Editor – Gallery Block

If you need help inserting single images into your content, see this tutorial: How To Add And Format Images In WordPress

***

If you are looking for a simple way to insert multiple images into your posts or pages or add a photo gallery to your site, you don’t need a plugin.

WordPress has a built-in image gallery feature that lets you easily insert multiple images into your content and display these in a professional-looking grid-like gallery view.

Here is an example of an image gallery created using the WordPress gallery feature.

WordPress image gallery.
WordPress image gallery.

The WordPress built-in image gallery feature lets you create multiple image galleries for displaying images on your posts and pages.

By default, WordPress displays multiple images stacked above each other in your content.

If you plan to add many images to your posts or pages, this won’t look great (or feel great) to users, as they will have to do quite a bit of scrolling down the page to view all your images.

WordPress post with stacked images.
Asking users to scroll endlessly down the page to view multiple images in a post is not a good look.

The WordPress image gallery displays thumbnail images in a grid layout, creating a better user experience.

WordPress image gallery.
The WordPress image gallery creates a better user experience when displaying multiple images on a post.

To add an image gallery to a post or page in WordPress:

  1. Create a new post or page or open an existing one,
  2. Place your cursor where you want the image gallery inserted, and
  3. Click on the Add Media button.
Add Media button.
Place your cursor where you would like to insert your media gallery.

The Insert Media screen will open in a pop-up window.

Click on the Create Gallery link as shown in the example below.

Add media screen - Create gallery.
Click on Create gallery.

Select the images you want to include in your gallery (selected images will display a checkmark on the upper right-hand corner) and click on the button labeled Create a new gallery at the bottom of the screen.

Create gallery screen - Images selected for gallery.
Select the images you want to add to your gallery.

This will bring up the Edit Gallery screen.

Edit gallery screen.
The Edit gallery screen.

There are several things you can do on the Edit Gallery screen.

You can:

  • Add images to your gallery
  • Add captions to images
  • Reorder images
  • Reverse image order
  • Remove images

Let’s go through each of the above.

Add Images To Your Gallery

You can add images to your gallery that you have previously uploaded or upload new images to your Media Library.

To add new images to your gallery, click on the ‘Add to gallery’ link.

Edit gallery screen - Add to gallery.
Click on the Add to gallery link to add new images to your gallery.

Next, select the images you would like to add to your gallery. Click the ‘Add to gallery’ button when done.

Add to gallery - Add images to gallery.
Add images to your gallery.

The selected images will be added to your gallery.

Edit gallery - new images added to gallery.
The selected images are added to your gallery.

Add A Caption To Images

To add a caption to images in your gallery, click on the field below the image where it says “Caption this image …” and type in your text.

Edit gallery - Add captions.
Add captions to your gallery images.

Reorder Images

You can reorder images using drag and drop.

Edit gallery -
Reorder images in your gallery using drag and drop.

Just click on an image and drag it to a new location, then release your mouse button. Your image will be placed in the new location.

Edit gallery - animated image showing images being reordered.
Use drag and drop to position images exactly as you want them to display in your gallery.

Reverse Image Order

You can also reverse the order that your images display in your gallery by clicking on the Reverse order button.

Edit gallery - Reverse display order of gallery images.
Reverse the display order of your gallery images.

Reordering and reversing the order of your images gives you complete control over the appearance of images in your gallery.

Edit gallery - Reverse order of images.
Reverse the order of your images.

Remove Images

You can also remove images from your gallery.

Hover over the “X” until it becomes a “minus” sign, then click to remove the image.

Edit gallery - Remove image.
Click on the minus sign to remove the image from your gallery.

As well as the gallery edit options shown above, there are a few gallery settings that you can adjust.

For example, you can choose whether to link your images to an attachment page, its media file, or add no link (None) by selecting an option from the drop-down menu in the Link To section.

Gallery Settings - Link To options.
Link To options.

The images below show the difference between selecting the ‘Attachment Page’ and ‘Media File’ options.

Note: Selecting ‘None’ means that no images are linked, so nothing will happen if you hover over the image.

So, clicking on a gallery image…

Click on an image
Click on an image.

…takes you either to an attachment page (i.e. a post containing that image) or its media file location…

Composite image of an image attachment page and media file display.
Link your image to an attachment page or its media file location.

You can specify the number of columns for your gallery by selecting an option from the drop-down menu in the Gallery Settings > Columns section (up to 9 columns).

Gallery Settings - Columns
Specify up to 9 columns for your image gallery.

The image below shows how your gallery displays using different column settings.

Image galleries displayed using different column settings.
You can specify the number of columns for your image gallery.

You can also specify whether your images should display in random order or not by ticking the Random Order checkbox.

Gallery settings - Random Order
Randomize how images display in your gallery.

The image below shows how images display with the Random Order option enabled on your published post or page.

Tip: Refresh your web browser to see your gallery images display in random order.

Animated image showing gallery images displaying in random order.
Image gallery with Random Order option enabled.

You can also specify the size of your gallery images (Thumbnail, Medium, Large, Full Size).

Gallery Settings - Image Size.
Select the image size for your gallery images.

For example, here is an image gallery with the image size set to ‘Thumbnail’…

Image gallery displaying thumbnail-sized images.
Image gallery size = Thumbnail.

And here is the same image gallery with a different image size setting (‘Medium’).

Image gallery displaying medium-sized images.
Image gallery size = Medium.

If you don’t want to create or edit your gallery, just click on the ‘Cancel gallery’ link to abort the process.

Edit gallery - Cancel gallery.
Don’t want to make changes to your gallery? Then click the Cancel gallery link to exit the screen.

After editing your image gallery and adjusting your settings, the next step is to insert your image gallery into your post or page.

Click on the Insert gallery button at the bottom of the Edit Gallery screen…

Edit gallery - Insert gallery button.
Click the Insert gallery button to add your gallery to your post or page.

This will insert your image gallery into your content.

Image gallery added to post.
Image gallery added to post.

If you switch to the text editor tab, you will see a gallery shortcode inserted into the content (gallery shortcodes are explained further below).

text tab - Image gallery shortcode.
View the image gallery shortcode in the Text editor.

To view your image gallery, publish or update your post or page.

Update button.
Publish or update your post or page to save and view your image gallery settings.

To make changes to an existing image gallery, make sure that you are in the “Edit Post” or “Edit Page” screen, and click on your image gallery.

This will display the Edit Gallery and Delete Gallery icons.

Click on the Delete Gallery icon to remove your image gallery from your content or click on the Edit Gallery icon to edit your image gallery settings.

Image Gallery - Edit and Delete icons
Click on the image gallery to edit its settings or remove it from your post or page.

After clicking on the Edit Gallery icon, you will be presented with the choices we covered earlier:

  • Add images to your gallery
  • Add captions to images
  • Reorder images
  • Reverse image order
  • Remove images

Make your changes and click the ‘Update gallery’ button at the bottom of the Edit gallery screen to update your image gallery.

Edit gallery - Update gallery button.
Click the Update gallery button after editing your image gallery.

Remember to click on the Update button to republish your post.

Post screen - Publish button.
Update your post or page to save your new gallery settings.

Your image gallery will update with the new settings.

WordPress image gallery.
Your updated image gallery.

WordPress supports using various shortcodes for images and galleries. A shortcode is a single line of code that lets you insert features, functionalities, or scripts into your content that would normally require lots of complex code to pull off.

Shortcodes are typically wrapped in square brackets ( [ ] ) as shown below…

Shortcode.
This is what a shortcode looks like.

Here’s the shortcode for the WordPress image gallery.

WordPress gallery shortcode.
WordPress gallery shortcode.

The screenshot below shows the gallery shortcode inserted into your content via the text editor…

Gallery shortcode.
An image gallery shortcode inserted into text via the text editor.

When you publish your post or page, the shortcode calls up the image gallery and displays it on your users’ screens.

WordPress image gallery.
Image gallery displayed using a shortcode.

info

Before using any of the shortcode options described below, make sure that you have “attached” the images you want to use in your gallery to your post or page.

Unattached images will not display in your image gallery if you only use the gallery shortcode.

Media Library - Attach images.
Attach images that you want to display in your image gallery.

If you need help attaching images to posts or pages or understanding what this means, see this tutorial.

Media Library screen - Attached vs Unattached media
Some examples of attached vs unattached media.

Gallery Shortcodes

Here are some examples of gallery shortcodes you can use to customize how image galleries display on your posts and pages:

To display a specific image using the gallery shortcode, use the shortcode below with the selected image ID.

Gallery Shortcode - Include.
Gallery Shortcode – Include.

To find your image ID, do the following:

  1. Go to the Media > Library
  2. Hover your mouse over an image
  3. The ID is displayed after “post=” in the status bar at the bottom of your screen, as shown below…
Image ID
How to find an image ID.

Add the shortcode where you want the image to appear in your content.

Gallery shortcode - single image ID.
Add the gallery shortcode with the single image ID to your content.

Your image will display when your post or page is published.

Notes:

  • If a post exists with the ID specified in the gallery shortcode, the image gallery will display all images attached to that post.
  • If the ID specified in the gallery shortcode belongs to an image and not a post, then the gallery will display the image with that ID.

In other words, the shortcode below works for posts and images (displays whichever of these matches the ID) …

Gallery Shortcode - IDs
Gallery Shortcode – IDs

Whereas this shortcode applies only to image IDs:

Gallery Shortcode - Include.
Gallery Shortcode – Include.

If publishing a single image using the gallery shortcode, remember to adjust other gallery settings (e.g. number of columns, image size, etc.)

Image gallery - Single image.
An image gallery with a single image.

Additional Gallery Shortcode Options

You can customize your gallery using additional shortcode options, such as:

  • columns
  • id
  • size
  • link
  • include
  • exclude
  • order by
  • order
  • itemtag
  • contact
  • captiontag

Let’s go through some of the above gallery shortcodes using examples:

gallery columns

Gallery shortcode - gallery columns
Gallery shortcode – gallery columns

The above shortcode lets you specify the number of columns you want your image gallery to display on your post or page.

Simply enter the number of columns inside the quotation marks. In the above example, we want our image gallery to display images in 5 columns.

The default value for this shortcode setting is 3. If columns are set to 0, no row breaks will be included.

gallery size

Gallery shortcode - gallery size.
Gallery shortcode – gallery size.

You can use the shortcode above to display your images in different sizes: Thumbnail, Medium, Large, and Full Size.

Simply type in one of the options below inside the quotation marks (replacing the red text):

  • thumbnail
  • medium
  • large
  • full

gallery id

Gallery shortcode - gallery IDs.
Gallery shortcode – gallery IDs.

We have already covered this shortcode.

The above shortcode allows you to display all images attached to a post with the specified ID. By default, if no ID is specified, the gallery will display all images attached to the current post.

If no post ID exists but the ID is assigned to an image, then the image with that ID will display in your gallery.

In the screenshot above, the gallery would display a single image with the image ID = 123 or all images attached to a post with ID 123.

If you need help understanding post, page, or image IDs, see this tutorial.

gallery include

Gallery shortcode - gallery include.
Gallery shortcode – gallery include.

Use this shortcode to include multiple images in your gallery. Separate image IDS with commas.

gallery exclude

Gallery shortcode - gallery exclude.
Gallery shortcode – gallery exclude.

Like the “include” shortcode, you can exclude images that you don’t want to display in your image gallery by adding the above shortcode with comma-separated image IDs.

See the earlier section of this tutorial to learn how to identify image IDs in your media library.

gallery order

This lets you specify the sort order used to display thumbnails in your gallery shortcode:

  • ASC (ascending)
  • DESC (descending)

gallery orderby

This option lets you specify how to sort your display thumbnails.

By default, your image gallery uses “menu_order” to display images using the order you have specified when creating your gallery.

The options include:

  • menu_order (note: you can reorder the images by editing your image gallery)
  • title (order by image title, as specified in the Media Library)
  • post_date (sort images by date/time)
  • rand (display images in random order)
  • ID (order images by ID)

You can combine order and orderby in a single shortcode. For example:

Gallery shortcode with included parameters order and orderby.
Gallery shortcode with included parameters order and orderby.

The above shortcode will sort images by ID in descending order.

To sort images by date/time in ascending order, enter the shortcode below into your post or page:

Gallery shortcode - sort images in ascending order by date/time.
Gallery shortcode – sort images in ascending order by date/time.

And to sort images by image title in ascending order, you would enter the following shortcode:

Gallery shortcode - sort images in ascending order by title.
Gallery shortcode – sort images in ascending order by title.

You can have precise control of your image gallery by combining different parameters.

For example, here is the shortcode for displaying an image gallery on your post or page with the following parameters:

  • Images link to media file location (link=”file”)
  • Image sizes display as Full size (size=”full”)
  • Images display in 4 columns (columns=”4″)
  • The gallery displays 7 images using their image IDs (ids=”comma-separated image ids”)
  • Images display in random order (orderby=”rand”)
Gallery shortcode with multiple parameters specified.
Gallery shortcode with multiple parameters specified.

For more information about the Gallery shortcode, refer to the official WordPress Codex here: http://codex.wordpress.org/Gallery_Shortcode.

Tip

If you plan to add images to your posts using an image gallery, the built-in WordPress gallery feature may be more than ideal for your needs.

If you want to go beyond the default WordPress gallery, there are several plugins available that can help you create stunning image galleries.

You can either:

  • Search for “WordPress image gallery plugins” inside your WordPress dashboard (Plugins > Add New), or
  • Search for image gallery plugins in the WordPress free plugin directory here: WordPress Image Gallery Plugins
WordPress Image Gallery plugins search.
Search the WordPress plugin directory for image gallery plugins.

WordPress Image Gallery – FAQs

Here are frequently asked questions about using image galleries in WordPress:

What is a WordPress image gallery?

A WordPress image gallery is a feature that allows users to display multiple images in a visually appealing format on their website. It enables visitors to view a collection of images without navigating to separate pages.

How do I create an image gallery in WordPress?

To create an image gallery in WordPress, use the built-in Gallery block. Add a new post or page, then insert the Gallery block. Upload or select the images you want to include, and WordPress will automatically create a gallery for you.

Can I customize the appearance of my WordPress image gallery?

Yes, you can customize the appearance of your WordPress image gallery using themes and plugins. Many themes offer built-in gallery styles, and plugins provide additional customization options such as lightbox effects, captions, and layouts.

How can I add descriptions or captions to images in a WordPress gallery?

To add descriptions or captions to images in a WordPress gallery, simply edit each image within the Gallery block. You can add text captions to provide context or information about each image.

Is it possible to create multiple galleries on a single WordPress page or post?

Yes, you can create multiple galleries on a single WordPress page or post by adding multiple Gallery blocks. Each Gallery block can contain its own set of images, allowing you to organize and display multiple galleries within one content area.

Is it possible to reorder images in a WordPress gallery?

Yes, you can reorder images in a WordPress gallery by dragging and dropping them into your desired order within the gallery block. This allows you to easily rearrange the sequence of images to achieve the desired presentation.

Can I add a WordPress gallery to a sidebar or widget area?

Yes, you can add a WordPress gallery to a sidebar or widget area using a gallery widget or a plugin that provides similar functionality. Simply add the widget to your desired sidebar or widget area, configure the gallery settings, and select the images you want to display.

Are there any plugins available to enhance WordPress image galleries?

Yes, there are numerous plugins available in the WordPress repository that offer additional features and enhancements for image galleries. These plugins can add functionalities such as sliders, carousels, lightboxes, and more.

***

Congratulations! Now you know how to insert multiple images into your posts and pages using the built-in WordPress image gallery feature.

WordPress image gallery
WordPress image gallery

Kittens and jewelry images: Pixabay

***

Updated: July 5th, 2024

Terms Of Use | Privacy Policy

Scroll to Top