How to Customize a NexGEN Gallery Template

Written by vail joy
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Customize a NexGEN Gallery Template
With a custom template, you can change the overall look and feel of your gallery. (Comstock/Comstock/Getty Images)

NextGEN Gallery is a powerful WordPress plug-in for creating, managing and displaying albums and images. It offers advantages over the default WordPress Media Manager by giving you extended control over the upload, categorisation, display order and display type of photos. The author goes one step further by providing a template function that allows you to design custom page templates for use with the NextGEN short codes. No instruction is provided for how to use this feature, which can leave users of the NextGEN plug-in scratching their head.

Skill level:

Other People Are Reading

Things you need

  • Downloaded copy of the NextGEN Gallery WordPress plug-in

Show MoreHide


  1. 1

    Open the NextGEN Gallery plug-in folder and double-click on the "View" folder. Open the "gallery.php" file in an HTML editor. This file is the foundation for the gallery page and displays your album images as thumbnails based on the settings you configure in your NextGEN administration panel. To customise the template, you will need to edit the HTML tags, modify style classes or add template tags.

  2. 2

    Begin by locating Line 47, which contains the closing div of the gallery thumbnail container. To have a description or caption appear below each image, insert the following code:

    <div class="tcaption"><?php echo $image->description ?></div>

    You will now need to edit the styles to customise the look of your gallery page, as well as add a new style "tcaption" to handle the appearance of the thumbnail description.

  3. 3

    Return to the plug-in folder and open the "css" folder. Open the "nggallery.css" file in your HTML editor. Customise the styles as desired. To change the appearance of your gallery thumbnails, edit the ".ngg-gallery-thumbnail img" class. For example, to add rounded corners and a drop-shadow, change the style to something like this:

    .ngg-gallery-thumbnail img {


    border:1px solid #666;


    margin:4px 0px 4px 5px;



        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        box-shadow: 1px 2px 6px #333;
        -moz-box-shadow: 1px 2px 6px #333;
        -webkit-box-shadow: 1px 2px 6px #333;


  4. 4

    Create your custom style for your thumbnail description. For example:

    .tcaption {

    padding: 4px;

    font-size: 9px;

    font-style: italic;


  5. 5

    Save the style sheet to a new location without modifying the filename. Alternately, copy any changed styles into your WordPress theme's "style.css" document. Save the "gallery.php" file as "gallery-mygallery.php" in a new location.

  6. 6

    Connect to your Web server and create a new folder inside your WordPress theme folder. Rename it "nggallery" so it will be recognised by the plug-in. Upload your template file into this new folder.

  7. 7

    Upload your modified "nggallery.css" to your theme's root, or the main folder where your theme's "page.php" file exists. If you copied the styles into your theme's style sheet, you may skip this step.

  8. 8

    Create a page in your WordPress administration panel and use the NextGEN editor button to add the desired gallery short code. Insert the following value to use your new custom template:


    Your final short code should look something like this:

    [nggallery id=2 template=mygallery]

    Preview the page to see your changes and make adjustments to your styles as necessary.

Tips and warnings

  • Use the Opera browser or the Firebug add-on for Firefox to view your live version of the gallery page and inspect each snippet of the source code to visually understand which classes do what.
  • Avoid setting the size in your CSS as this is handled by NextGEN in the administration settings. Since thumbnails and images are resized and displayed dynamically, setting a size in your style sheet will have unpredictable results or be ignored completely.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.