Creating Engaging WordPress Galleries with Custom Links

Are you trying to add custom links to your image galleries in WordPress? This is a common request for us, so we’re going to show you how to do this using both the default WordPress gallery and custom galleries, using FooGallery as an example.

Why Add Custom Links to Gallery Images?

Before diving into the how-to, let’s explore why custom links in WordPress galleries are valuable. These links can:

• Boost engagement by creating interactive experiences that keep visitors on your site longer
• Enhance SEO through strategic linking to authoritative content
• Improve site navigation, naturally guiding visitors to related content and products
• Drive conversions by connecting images directly to sales pages
• Create personalized user journeys based on visitor interests
• Provide valuable analytics on user behavior and preferences

Method 1: Using WordPress Built-in Gallery Links

Adding custom links to your gallery images is straightforward using WordPress’s built-in features. Here’s how:

1. Add a Gallery block (click the + icon)
2. Upload or select images from your Media Library
3. Click any image in your gallery
4. Find the “Link to” option in the toolbar

5. Choose from:
   1. Media File (links to the full image)
   2. Attachment Page (links to image’s dedicated page)
   3. Custom URL (add external links)

Pro tip: Need captions? Click ‘Add caption’ under any image. Make captions clickable by highlighting text and using the link icon.

To set your link targets:

1. Select “Open in new tab” for external content
2. Keep internal links in the same window
3. Always preview before publishing to check links

Pro tip: Use new tabs for product pages and external content to preserve your site session

To add external URLs:

Simply paste your full URL (including https://) into the link field. Works with:

• Product pages
• Social media profiles
• Download links
• External websites

Despite having the advantage of being built-in, the default WordPress gallery has three key limitations: 

1. Requires time-consuming manual link setup for each image
2. It offers minimal design flexibility with a one-size-fits-all template 
3. It doesn’t allow you to add call-to-action buttons for better user engagement

For more advanced gallery features and efficient management of multiple images, consider using a dedicated gallery plugin like FooGallery.

Adding Custom Links in the Default WordPress Gallery 

Adding links to images within a WordPress gallery can enhance user experience and provide additional context. Below, we take a look at how to do this for your default WordPress gallery. 

Insert a Gallery

On a new page or post, click on the (+) icon to add a new block and select “Gallery”. Upload images you want to include in your gallery or select from your media library. Once selected, add these to the gallery and then click on Insert Gallery. 

You can then edit or customize the gallery to suit your needs. We’ve looked at how to edit the default gallery in our article on customizing your gallery block in Gutenberg.

Add Links

To add a hyperlink to an image, click on the image within the gallery. Find the “Link to” option in the toolbar displayed. Here you can choose one of the following options:

• Media File: Links directly to the image file.
• Attachment Page: Links to the image’s attachment page.
• Custom URL: Allows you to insert an external URL.

You would need to do this for each of the individual images in the gallery. 

Adding Links to Image Captions:

To add link URLs within the caption, click on the image, and then, to add an image caption, click on the ‘Add caption’ icon in the toolbar. Insert the text you want as a caption, highlight the text you want to link, and click on the link icon. Enter the URL you want to link to and submit.

Preview your post/page to ensure all links are working correctly before publishing. It is also possible to update any links by editing the gallery. Your captions with image links will now be clickable. 

Note that in WordPress, you can also use shortcodes to add various functionalities, including links, within image captions. For example, if you have a custom site URL shortcode named [site_url], you could insert this in your caption. You would then need to define the function of your shortcode in your functions.php file. 

Limitations of Adding Custom Links in Default WordPress Galleries 

However, there are some restrictions when customizing WordPress galleries without the aid of plugins such as FooGallery.

Limited to default gallery template

• The default WordPress gallery’s “one-size-fits-all” approach offers minimal flexibility for users who want to personalize the look and feel of their galleries.
• This limitation might affect photographers, artists, and ecommerce site owners who need more than basic grid layouts.
• Additionally, users cannot create unique viewing experiences that stand out from the standard WordPress format, potentially reducing engagement.

No way to add buttons

• Users are unable to add call-to-action buttons within the default WordPress galleries – a key element for driving conversions, especially on ecommerce sites, resulting in a gap in functionality. 
• This limits direct engagement opportunities, such as linking gallery images to product pages or special promotions.
• It can also generally harm UX, as users are less likely to understand where clicking on the image will take them, or if they should click on the image in the first place. 

Adding links to gallery images is a manual process

• As we’ve seen in the previous section, this can be a laborious process if you are setting up large image galleries.
• This is time-consuming and inefficient, especially when running an online business or managing a website. 

Method 2: Creating Custom Gallery Links with FooGallery Creating Custom Gallery Links with FooGallery

While WordPress’s default gallery has limitations, FooGallery provides a more powerful solution for custom links. This premium plugin streamlines the process and adds functionality ideal for business websites, photographers, and e-commerce stores. 

Creating HTML Captions with Links

The PRO Expert version enables rich custom captions using HTML and dynamic placeholders, giving you complete control over how your gallery content appears and functions.

FooGallery Caption Examples

• Use {{custom_url}} field for dynamic links

• Integrate with custom field plugins (ACF or PODS)
• Add metadata fields as placeholders
• Create multi-line captions without truncation

Adding Links within FooGallery Captions

Transform standard captions into interactive elements:

• Select “Custom” in the Captions tab

• Add HTML formatting for links and styling
• Include custom fields from your chosen plugins
• Preview captions before publishing

Here’s an example of how custom captions can appear in a gallery:

Custom Product Gallery Links 

While any gallery created with FooGallery allows you to select your source for both captions and descriptions, FooGallery PRO Expert gives you the ability to link custom captions. This can be done using basic HTML, dynamic placeholders, and attachment metadata.

Creating Product Buttons

For ecommerce sites, adding direct shopping experience functionality with product page buttons within galleries is a must. All of this can be achieved with FooGallery PRO Commerce. 

With PRO Commerce, you can add clear “View Product” or “More Info” buttons, customize button text and placement, and link directly to product pages.

To do so, navigate to edit gallery → Ecommerce tab. Then, simply fill in the fields to customize your gallery button links.

WooCommerce Integration

Two setup options:

• Create galleries from WooCommerce products automatically
• Add buttons manually via Media Attachment Modal

To use FooGallery’s Media Modal:

1. Open image info in the FooGallery media modal
2. Locate the custom URL field
3. Enter your desired link
4. Set Link To option as “Custom URL” in gallery settings

Remember to save changes after adding each URL.

The Best WordPress Gallery Plugin

FooGallery is an easy-to-use WordPress gallery plugin, with stunning gallery layouts and a focus on speed and SEO.

Buy Plugin

Add External Links to Gallery Thumbnails

With FooGallery, it is also possible to configure custom URLs on gallery thumbnails, directing the audience to individual product pages, blog entries, or external resources. 

You can do this in one of two ways:

1. Add the custom URL to the image metadata. You’ll find this field in the image info, or you can locate it using the FooGallery media modal. Here you can also set the Custom Target to open the URL on the same page, in a different tab, or in FooBox (if you’re using this lightbox). In the gallery settings, ensure that you set the Link To setting to Custom URL. (https://insider-gaming.com/)  

2. Alternatively, you can add a URL to an image caption in FooGallery by adding an href link within the wording. We take a more detailed look at the steps you’ll need to follow in our article on adding HTML captions. Using HTML, you can also ensure that links open in a new window.

Tips for Managing Gallery Links

Keep your gallery links organized and effective using these best practices.

Organizing Your Gallery Links

Create a systematic approach to gallery management:

• Use consistent naming conventions for links
• Group-related products or content
• Document your link structure
• Create templates for common link patterns
• Regularly audit links for outdated content

Testing Gallery Links

Ensure a smooth user experience with thorough testing:

• Check all links before publishing
• Verify links work across different devices
• Test custom URL redirects
• Monitor 404 errors
• Check loading speeds for linked pages

Mobile Display Considerations

Optimize your gallery for mobile users:

• Ensure buttons are touch-friendly (minimum 44x44px)
• Test caption readability on small screens
• Verify link behavior on mobile browsers
• Check load times over mobile connections
• Consider simplified layouts for smaller devices

Get Started with FooGallery Today

There are numerous benefits to adding custom links to your WordPress gallery on your WordPress website, including improved interactivity, better SEO, and increased marketing potential. 

While you can do this in the default gallery, there are so many advantages to using a customized gallery via a plugin like FooGallery. With FooGallery, creating custom links for the items in your gallery couldn’t be easier.

FooGallery, particularly FooGallery PRO Expert and FooGallery PRO Commerce (due to the custom link functionality outlined in these plans) is an ideal plugin for adding custom links. Ready to get started? Find the right FooGallery plan for your needs.