Black Friday 40% off yearly and lifetime plans · 18d left Ends in 18d09h22m Claim 40% off
Interface19 docs

How to Use the Gallery Shortcode in WordPress

Add a [gallery] shortcode for folder-based media galleries in Classic Monks. Dynamically display all images from a media folder as a responsive gallery.

By Founder & Lead Developer

Last updated

2 minutes

Key takeaways

  • Single toggle, no nested options
  • `[cm_gallery id=”X”]` shortcode displays all images from a folder
  • Responsive gallery with configurable columns and lightbox
  • Dynamic: updates when files are added or removed from the folder
  • Works with Folder Manager folders

Why You Need It

The default WordPress gallery shortcode requires manually selecting individual images:

  • Manual selection: You must choose each image individually
  • No dynamic updates: When new images are added, the gallery doesn’t update
  • No folder support: The default gallery uses the post’s attached media, not a folder

The [cm_gallery] shortcode solves this by using folders instead of manual selection.

Configuration Options

Option Description Default
Gallery Shortcode Master toggle. Off

The shortcode accepts these attributes:

  • id: The folder ID (required)
  • columns: Number of columns (default: 3)
  • size: Image size (default: “medium”, options: “thumbnail”, “medium”, “large”, “full”)
  • link: Link behavior (default: “file”, options: “file”, “none”)
  • orderby: Sort order (default: “menu_order”, options: “date”, “title”, “rand”)

Example:

[cm_gallery id="123" columns="4" size="thumbnail" orderby="date"]

What Gets Affected

  • The page content: the [cm_gallery] shortcode is rendered as a responsive gallery
  • The folder contents: the gallery updates when files are added or removed
  • The page load: additional CSS/JS may be loaded for the lightbox

What Does NOT Get Affected

  • The folder: the gallery is read-only (doesn’t modify the folder)
  • The original images: not affected
  • The Media Library: not affected
  • The page performance: minimal impact (the gallery is lazy-loaded)

Troubleshooting

5 problems and how to fix each one.

The gallery is not showing

Cause: The toggle is off, or the folder ID is wrong.
Fix: Verify the toggle is on. Check the folder ID (hover over the folder name in the sidebar). The folder must contain at least one image.

The gallery shows broken images

Cause: The image URLs are wrong, or the files have been deleted from the server.
Fix: Verify the images exist in the Media Library. Check the browser console for 404 errors on the image URLs.

The gallery is not responsive

Cause: A theme or plugin is overriding the gallery CSS.
Fix: Check the browser’s DevTools for the gallery container. Ensure the CSS is loading (look for cm-gallery in the page source).

The gallery is slow to load

Cause: The folder has many high-resolution images.
Fix: Use the size attribute to display smaller images (e.g., “thumbnail” instead of “large”). The gallery loads images lazily by default.

The gallery shows duplicate images

Cause: Multiple files have the same image (e.g., duplicates in the Media Library).
Fix: The gallery shows all files in the folder. Use the “Remove from all” option to remove duplicates, or use the folder download feature to back up and clean the folder.

Was this doc helpful?

Your answer tells us which docs to fix first.

Still stuck? Ask on the forum or email help@classicmonks.com.
Joy Chetry
Written by the person who built it

Joy Chetry

Founder & Lead Developer, Classic Monks

Joy is the founder of Classic Monks and GoodMonks Solutions, a web development agency that builds WordPress and WooCommerce sites for clients. Classic Monks grew out of the agency's own need to consolidate 20 to 30 separate plugins into one core stack.

Follow this doc on a real site.

Open a private WordPress site with Classic Monks, WooCommerce and Bricks Builder installed, and follow this doc step by step. Free for 24 hours, no card.

280 docs, written by Joy Chetry 15 day refund window