Quick Guide: Add a Gallery to Your WordPress Site

Want to make your WordPress site pop? Image galleries are the answer. Whether you’re showcasing your portfolio, products, or precious memories, a well-crafted gallery can transform your site from bland to grand.

But what’s the best way to create these visual masterpieces? Should you use WordPress’s built-in features or opt for a plugin like FooGallery?

In this guide, we’ll compare both methods and reveal why many WordPress users are choosing plugins for their gallery needs. Get ready to unlock the full potential of your images and win new business in the process!

How to Add an Image Gallery in WordPress Without a Plugin 

WordPress offers a built-in gallery feature, eliminating the need for additional plugins. 

While convenient, this basic functionality has limitations in terms of styling options and versatility, which is why we recommend using a plugin (plugin tutorial below) for most users.

Here’s how to create a gallery using WordPress’s native tools:

1. Open the WordPress editor for your post or page.

2. Click the ‘+’ icon to add a new block.

3. Search for “Gallery” and select the Gallery block.

4. You’ll see options to upload files or select images from your media library.

5. Choose your desired images by clicking on them (make sure you’ve optimized your images first). Selected images will have a checkmark.

6. Once you’ve selected your images, click “Create a new gallery” at the bottom right.

After inserting the gallery, you can further customize it:

1. Your gallery will now appear in the editor. Here, you can:
   • Drag and drop images to reorder them
   • Click “Add” to include additional photos
   • Click on the gallery block to reveal the toolbar and sidebar options.
2. In the block settings sidebar on the right, you’ll find various options:
   • Adjust the number of columns
   • Crop images to fit
   • Set image size (Thumbnail, Medium, Large, or Full Size)
   • Choose where images link to (None, Attachment Page, or Media File)
   • Add captions
   • Adjust the gap between images
3. In the toolbar above the gallery, you can:
   • Change the gallery layout (Grid or Carousel)
   • Align the gallery (left, center, right, or wide width)

Remember, you can always edit the gallery later by clicking on it in the WordPress editor.

However, for more robust functionality and better user experience, many website owners opt for dedicated gallery plugins that address these shortcomings.

How to Create an Image Gallery With FooGallery Plugin

While WordPress offers a basic gallery function, using a specialized plugin like FooGallery can significantly enhance your gallery capabilities. Whether you run a dedicated photography site or just want your WordPress images or videos presented beautifully, FooGallery is the recommended option for several reasons:

1. It’s specifically designed for WordPress, ensuring seamless integration.
2. It offers more versatility and dynamic styling options compared to the default WordPress gallery.
3. FooGallery provides a user-friendly interface within the WordPress dashboard.
4. It caters to both beginners and advanced users with its range of features.

Key features of FooGallery include:

• Multiple gallery layouts (e.g., Masonry, Grid, Justified) 
• Hover effects and captions 
• Built-in lightbox functionality 
• SEO-friendly structure 
• Fast loading times with lazy loading 
• Advanced features like filtering and pagination (in PRO versions) 
• WooCommerce integration for product galleries (in PRO Commerce)

We think FooGallery is the best solution out there, but don’t just take our word for it:

As PRO Commerce comes with all the features available in FooGallery, we’ll go through the steps below using that as our choice plan. 

Follow the instructions below to create stunning, stylish, and engaging WordPress image galleries with FooGallery. 

Step 1: Install and Activate FooGallery in WordPress

1. Log into your WordPress dashboard.
2. Go to Plugins > Add New.
3. Search for “FooGallery” in the plugin directory.
4. Click “Install Now” next to FooGallery, then “Activate”.

For the pro version:

1. Download the FooGallery PRO zip file from your account.
2. In your WordPress dashboard, go to Plugins > Add New > Upload Plugin.
3. Choose the zip file and click “Install Now”, then “Activate”.

Step 2: Create a New Gallery and Upload Images

1. In your WordPress dashboard, go to FooGallery > Add New.
2. Give your gallery a name.
3. Click “Add Media” to upload new images or select existing ones from your WordPress media library.
4. For PRO users: You can also import media from other sources like media tags or WooCommerce products.

Step 3: Choose and Customize Your Gallery Layout

1. In the gallery editor, find the “Gallery Template” section.
2. Choose from layouts like Masonry, Justified, Grid, or others (selection depends on your plan).
3. Adjust layout-specific settings. For example:
   1. For Masonry: Set the number of columns
   2. For Justified: Set the row height

Step 4. Select Your Appearance Settings 

1. In the “General” tab, you can adjust the thumbnail size, gutters, and alignment. 

2. In the “Appearance” tab of your gallery settings:

• Choose a theme
• Set border styles
• Adjust corner rounding
• Add shadows if desired
• Preview your changes in real-time using the “Gallery Preview” tab.

Step 5. Add Effects to Your Image Gallery

1. In the “Hover Effects” section:

• Choose a hover effect (e.g., theme, color, or scaling)
• Select a hover icon if desired

2. For captions:

• Decide where to display captions (on thumbnail, in lightbox, etc.)
• Choose caption style and positioning

Step 6: Set Up Lightbox Functionality

1. In the “General” settings, select your preferred lightbox option.

2. If using the built-in lightbox:

• Choose to copy the theme from gallery settings or select a custom color
• Configure navigation options
• Set caption display preferences

Here’s an example of how a FooGallery Lightbox looks once set up:

Step 7. Implement Advanced Features (Pagination, Filtering, etc.)

For PRO users:

1. In the “Filtering” tab, enable and configure filtering options.

For PRO Commerce users:

1. Configure image protection and watermarking
2. Set up sale ribbons and buttons or WooCommerce integration

Step 8: Publish and Display Your Gallery in WordPress

1. Click “Publish” to save your gallery.
2. To add the gallery to a post or page:
   1. Use the FooGallery block in the WordPress block editor
   2. Or copy the provided shortcode and paste it where you want the gallery to appear

Check out our gallery demos to see how your product gallery could look with the help of FooGallery.  

Create Stylish Image Galleries on WordPress With FooGallery! 

While WordPress offers basic gallery functionality, FooGallery takes your image displays to the next level. Here’s why it’s the smart choice:

• Easy to use: Create stunning galleries in minutes, even as a beginner 
• Highly customizable: Tailor your gallery’s look and feel to match your site 
• User-friendly features: Filtering, pagination, and search improve visitor experience Professional results: Impress your audience with sleek, responsive galleries

Ready to transform your WordPress galleries? Choose the FooGallery plan that fits your needs today!