mark l chaves

<p>With <strong>GIC</strong>, you can display the title, caption, and description image attributes. You can also change/filter the rendering HTML to whatever you want.</p>
<p>After installing and activating GIC, write your filter and add the WordPress <a href="https://codex.wordpress.org/Gallery_Shortcode" rel="nofollow ugc">Gallery shortcode</a> to your page.</p>
<p>If you’ve been <em>dreaming</em> of writing a filter to customise the gallery image captions, then this plugin is for you.</p>
<p><a href="https://streetphotography.blog/gallery-image-captions-demo/" rel="nofollow ugc">Visit the live demo page.</a></p>
<h4>Motivation</h4>
<p>The default WordPress gallery shortcode will only display the <strong>caption</strong> from the media’s attachment metadata. Sometimes it’s nice to display more like the title—even the description.</p>
<p>The <strong>GIC plugin</strong> overrides the WordPress gallery shortcode function to create a <a href="https://developer.wordpress.org/plugins/hooks/" rel="nofollow ugc">hook</a>. With this <em>hook</em> you can do a little bit more than just displaying the caption.</p>
<p>Some premium themes hide the caption completely. This leaves photography lovers like me scratching their head and spending precious time cobbling together makeshift caption blocks.</p>
<h3>Usage</h3>
<h4>Custom Filter For Displaying Captions</h4>
<p>The <strong>crux</strong> of this plugin is the ability to filter the gallery image caption. The <code>galimgcaps_gallery_image_caption</code> hook makes this possible.</p>
<p>For the usage examples below, this is the filter used.</p>
<pre><code>/**
 * Custom Filter for Gallery Image Captions
 *
 * Note: Avoid altering captiontag, selector, and itemtag.
 */
function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {

    $id = $attachment_id;

    // Grab the meta from the GIC plugin.
    $my_image_meta = galimgcaps_get_image_meta($id);

    /**
     * Here's where to customise the caption content.
     * 
     * This example uses the meta title, caption, and description. 
     * 
     * You can display any value from the $my_image_meta array. 
     * You can add your own HTML too.
     */
    return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
            "Title: " . $my_image_meta['title'] . "<br>" .
            "Caption: " . $my_image_meta['caption'] . "<br>". 
            "Description: ". $my_image_meta['description'] . 
        "</{$captiontag}></{$itemtag}>";

}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
</code></pre>
<p>Feel free to use this filter code as a starter template. After activating the GIC plugin, add the code above to your child theme’s <code>functions.php</code> file. Rename the function and tweak the return string to suit your needs.</p>
<h4>New Filter To Get Custom Fields</h4>
<pre><code>/**
 * New GIC 1.4.0 filter for custom meta fields.
 */
function gic_add_custom_fields( $image_meta, $attachment ) {

    // This is how you add a custom fields to the array that
    // GIC uses to display captions.
    $image_meta['credit_text'] = $attachment->credit_text;
    $image_meta['credit_link'] = $attachment->credit_link;

    return $image_meta;
}
add_filter( 'galimgcaps_image_meta', 'gic_add_custom_fields', 10, 2 );
</code></pre>
<p>To use these two custom fields, your <code>galimgcaps_gallery_image_caption</code> would look something like this.</p>
<pre><code>function mlc_gallery_image_caption($attachment_id, $captiontag, $selector, $itemtag) {

    $id = $attachment_id;

    // Grab the meta from the GIC plugin.
    $my_image_meta = galimgcaps_get_image_meta($id);

    // If there's credit, give it where it's due complete with link.
    $credit = $my_image_meta['description'] ? 
        "<br><strong>Credit</strong>: <a style='display: inline;' href='" . 
        $my_image_meta['credit_link'] . 
        "'>" . $my_image_meta['credit_text'] . "</a>" . "<br>" : 
        '';

    /**
     * With GIC 1.4.0 you can also add custom media attachment fields
     * to your captions.
     */
    return "<{$captiontag} class='wp-caption-text gallery-caption' id='{$selector}-{$id}'>" .
            "<strong>Caption</strong>: " . $my_image_meta['caption'] . "<br>" . 
            $credit .
            "</{$captiontag}></{$itemtag}>";

}
add_filter('galimgcaps_gallery_image_caption', 'mlc_gallery_image_caption', 10, 4);
</code></pre>
<p><strong>Since v1.2.0</strong>, GIC automatically adds an <strong>Image ID</strong> column to your WordPress Media Library. This is to help you add the image IDs to your GIC shortcodes.</p>
<p><a href="https://ps.w.org/gallery-image-captions/assets/screenshot-11.png" rel="nofollow ugc">See where GIC automatically adds an Image ID column to your WordPress Media Library.</a></p>
<p><strong>New in v1.4.0</strong>, GIC support custom media attachment fields.</p>
<h3>Usage Example 1</h3>
<h4>Shortcode</h4>
<p>For starters, let’s use a</p>
<pre><code><p></p> 
</code></pre>
<p>tag for the caption tag.</p>
<pre><code>[gallery size="full" columns="1" link="file" ids="114" captiontag="p"]
</code></pre>
<h4>Styling</h4>
<p>Let’s override the generated styles with our own style for one particular image.</p>
<pre><code>/* Targeting a Specific Image */

/* Add some padding all around. */
#gallery-1 .gallery-item, 
#gallery-1 .gallery-item p {
    padding: 1%;
}

/* Add some moody background with typewriter font. */
#gallery-1 .gallery-item {
    color: whitesmoke;
    background-color: black;
    font-size: 1.25rem;
    font-family: Courier, monospace;
    text-align: left !important;
}
</code></pre>
<h3>Usage Example 2</h3>
<h4>Shortcode</h4>
<p><strong>A 2 column x 1 row gallery with large size images using an H4 for the caption.</strong></p>
<pre><code>[gallery size="large" columns="2" link="file" ids="109,106" captiontag="h4"]
</code></pre>
<p><strong>A 3 column x 1 row gallery with medium size images using a blockquote for the caption.</strong></p>
<pre><code>[gallery size="medium" columns="3" link="file" ids="109,106,108" captiontag="blockquote"]
</code></pre>
<p>Did you notice that we are using</p>
<pre><code><blockquote></blockquote> 
</code></pre>
<p>in the second shortcode? Let’s give it try just for <em>kicks</em>.</p>
<h4>Styling</h4>
<pre><code>/* 1. Style the H4 Used in the Caption Example */
h4 {
    color: #777777 !important;
    font-size: 1.2rem !important;
    font-family: Helvetica, Arial, sans-serif !important;
}

/* 2. Help Align the Blockquote */
#gallery-3 .gallery-caption {
    margin-left: 40px !important;
}
</code></pre>
<h3>Responsive CSS Example</h3>
<p>I recommend adding the following media queries if you use galleries with more than one image. The two media queries below will stack 2×1 and 3×1 galleries into a 1 column x n rows or 2 column x n rows  as needed.</p>
<pre><code>/* Media Queries for Responsive Galleries */

/**
 * Styling based on article "How To: Style Your WordPress Gallery"
 * by Par Nicolas.
 * 
 * https://theme.fm/how-to-style-your-wordpress-gallery/
 */

/* Mobile Portrait Breakpoint - 1 column */
@media only screen and (max-width: 719.998px) {
    .gallery-columns-2 .gallery-item,
    .gallery-columns-3 .gallery-item { 
     width: 100% !important; 
  }
}

/* Mobile Landscape and Tablet Breakpoints - 2 columns */
@media only screen and (min-width: 720px) and (max-width: 1024px) {
  .gallery-columns-3 .gallery-item { 
     width: 50% !important; 
  }
}
</code></pre>


Gallery Image Captions (GIC)

Gallery Image Captions (GIC) allows you to customise WordPress gallery image captions.

Wow-Company

DmtLo

WPCoder

<p>Tired of editing theme files to add custom scripts or styles?<br />
<strong>WP Coder</strong> lets you insert custom HTML, CSS, JavaScript, and PHP snippets directly from your dashboard — no coding in theme files required. Gain full control and flexibility over your site.</p>
<p><a href="https://wpcoder.pro/category/documentation/" rel="nofollow ugc">Documentation</a> | <a href="https://wpcoder.pro/" rel="nofollow ugc">Upgrade to Pro</a></p>
<h3>Why WP Coder?</h3>
<ul>
<li><strong>All-in-One Code Editor:</strong> Tabbed editor for HTML, CSS, JS & PHP with CodeMirror syntax highlighting.</li>
<li><strong>Shortcode Integration:</strong> Use <code>[wp_code id="X"]</code> to embed snippets anywhere.</li>
<li><strong>Live Preview:</strong> Instantly preview HTML & CSS without reloads.</li>
<li><strong>Performance Ready:</strong> Minify CSS/JS and control script loading with <code>async</code> / <code>defer</code>.</li>
</ul>
<h3>Ideal For</h3>
<ul>
<li><strong>Developers:</strong> Test snippets, hooks, and debug quickly.</li>
<li><strong>Marketers:</strong> Insert tracking pixels, analytics, and ad scripts.</li>
<li><strong>Designers & Bloggers:</strong> Customize layouts, styles, and enhance engagement.</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Insert <strong>HTML, CSS, JS, and PHP</strong> via powerful shortcodes.</li>
<li>Smart PHP handling: run in admin, front-end, everywhere, or only where inserted.</li>
<li>Include external libraries (Google Fonts, CDN scripts & styles).</li>
<li><strong>Test Mode:</strong> Preview snippets safely before going live.</li>
<li>Import/Export snippets and settings between sites.</li>
<li><strong>NAV comments:</strong> Add inline navigation markers for faster code editing.</li>
<li>Lightweight & secure — built for performance.</li>
</ul>
<h3>Included Tools:</h3>
<h4>Integrations</h4>
<ul>
<li>Google Analytics, Facebook Pixel, and Pinterest Pixel integration.</li>
<li>Google AdSense integration with the option to disable ads for selected user roles.</li>
</ul>
<h4>Content & Templates</h4>
<ul>
<li>Markdown Editor – Disables Gutenberg and TinyMCE, replacing them with a Markdown editor powered by CodeMirror.</li>
</ul>
<h4>Developer Tools</h4>
<ul>
<li>Debug Log management (enable/disable and clear log).</li>
<li>Show Page Debug Info – Display technical info for the current request in the Admin Bar (template, query type, object, body classes). Admins only.</li>
<li>Theme Switcher –  Quickly switch between installed themes directly from the admin bar.</li>
</ul>
<h3>Included Snippets:</h3>
<h4>Editor & Content</h4>
<ul>
<li>Disable Gutenberg Editor</li>
<li>Remove Gutenberg Block CSS</li>
<li>Disable Widget Blocks</li>
<li>Enable Shortcode Execution in Widgets</li>
<li>Enable Excerpt for Pages</li>
<li>Open External Links in New Tabs</li>
<li>Change “Read More” Text</li>
</ul>
<h4>Admin Interface Tweaks</h4>
<ul>
<li>Disable Screen Options Tab</li>
<li>Disable Welcome Panel</li>
<li>Duplicate Posts</li>
<li>Disable Admin Bar</li>
</ul>
<h4>Login & User Access</h4>
<ul>
<li>Disable Login Page Language Switcher</li>
<li>Disable Login by Email</li>
<li>Disable Admin Password Reset Emails</li>
<li>Custom Login Logo</li>
<li>Custom Login Redirect URLs</li>
<li>Change Redirect After Login</li>
<li>Change Redirect After Logout</li>
</ul>
<h4>Media & Embeds</h4>
<ul>
<li>Enable SVG Upload</li>
<li>Force Lowercase Filenames</li>
<li>Default ALT Text for Avatars</li>
<li>Disable Lazy Load</li>
<li>Disable Embeds</li>
<li>Adjust oEmbed Max Dimensions</li>
</ul>
<h4>Core Functionality</h4>
<ul>
<li>Disable XML-RPC</li>
<li>Disable REST API</li>
<li>Disable Automatic Updates</li>
<li>Disable Emojis</li>
<li>Disable Shortlinks</li>
<li>Limit Post Revisions</li>
</ul>
<h4>Comments & Feedback</h4>
<ul>
<li>Disable Comments Globally</li>
<li>Disable Comment URL Field</li>
<li>Disable Self Pingbacks</li>
<li>Disable Trackbacks & Pingbacks</li>
<li>Disable HTML in Comments</li>
<li>Limit Comment Length</li>
</ul>
<h4>Cleanup & Optimization</h4>
<ul>
<li>Remove WP Version</li>
<li>Disable Attachment Pages</li>
<li>Disable RSS Feeds</li>
<li>Disable Built-in Search</li>
<li>Disable wlwmanifest Link</li>
<li>Disable Automatic Trash Emptying</li>
<li>Redirect 404 to Homepage</li>
</ul>
<p>WP Coder simplifies your WordPress development workflow and makes customization safe, fast, and flexible!</p>
<p>Get started today and simplify your WordPress development workflow with <strong>WP Coder</strong>!</p>
<h3>Quick Start Video</h3>
<p><iframe loading="lazy" title="WP Coder - Quick Start" width="750" height="422" src="https://www.youtube.com/embed/BgY3R8j1uWM?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h3>Plugin Demo:</h3>
<p><iframe loading="lazy" title="How to Introduce Interactive Features to WP Website with WPCoder" width="750" height="422" src="https://www.youtube.com/embed/YF4X7sU0iFY?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h4>Support</h4>
<p>Need help? Ask questions and get quick answers in our <a href="https://wordpress.org/support/plugin/wp-coder" rel="ugc">support center</a>.</p>


WP Coder – Insert & Manage Code Snippets


I install it on every site I build. Does the job well.


I love this plugin. Standard on all sites I build.

Snippets made simple — easily insert and manage custom PHP, CSS, JS & HTML without coding in theme files.

Gallery Image Captions (GIC) vs WP Coder – Insert & Manage Code Snippets