One of the odd things about using the WordPress gallery shortcode is that you cannot attach custom links to your images (thumbnails). By default, they link to either a larger version of the same image or they link to an attachment page that acts like a slideshow viewer. But what if you want to link your images to something else such as a page or even an external website?
This has become an ongoing issue for many. Over the years that I’ve been designing WordPress themes, both free and premium, I get the question of “How can I link my images to something else?” like I got several days ago from someone who is using my Shaped Pixels theme. In fact, I realized a lot of people want to set their own links to their gallery photos.
After doing a quick look into how this can be achieved, I found a very cool plugin called WP Gallery Custom Links that appears to have a lot of 5-Star ratings and reviews, so I decided to try this one out.
Installing the Plugin
Fairly straight forward as it often is with most plugins, there are usage instructions to help you out. I would recommend reading through them and to see what your options are.
- While logged into your site’s dashboard, go to Plugins >> Add New, and then type in the search for WP Gallery Custom Links
- Click on Install and then Activate it.
Create Your Gallery
Just like you normally would, create your gallery using the WordPress gallery shortcode and attributes. I will let you do this part, but if you need a reference on how this is done, check out the WordPress Codex for help in this area:
WordPress Gallery
Gallery Shortcode
Adding Your Custom Link
Providing that your gallery images are selected and ready to be inserted into your gallery page, we need to do a few things like adding ALT tags, Captions (if any), but aside from all that, the purpose of this quick tutorial is to add custom links to our images before we insert the gallery into our page.
In the screenshot below, you will notice some new fields added to your attachment window:
- Gallery Link URL - The full URL to whatever you link to.
- Gallery Link Target - Opens the link in a new window (tab) etc.
- Gallery Link OnClick Effect - Removes or keeps effects when clicked, such as lightboxes or other events
- Gallery Link Addition CSS Classes - Lets you add styles to the link
Basically once you are done setting up each image thumbnail, you can go ahead and insert your new gallery into your page.
What if you already have a Gallery?
Easy enough…simply open the page or post where your gallery is and edit your gallery. When you have the gallery open for editing, click on each image and fill in the Gallery Link URL and other settings. Once done, click on “Update Gallery” and try your new gallery out!