admin – Studiorder

The core WordPress Gallery block is powerful, fast, and convenient.

It’s a fantastic tool for creating beautiful, responsive image grids in seconds.

But it has one default styling choice that drives many designers and artists crazy: the captions appear as an overlay on top of the images.

For a clean, minimalist portfolio, you often want the art to speak for itself. The ideal layout is a simple, elegant caption positioned neatly below the image, not obscuring it.

If you’ve ever tried to fix this, you may have fallen down a rabbit hole of CSS fixes that cause new, frustrating bugs—like images in your gallery suddenly stretching or squashing!

Don’t worry. In this guide, we’ll walk through the definitive, professional way to solve this. We will create a clean, reusable Block Style that gives you a “one-click” option to apply your beautiful new caption style to any gallery on your site.

The Goal: From Overlay to Understated

Here’s what we’re trying to achieve.

Before: The default WordPress style, with captions overlaying the bottom of the image.
After: Our new “Elegant Captions” style, with clean, left-aligned text directly underneath each piece of artwork.

The Solution: Creating a Custom “Elegant Captions” Block Style

We’ll accomplish this in two main steps. First, we’ll tell WordPress about our new style using a bit of PHP. Second, we’ll provide the CSS to make it look perfect.

Step 1: Register the New Block Style in functions.php

This is the magic step that creates a new style button in the block editor’s sidebar.

Navigate to your theme’s functions.php file. The best practice is to use a child theme to ensure your changes aren’t lost when the parent theme updates. You can find this file under Appearance → Theme File Editor.
Scroll to the bottom of the file and paste the following PHP code:

codePHP

function my_theme_register_gallery_style() {
    register_block_style(
        'core/gallery', // We are targeting the core Gallery block
        [
            'name'  => 'elegant-captions', // This becomes the CSS class for styling
            'label' => 'Elegant Captions', // This is the name you'll see in the editor
        ]
    );
}
add_action( 'init', 'my_theme_register_gallery_style' );

Click “Update File”.

That’s it! WordPress now knows about your new style. Now, we just need to tell it what that style should look like.

Step 2: Add the Custom CSS

This is the code that performs the magic. It moves the caption, fixes the layout bugs this change can cause, and ensures perfect alignment.

Navigate to Appearance → Customize → Additional CSS. This is the easiest place to add sitewide CSS.
Paste the following complete CSS block into the editor:

codeCSS

/*
 * ===================================================================
 *  CSS for the "Elegant Captions" Block Style
 *  This code will ONLY activate when the style is selected.
 * ===================================================================
 */

/*
 * PART 1: The Core Caption Styling
 * This takes your original, working code and applies it to the new style.
*/
.is-style-elegant-captions.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    position: relative !important;
    color: #000;
    background: none;
    line-height: 1.4;
    margin-top: 0.5em;
    text-shadow: none;
    text-align: left;
    padding: 0;
    overflow: visible;
}

/* Removes the default theme overlay/gradient */
.is-style-elegant-captions.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    display: none !important;
}


/*
 * PART 2: The Surgical Fixes for Layout Bugs
 * These rules ONLY activate when "Crop images" is toggled on,
 * preventing the common "squashed images" bug.
*/

/* This fixes the caption alignment when crop is on */
.is-style-elegant-captions.wp-block-gallery.is-cropped .wp-block-image {
    padding: 0 !important;
}

/* This is the magic fix for the image proportion bug! */
.is-style-elegant-captions.wp-block-gallery.is-cropped {
    align-items: flex-start !important;
}

Click Publish.

Why This CSS Works

.is-style-elegant-captions: This prefix ensures our code only runs on galleries where you’ve selected our new style.
position: relative !important;: This is the core of the change, moving the caption back into the normal document flow.
align-items: flex-start !important;: This is the crucial fix. When you move the caption, the gallery’s flexbox layout can break, causing images in rows after the first to stretch or squash. This command tells the gallery: “Let every image be its own natural height.” It single-handedly solves the most frustrating layout bug.

Step 3: Apply Your New Style!

Now for the rewarding part.

Edit any page with a Gallery block.
Click on the gallery to select it.
In the sidebar on the right, make sure you are on the “Styles” tab (the half-filled circle icon).
You will see the “Default” style and your new “Elegant Captions” style. Click it.

Instantly, you’ll see your captions snap into place below the images, right in the editor. Save the page, and you’ll see the same beautiful, clean result on your live website.

You’ve now taken control of the core gallery block and created a clean, professional, and completely reusable style for any artist portfolio or image grid on your site. Happy creating

Author: admin

Beyond the Overlay: How to Move WordPress Gallery Captions Below the Image