NextGEN Templates

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.

That’s it!

HOW TO CUSTOMIZE YOUR GALLERIES USING CSS for v2.0.x users…

As of v2.0.7, NextGEN will automatically create a directory in /wp-content called ngg_styles and a css file for you called nggallery.css . The full URL to the stylesheet would be /wp-content/ngg_styles/nggallery.css

  • To edit the CSS stylesheet, go to your WordPress dashboard >> Gallery > Other Options > Styles, there you can edit and save your CSS without having to use FTP.
  • After saving changes to the stylesheet, you may need to clear your browser cache to see the update on your site galleries. If you have a caching plugin installed, you may need to clear its cache as well.

* If you’re using an earlier version of NextGEN Gallery v2.0, we recommend that you update to the latest version. If for some reason the ngg_styles directory was not created for you, create a folder directly under wp-content, and name it ngg_styles, then create a stylesheet named nggallery.css and include this at the top of the stylesheet:

/* CSS Name: Default Styles Description: NextGEN Default Gallery Stylesheet Author: Photocrati Media Version: 2.12

This stylesheet is provided to allow users the ability of overriding the default styles for all display types */

HOW TO CUSTOMIZE YOUR GALLERIES USING CSS for Legacy v1.9.x users…

  • 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:

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/products/photocrati_nextgen/modules/ngglegacy/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

 

NextGEN Gallery News

Receive monthly emails with the latest from NextGEN Gallery and the WordPress community.