WordPress Plugins

How To Link Next Gen Gallery Images & Titles To Post or Page URL’s

In my last post i showed you how to create a NGG custom field named ‘Link’ to next gen gallery images.

To enable linking from your image titles and to make the images clickable to the links you add in the custom link field, you need to add PHP code to your NGG plugin files.

Change Next Gen Gallery Effects Settings

You’ll also need to change the plugin settings for Next Gen Gallery.

Go to Gallery > Options > Effects and change the Javascript Thumbnail Effect to ‘None’. Click Save Changes.

Next Gen Gallery Effects

Edit Next Gen Gallery Templates File

This step involves adding some PHP code to the nextgen-gallery/view/gallery.php file.

You can access this file under Plugins > Editor >

Select plugin to edit: NextGEN Gallery > Click Select > Under Plugin Files Click  nextgen-gallery/view/gallery.php


You can access the nextgen-gallery/view/gallery.php file using FTP or cPanel.

I’m going to use cPanel as it provides a built in editor and also displays line numbers where as the Plugin Editor in WordPress doesn’t and FTP requires you use a text editor like Notepad ++

Note: Always take backup of your files before editing PHP code. I have downloaded a copy of the original, unedited file i am about to edit in cPanel to my desktop so i can easily delete any mistake i make when editing or adding code to the file and upload the original file to start again if needed.

Here’s the location of the Next Gen Gallery Plugin file named ‘gallery.php’ that needs to be edited.


Once you have arrived at this location, click on download and save a copy of this file to your desktop.

Now right click the gallery.php file and click Code Edit. Once the file has opened up scroll down to line 41.

This is what you will see:

<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>

This is what it looks like after the code has been added. You can copy and paste this code over the top of your existing code or simply add the additional code to the correct location within this block of code.

<div class="ngg-gallery-thumbnail"><a title="<?php echo $image->description ?>" href="<?php echo $image->ngg_custom_fields[">thumbcode ?> >
<!--?php if ( !$image--->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" />size ?> />
</a><a href="<?php echo $image->ngg_custom_fields[">
<!--?php echo $image--->alttext ?>
<!--?php } ?-->

Here’s another copy of the edited code displayed in a different format as the Syntex highlighter used above wraps long lines. Note the custom field i created for linking images and titles to URL’s named ‘Link’.

<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->ngg_custom_fields["Link"]; ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<a href="<?php echo $image->ngg_custom_fields["Link"]; ?>">
<?php echo $image->alttext ?>
<?php } ?>

Update: I don’t use NGG anymore as the native gallery in WordPress 3.5 combined with Jetpacks Carousel is outstanding.

Don’t forget that the correct file to edit is in the Next Gen Gallery plugin files and NOT the NGG custom fields plugin files.

You could also add a custom field for a description and link that to another post or external URL. Linking Next Gen Gallery thumbnails and images to other posts and pages is easy and generates more page views as well as increasing time on site.

Don’t forget to download the edited gallery.php file after you have finished adding the code as any plugin upgrade will delete the changes you have made to the file.

If you have any problems, send me a note via the contact form and i’ll reply you with the edited file which you can easily upload.

Update: You can now install a plugin to add custom links for images in a gallery. This plugin works for images added to the native WordPress gallery and not NextGen gallery images.

16 replies on “How To Link Next Gen Gallery Images & Titles To Post or Page URL’s”

I believe I’m using JW Image Rotator that was bundled with NGG. Don’t see any other sliders installed. Not possible with this? Thanks.

I use the Nextgen Gallery in a widget position, as a coin slider. Maybe I have to configure another file of NGG except nextgen-gallery/view/gallery.php?

Thanks for useful issue.
Even I exactly have followed your instructions step by step, this didn’t work. What can it be the problem?

Its a fairly advanced tutorial from which most readers who use this tutorial have been successful at linking gallery thumbnail images to any url’s. You need to get the code right in the correct NGG plugin file. Really not best practice to edit a plugins files but there’s no other solution which works.

I suggest you keep trying or find another gallery plugin which already includes this feature. Hopefully the native WP Gallery will include this feature in the nest update.

I know there’s a been an unresolved ticket on the WordPress core trac which even the Lead development team haven’t been able to fix for over 3 years.

Can I use the NGG custom field plugin with the ScrollGallery plugin. I’m trying to link to a page when I click a thumbnail in the NGG ScrollGallery but it’s not working – ’cause no links or classes (ngg-gallery-thumbnail-box and ngg-gallery-thumbnail) have been added to the thumbnails, I have used the NGG custom field plugin successfully without the scrollgallery.
Thanks for any help


Hello David

That’s correct. The NGG Custom fields plugin will not work with Scroll Gallery. In fact, NGG really isn’t the most flexible plugin so you may need to try another like Cincopa.

Hi Brad, thanks for this, it works great! One big problem however (at least for me). The images that I don’t want to be linked anywhere now cannot be enlarged. When you click on the thumbnails they just refresh that window. Any ideas?

Thanks again

Hi Dave

Correct. When you insert the code to link images you lose some other features of NGG.

One way to fix this is to use an entirely different plugin for your media like Cincopia.

Ok, everything is working great with this, I really appreciate you posting it!

I do have a question though, how would I go about making these image links open in a new window?

Hi there Brad, thank you for providing such a comprehensive “how to”! Not being a PHP programmer, I am struggling a bit with the syntax on the open in new window/tab code. I have tried the following without success: <a href="ngg_custom_fields[“Link”]; ?>” target=”_blank”>

Am I placing it in the wrong location or using the wrong syntax?

I just signed up for your feed, am looking forward to your updates! Thank you!

Hi Lia

I haven’t worked that out yet. Maybe the forum or better still the NGG forum will be able to help you. Working 16-20 hours a day and have a massive to do list. Sorry

Leave a Reply

Your email address will not be published. Required fields are marked *