Photos and images are a great way to reinforce messages, break up copy on your website, and help make it more engaging for your visitors.
You’ve probably used the ‘Add Media’ function in WordPress to add images to your pages and posts. However, what if you’d like to display more than one photo in a grid of thumbnails?
There are lots of plugins available that provide gallery functionality in WordPress, however, did you know that WordPress has it’s own default Gallery option available?
In this quick tip, I’ll take you through the steps showing you how to add an image gallery in WordPress, with the added bonus of a lightbox popup so people can also easily browse through full size versions of your images.
How to Use the ‘Create Gallery’ Feature in the WordPress Media Uploader
1. Log into the WordPress dashboard. Open the page or post that you’d like to insert the gallery on.
2. Place your cursor in the text editor where you’d like to insert the gallery and click ‘Add Media’.
3. Click on the ‘Create Gallery’ option on the left hand navigation.
4. You can now choose to either ‘Upload Files’ to the Media Library or select images you have previously uploaded. Then select ‘Create Gallery’.
5. You can easily reorder your images by clicking to drag and drop them into place.
6. Next you can choose how you’d like to ‘link to’ the images. The option of ‘none’ means they won’t be clickable. Otherwise you can choose to link through to the ‘attachment page’ or ‘media file’.
7. Select the ‘Columns’ drop down box and select the number of columns you’d like your images to be displayed across.
8. Select the ‘Size’ drop down to specify the size of the images you’d like to use.
9. Add a title, alt text for each photo. You can also choose to add a caption, which will be displayed beneath the image.
Learn PHP for free!
Make the leap into server-side programming with a comprehensive cover of PHP & MySQL.
RRP $11.95 Yours absolutely free
10. Your image gallery will then be inserted where your cursor was placed. To edit the gallery, click in the gallery area surrounding the photos and click on the edit (pencil) icon. To remove a gallery simply click on the ‘X’.
11. When you hit ‘save draft’ and ‘preview’ you should see an example like this:
11. To extend further upon the default WordPress gallery you can install a plugin such as Responsive Lightbox by dFactory so that when you click on a thumbnail, the image will be opened in a responsive slider.
So there you have it, a simple WordPress image gallery in 5 minutes. For more information on the WordPress Gallery, check out the WordPress Codex.
If you have any WordPress gallery plugins you like to use or recommend, please be sure to share it in the comments below.
Chris isn't afraid to admit it: he's a geek from way back, having worked in IT for more than 20 years. He co-founded a digital agency called Clickify, working with a great team of developers and marketers, and is also the WordPress Editor for SitePoint. Chris is passionate about keeping up-to-date with the latest web technologies and can be found at many of the tech events in Melbourne, Australia. For more details, check out his personal site at chrisburgess.com.au.
Jump Start Git, 2nd Edition
Visual Studio Code: End-to-End Editing and Debugging Tools for Web Developers