Custom style sheet and templates for NextGen Gallery (with special instructions for child themes)

NextGen Gallery is a great plugin for your WordPress site’s galleries. But often you would like to customize its look to suit your needs. Here’s how:

Create custom template files for NextGen Gallery:

Custom templates are PHP files that can be stored in the folder /nggallery/, which you can create inside your theme directory. NextGEN gallery look up always first into this folder if there are the valid template files. Copy the file gallery.php from folder /wp-content/plugins/nextgen-gallery/view/ to the newly created folder /nggallery/ in your theme folder, and rename it to gallery-yourtemplatename.php

/wp-content/themes/your-theme-folder/nggallery/gallery-yourtemplatename.php

To use now this template in a post or page you insert the tag:

[ nggallery id=1 template=yourtemplatename ]

(note: in this example, your gallery’s ID is 1)

This tells NextGEN Gallery to use ‘gallery-yourtemplatename.php’ to show the gallery output. Without this template tag, NextGEN takes the default template (gallery.php) from the plugin folder, normally located at

/wp-content/plugins/nextgen-gallery/view/gallery.php

The same you can use for album, singlepic or imagebrowser, all of them are template driver so that you can easily modify the output without having problems during a upgrade.

Note: if you have a child theme (i.e. a child theme of Thematic framework), just place the new folder /nggallery/ that contains the file gallery-yourtemplatename.php in your child theme directory. And call the template the same way as above: [ nggallery id=1 template=yourtemplatename ]

Note: same procedure for album template – the PHP file is album-extend.php (default) or album-compact.php in the folder /wp-content/plugins/nextgen-gallery/view/

==========================================

Create a custome style sheet for NextGen Gallery:

Copy file nggallery.css from folder /wp-content/plugins/nextgen-gallery/css/ to your theme’s root folder (or if you have a child theme, put it in your child theme folder). Edit it from there. NextGen Gallery will look for this file from the theme folder (or your child theme folder) first before look into the plugin’s CSS folder.

Note: if you have a child theme, the plugin’s Style Editor in Dashboard can’t recognize the file nggallery.css in your child theme folder (it can only recognize the file if it stores in the parent theme folder), so you won’t be able to use that Style Editor to edit the CSS, but you can edit it in an editor like TextMate or Text Wrangler. It will work the same.