Topics Covered in This WordPress Tutorial:
Installing the NextGen Gallery Plugin, Uploading Photos, Customizing Gallery Options
Exercise Preview
Tutorial Learning Path
Plugin Installation
Install and activate the NextGEN Gallery plugin from the WordPress repository
Gallery Creation
Upload 17 VW Bug images and organize them into a named gallery collection
Display Integration
Add the gallery to a blog post with lightbox functionality and custom settings
Exercise Overview
While WordPress includes a basic gallery feature, professional websites often require more sophisticated image management capabilities. NextGEN Gallery remains one of the most robust gallery plugins available, offering advanced features like lightbox effects, customizable layouts, and comprehensive image management tools. In this hands-on exercise, you'll master the complete workflow from installation to customization, creating a professional-grade image gallery with interactive lightbox functionality that enhances user engagement and showcases your visual content effectively.
Installing NextGen Gallery
- Access your WordPress Dashboard by logging in at your local development environment:
- Mac: localhost:8888/mrp/wp-admin
- Windows: localhost/mrp/wp-admin
Navigate to Plugins > Add New in the left sidebar to access the plugin repository.
Enter nextgen gallery in the search field and press Return (Mac) or Enter (Windows) to locate the plugin.
From the search results, locate NextGEN Gallery by Photocrati Media—this is the original, most established version with millions of active installations. Click Install Now.
Confirm the installation by clicking OK when prompted to download the plugin.
Complete the process by clicking Activate Plugin to enable all NextGEN functionality on your site.
With NextGEN Gallery successfully installed, you'll notice new menu options in your WordPress dashboard. Let's move on to creating your first professional gallery.
When searching for NextGEN Gallery, multiple variations will appear. Always choose the official version by Photocrati Media to ensure compatibility and support.
Installation Verification Steps
Access the plugin installation interface
Find the official plugin among search results
Ensure you're installing the correct official version
Validate successful plugin installation and activation
Creating a Gallery
Locate the new Gallery menu at the bottom of the left sidebar. Hover over Gallery and select Add Gallery / Images to begin the upload process.
In the Upload Images module (which should be expanded by default), ensure Create a new gallery is selected next to Gallery. In the adjacent text field, enter your gallery name: VW Bug. This descriptive naming convention helps with organization as your image library grows.
Click the Add Files button to launch the file browser.
Navigate to your project files: Class Files > WordPress.org Class > Gallery
Select all images efficiently by clicking the first image, then holding Shift while clicking the last image to highlight the entire collection.
Confirm your selection by clicking Open or Choose.
Initialize the upload by clicking Start Upload. Monitor the progress bar to ensure all images upload successfully—this may take a moment depending on file sizes and your connection speed.
Once upload is complete, navigate to Gallery > Manage Galleries in the left sidebar to access your gallery management interface.
Click on VW Bug to enter the gallery management screen. This central hub allows you to control image order, add captions, manage descriptions, and fine-tune your gallery's presentation.
Click the Sort gallery button above the image listings to arrange your visual narrative.
Drag and drop the image thumbnails into your preferred sequence. Consider the visual flow and storytelling aspect—perhaps start with wide shots and progress to detail images. When satisfied with the arrangement, click Update Sort Order.
Return to the main gallery view by clicking the Back to gallery button on the right.
Add context to your images by entering a description for the first image: Finished VW Bug. Descriptive captions improve user experience and can boost SEO performance.
Preserve your changes by clicking Save Changes at the top. Your gallery is now ready for deployment!
Now that your gallery is configured and optimized, it's time to integrate it into your content strategy by adding it to a blog post.
Gallery Setup Process
Access Gallery Creation
Navigate to Gallery > Add Gallery / Images from WordPress sidebar
Configure Gallery Settings
Create new gallery named 'VW Bug' and prepare for image upload
Upload Image Collection
Select and upload all 17 VW Bug images from Class Files directory
Organize and Customize
Sort images, add captions, and save gallery configuration
Adding the Gallery
NextGEN galleries offer versatile placement options—they can enhance blog posts, static pages, or even sidebar widgets. For this exercise, we'll create a dedicated blog post that showcases your gallery effectively.
Navigate to Posts > Add New in the left sidebar to create a new blog post.
Enter a compelling title: VW Bug Finished
In the content editor below, ensure you're working in the Visual tab for optimal gallery integration.
Position your cursor in the main content area where you want the gallery to appear.
Locate and click the Attach NextGEN Gallery to Post button
in the editor toolbar.Under Select a display type, verify that NextGEN Basic Thumbnails is selected—this layout provides the best balance of visual impact and loading performance.
Expand the display options by clicking What would you like to display?
In the Galleries field, select VW Bug from the dropdown menu.
Access advanced features by clicking Customize the display settings.
Enable AJAX pagination by clicking Yes—this creates smoother user interactions without full page reloads.
Set Add Hidden Images to Yes to ensure all gallery images are accessible through the lightbox navigation.
Lock in your configurations by clicking Save.
Publish your post by clicking Publish, then click View Post to see your gallery in action.
Your gallery should display all 17 images in an attractive grid layout. However, recent WordPress updates occasionally cause display issues with the Visual editor, showing only a single thumbnail. If this occurs, the manual code method below provides a reliable alternative.
Visual Editor LimitationRecent NextGEN versions may have issues with the Visual editor showing only one thumbnail instead of all 17 images. Manual code insertion provides a reliable alternative.
Manually Adding a Gallery Using Code
Return to the post editor by clicking the back button.
Remove the existing gallery by clicking after the thumbnail in the Visual editor and pressing Delete (Mac) or Backspace (Windows).
Switch to the Text tab to access the HTML editor for direct code insertion.
Insert the gallery shortcode: [nggallery id=1]
The ID number corresponds to your gallery's unique identifier assigned during creation. You can verify gallery IDs by visiting Gallery > Manage Galleries and noting the number adjacent to each gallery name.
Save your changes by clicking Update.
Verify the fix by clicking Preview Changes—your gallery should now display correctly with all thumbnails visible.
Test the lightbox functionality by clicking any image. It should open in an elegant modal overlay with navigation controls. If images open in separate pages instead, this indicates a browser caching issue—quit and restart your browser (possibly multiple times) then return to test the lightbox effect.
Your gallery is now functional, but let's refine the user experience by customizing the display settings for a more professional presentation.
[nggallery id=1]If lightbox effect shows a new page instead of modal window, quit and relaunch your browser. You may need to repeat this process multiple times for proper functionality.
Removing the Slideshow Link
NextGEN Gallery automatically includes a slideshow link above galleries, but this feature can appear dated and may not align with modern design preferences. The removal process depends on how you implemented your gallery—choose the appropriate method below.
If You Can Use the Visual Editor
Return to the WordPress Dashboard using the back button.
Access your posts by clicking Posts in the left sidebar.
Open the post for editing by clicking VW Bug Finished.
Click directly on the gallery thumbnail to open the gallery configuration dialog.
Expand Customize the display settings to access advanced options.
Set Show slideshow link to No to eliminate the automatically generated link that can detract from your gallery's clean appearance.
Apply changes by clicking Save.
Navigate to your site's front end by clicking Monteith Restoration & Performance at the top left.
View your updated gallery by clicking the Blog tab. Confirm that the VW Bug Finished post appears first and the slideshow link has been successfully removed.
Gallery Configuration Methods
| Feature | Visual Editor Method | Manual Code Method |
|---|---|---|
| Access Point | Click gallery thumbnail in post | Gallery > Gallery Settings |
| Setting Scope | Single post only | All galleries globally |
| Ease of Use | Point and click interface | Menu navigation required |
| Reliability | May have editor conflicts | Always works consistently |
If You Had to Manually Add the Gallery Using Code:
Return to the WordPress Dashboard using the back button.
Access gallery-wide settings by hovering over Gallery and clicking Gallery Settings.
Expand the NextGEN Basic Thumbnails section to modify default display behavior.
Change Show slideshow link to No to remove this element from all future galleries using this display type.
Save your global preferences by clicking Save.
Check your site's appearance by clicking Monteith Restoration & Performance at the top left.
Navigate to the Blog tab to verify the slideshow link removal across your gallery display.
With the slideshow link removed, your gallery now presents a cleaner, more professional appearance. Let's further enhance the visual impact by optimizing the thumbnail dimensions.
Changing the Thumbnail Size
The default thumbnail dimensions may not fully utilize your content area, potentially creating awkward spacing in your three-column layout. By adjusting the thumbnail size, you can achieve better visual balance and improved user engagement. Follow the method that corresponds to your gallery implementation approach.
Thumbnail Optimization Results
Increasing thumbnail dimensions to 126x90 pixels centers images within their containers, creating a more professional and balanced gallery appearance.
If You Can Use the Visual Editor
Return to the WordPress Dashboard using the back button.
Navigate to Posts in the left sidebar menu.
Open VW Bug Finished for editing by clicking on the post title.
Access gallery settings by clicking on the gallery thumbnail within the editor.
Expand Customize the display settings to reveal sizing controls.
Enable custom dimensions by setting Override thumbnail settings to Yes.
In the dimension fields that appear, specify 126 pixels wide by 90 pixels tall—these proportions maintain image quality while optimizing layout spacing.
Confirm your changes by clicking Save.
Preview the improvements by clicking Monteith Restoration & Performance, then navigating to the Blog tab. The enhanced sizing creates better visual hierarchy and improved center alignment within each thumbnail container.
Gallery Configuration Methods
| Feature | Visual Editor Method | Manual Code Method |
|---|---|---|
| Access Point | Click gallery thumbnail in post | Gallery > Gallery Settings |
| Setting Scope | Single post only | All galleries globally |
| Ease of Use | Point and click interface | Menu navigation required |
| Reliability | May have editor conflicts | Always works consistently |
If You Had to Manually Add the Gallery Using Code:
Return to the WordPress Dashboard using the back button.
Access system-wide gallery controls by hovering over Gallery and selecting Gallery Settings.
Ensure the NextGEN Basic Thumbnails section is expanded to modify default thumbnail behavior.
Activate custom sizing by setting Override thumbnail settings to Yes.
Configure the maximum dimensions as 126 by 90 pixels in the respective text boxes—this sizing optimizes visual impact while maintaining fast loading times.
Apply these global settings by clicking Save.
Evaluate the visual improvements by clicking Monteith Restoration & Performance and then the Blog tab. The refined thumbnail sizing creates superior visual balance and professional presentation quality.