Templates are custom themes for galleries. A few examples are shown on this page, see: Working with Templates . To have custom effects for galleries, you may need to install a NextGEN Gallery extension plugin. Other effects are built-in or created by you.
Here is a quick example on how to apply a template to your gallery (this example will use the extension plugin NextGEN 3D and 2D Animated Flux Slider Template):
- Add this shortcode to your page or post: [ nggallery id="1" template="3dfluxsliderview" ] (remove the spaces between brackets when adding it to your page or post).
- You can replace 1 with whatever ID your gallery is.
HOW TO CUSTOMIZE YOUR GALLERIES USING CSS
- Go to /wp-content/plugins/nextgen-gallery/css and make a copy of the nggallery.css file
- Place a copy of your nggallery.css file in your themes folder: /wp-content/themes/[theme you have activated]/nggallery.css
NextGEN will look to see if you have this css file in your theme and use that, or it will proceed with using its own if there isn’t a file there.
More ways to customize with CSS can be found in this help guide: How do I change the CSS of NextGEN Gallery?
*Customizing via CSS is a lot easier than PHP if you’re not familiar with coding. Here are some quick CSS tutorials for you to apply to your galleries:
- Monochrome Thumbnails On Hover
- Fade Your Thumbnails On Hover
- Add Shadows To Your Gallery Thumbnails
- Add Rounded Corners To Your Gallery Thumbnails
HOW TO CREATE YOUR OWN TEMPLATES
Beyond customizing galleries via CSS, there are other customization’s you can apply to your NextGEN Galleries, like captions below thumbnails in the thumbnail gallery, etc.
- Make a copy of the file called gallery.php located here: /wp-content/plugins/nextgen-gallery/view [or download file here]
- Make a new folder called nggallery in your theme folder: /wp-content/themes/[theme you have activated]/nggallery
- Place your copy of the file called gallery.php here
- Rename “gallery.php” to “gallery-templatename.php”
- To use, use this shortcode: [ nggallery id=1 template=templatename ] (remove the spaces between brackets when adding it to your page or post)
That’s it! :)
Both of these customization’s are update proof, so when you upgrade NextGEN Gallery, these changes should hold in place. But it is always good to create backups of your site on a regular basis & before making any major changes! See more information on security, optimization and maintenance of your site in our article here: How To Help Prevent Your WordPress Site From Breaking & Being Hacked
*Creating your own template or customizing the galleries via CSS requires knowledge of PHP code and/or CSS. Some resources on learning PHP & CSS can be found here:
OTHER TEMPLATE TUTORIALS WE’VE FOUND ON THE WEB
- CUSTOM NEXTGEN GALLERY TEMPLATES FOR WORDPRESS
- Creating a custom gallery template for NextGEN Gallery
- Creating a NextGen Gallery template
- Masonry / NextGen Gallery template
- Isotope / NextGen Gallery template