How to Create a Tabbed Image Gallery in WordPress?

By Raman Sharma

Reader Disclosure

Tabbed image gallery using HTML and CSS

A few days back, one of my clients asked me to create a tabbed image gallery for their landing page. Luckily, it was a WordPress website so I was able to create a tabbed image gallery without any coding.

However, it was my first time creating a tabbed photo gallery in WordPress, it took me some hours of research to get it done. During this research, I found 3 easiest methods to create tabbed image gallery in WordPress.

So, I decided to write a complete guide to help WordPress website owners easily create tabbed image galleries for their websites. In this article, I will provide a step-by-step guide for all three methods of creating a tabbed image gallery in WordPress.

Ultimate Blocks is one of my favorite WordPress plugins. It provides around 26 different blocks in a single plugin including table of contents, review (schema enabled), tabbed content, FAQs, styled list, image slider, and many more.

To create a tabbed image gallery using the Ultimate Blocks plugin, first of all, go to your WordPress dashboard and navigate to Plugins > Add New Plugin. Now, search for “ultimateblocks” and install the plugin named “Ultimate Blocks – WordPress Blocks Plugin” which is by the “Ultimate Blocks” author name.

Install Ultimate Blocks plugin

Once, it’s installed and activated, go to the page where you want to add a tabbed image gallery. Make sure you are using the Blocks Editor (not the Classic Editor using its plugin).

Now, on your page, click the Add Block icon and look for the Tabbed Content block provided by the Ultimate Blocks plugin.

The Tabbed Content block will be added to your content. Click on the Plus icon to add any number of tabs you need for your tabbed gallery. After that, rename all the tabs with your preferred names.

Tabbed Content Block in WordPress

Now, it’s time to add image galleries to all the tabs one by one. Click on the first tab and in the content area click Add Block icon. Now look for the Gallery block and click on it. It will give you two options to create a gallery; Upload and Media Library.

Create tabbed gallery in WordPress

If you already have photos in your media library, just click on it and select all the photos you want to add to your gallery for this tab. Once you have successfully selected photos, click the Create Gallery button and then click on the Insert Gallery button.

Insert gallery in WordPress

It’s that simple. Your gallery will be inserted into that individual tab. Now, repeat the same process for all the required tabs. Create different galleries with different photos for different tabs. This is how you can create your tabbed image gallery in WordPress using the Ultimate Blocks plugin.

The Ultimate Blocks plugin gives you a lot of customization settings to easily customize the tab color, tab title, content color, content background color, and more.

Customize tabs in gallery

And, all of this can be done with the free version of the Ultimate Blocks plugin. You don’t need its Pro version to create a tabbed image gallery in WordPress.

However, you can’t set up animations, call-to-action, etc. with the free version of the plugin. If you want to create more advanced tabbed image galleries for your WordPress websites, you will have to buy its Pro version. But, for me, the free version seems very sufficient.

If you are using Elementor and want to create a tabbed image gallery on your WordPress website, you can do it using an Elementor widget.

First, open the page on which you want to create a tabbed image gallery. Make sure you are editing that page with Elementor. Then, search for “gallery” in the Elementor widgets. You’ll see a Basic Gallery widget and a Gallery widget.

Elementor Gallery widget

To create a tabbed gallery in Elementor, you will have to use the Gallery widget because the Basic Gallery widget allows you to create only a single gallery, not the tabbed one.

As soon as you add the Gallery widget to the page, you’ll see some settings to edit the gallery. On the Content tab, first, change the type from Single to Multiple as shown in the picture below.

Elementor Gallery Multiple Tabs

Now, click on the Add Item button to add tabs. In each tab, you can add multiple photos from your media library or by directly uploading them to your website. This way, you can add multiple tabs with multiple galleries to form a tabbed image gallery in WordPress.

Add multiple tabs to Elementor gallery

However, the important thing to note here is that this Gallery widget of Elementor comes with its Pro version. In the free Elementor version, you can create only a single basic gallery, not the tabbed image gallery.

Read Also: 10 Must-Have WordPress Plugins For Beginners

If you are a bit familiar with HTML and CSS and don’t really want to use any plugin just to create a tabbed image gallery in WordPress, you can get it done without using any plugin.

Here’s the sample code for creating a tabbed image gallery in WordPress:

<!-- Tabbed Image Gallery Start -->
<div class="tabbed-gallery">
  
  <!-- Tab Buttons -->
  <div class="tab-buttons">
    <button class="tab-button active" data-tab="tab1">Tab 1</button>
    <button class="tab-button" data-tab="tab2">Tab 2</button>
    <button class="tab-button" data-tab="tab3">Tab 3</button>
    <button class="tab-button" data-tab="tab4">Tab 4</button>
    <!-- Add more buttons as needed -->
  </div>
  
  <!-- Tab Contents -->
  <div class="tab-contents">
    
    <!-- Tab 1 Content -->
    <div class="tab-content active" id="tab1">
      <div class="gallery">
        <!-- Image 1A -->
        <a href="https://example.com/image1.jpg" class="lightbox">
          <img src="https://example.com/image1.jpg" alt="Image 1A Description" loading="lazy">
        </a>
        <!-- Image 1B -->
        <a href="https://example.com/image2.jpg" class="lightbox">
          <img src="https://example.com/image2.jpg" alt="Image 1B Description" loading="lazy">
        </a>
        <!-- Image 1C -->
        <a href="https://example.com/image3.jpg" class="lightbox">
          <img src="https://example.com/image3.jpg" alt="Image 1C Description" loading="lazy">
        </a>
        <!-- Image 1D -->
        <a href="https://example.com/image4.jpg" class="lightbox">
          <img src="https://example.com/image4.jpg" alt="Image 1D Description" loading="lazy">
        </a>
        <!-- Image 1E -->
        <a href="https://example.com/image5.jpg" class="lightbox">
          <img src="https://example.com/image5.jpg" alt="Image 1E Description" loading="lazy">
        </a>
        <!-- Image 1F -->
        <a href="https://example.com/image6.jpg" class="lightbox">
          <img src="https://example.com/image6.jpg" alt="Image 1F Description" loading="lazy">
        </a>
        <!-- Total of 6 images in Tab 1 -->
      </div>
    </div>
    
    <!-- Tab 2 Content -->
    <div class="tab-content" id="tab2">
      <div class="gallery">
        <!-- Image 2A -->
        <a href="https://example.com/image7.jpg" class="lightbox">
          <img src="https://example.com/image7.jpg" alt="Image 2A Description" loading="lazy">
        </a>
        <!-- Image 2B -->
        <a href="https://example.com/image8.jpg" class="lightbox">
          <img src="https://example.com/image8.jpg" alt="Image 2B Description" loading="lazy">
        </a>
        <!-- Image 2C -->
        <a href="https://example.com/image9.jpg" class="lightbox">
          <img src="https://example.com/image9.jpg" alt="Image 2C Description" loading="lazy">
        </a>
        <!-- Add more images as needed -->
      </div>
    </div>
    
    <!-- Tab 3 Content -->
    <div class="tab-content" id="tab3">
      <div class="gallery">
        <!-- Image 3A -->
        <a href="https://example.com/image10.jpg" class="lightbox">
          <img src="https://example.com/image10.jpg" alt="Image 3A Description" loading="lazy">
        </a>
        <!-- Image 3B -->
        <a href="https://example.com/image11.jpg" class="lightbox">
          <img src="https://example.com/image11.jpg" alt="Image 3B Description" loading="lazy">
        </a>
        <!-- Image 3C -->
        <a href="https://example.com/image12.jpg" class="lightbox">
          <img src="https://example.com/image12.jpg" alt="Image 3C Description" loading="lazy">
        </a>
        <!-- Add more images as needed -->
      </div>
    </div>
    
    <!-- Tab 4 Content -->
    <div class="tab-content" id="tab4">
      <div class="gallery">
        <!-- Image 4A -->
        <a href="https://example.com/image13.jpg" class="lightbox">
          <img src="https://example.com/image13.jpg" alt="Image 4A Description" loading="lazy">
        </a>
        <!-- Image 4B -->
        <a href="https://example.com/image14.jpg" class="lightbox">
          <img src="https://example.com/image14.jpg" alt="Image 4B Description" loading="lazy">
        </a>
        <!-- Image 4C -->
        <a href="https://example.com/image15.jpg" class="lightbox">
          <img src="https://example.com/image15.jpg" alt="Image 4C Description" loading="lazy">
        </a>
        <!-- Add more images as needed -->
      </div>
    </div>
    
    <!-- Add more tab contents as needed -->
    
  </div>
  
</div>

<!-- Lightbox Modal -->
<div id="lightbox-modal" class="lightbox-modal">
  <span class="close">&times;</span>
  <img class="lightbox-content" id="lightbox-img" src="" alt="Full Size Image">
  <div id="lightbox-caption" class="lightbox-caption"></div>
</div>

<!-- Tabbed Image Gallery End -->

<!-- Custom Styles -->
<style>
.tabbed-gallery {
  max-width: 1000px;
  margin: 40px auto;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 10px;
  overflow: hidden;
}

.tab-buttons {
  display: flex;
  flex-wrap: wrap;
  background-color: #333;
}

.tab-button {
  background-color: #333;
  border: none;
  outline: none;
  padding: 14px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: #fff;
}

.tab-button:hover {
  background-color: #555;
}

.tab-button.active {
  background-color: #0073aa;
  color: #fff;
}

.tab-contents {
  padding: 20px;
  background-color: #f9f9f9;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.gallery a {
  display: block;
  position: relative;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

/* Lightbox Styles */
.lightbox-modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  padding-top: 60px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
  border-radius: 8px;
}

.lightbox-caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
}

.close {
  position: absolute;
  top: 30px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: color 0.3s;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Responsive Adjustments */
@media (max-width: 900px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .gallery {
    grid-template-columns: 1fr;
  }
  
  .tab-button {
    padding: 10px;
    font-size: 14px;
  }

  .lightbox-content {
    max-width: 90%;
    max-height: 70%;
  }

  .close {
    top: 15px;
    right: 25px;
    font-size: 35px;
  }
}
</style>

<!-- Tab Functionality and Lightbox Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const tabButtons = document.querySelectorAll('.tab-button');
  const tabContents = document.querySelectorAll('.tab-content');
  
  // Tab Switching Functionality
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const target = button.getAttribute('data-tab');
      
      // Remove active class from all buttons
      tabButtons.forEach(btn => btn.classList.remove('active'));
      // Hide all tab contents
      tabContents.forEach(content => content.classList.remove('active'));
      
      // Add active class to clicked button
      button.classList.add('active');
      // Show corresponding tab content
      document.getElementById(target).classList.add('active');
    });
  });

  // Lightbox Functionality
  const lightboxModal = document.getElementById('lightbox-modal');
  const lightboxImg = document.getElementById('lightbox-img');
  const lightboxCaption = document.getElementById('lightbox-caption');
  const closeBtn = document.querySelector('.close');

  // Open Lightbox
  const lightboxLinks = document.querySelectorAll('.lightbox');
  lightboxLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      lightboxModal.style.display = "block";
      lightboxImg.src = this.href;
      lightboxCaption.textContent = this.querySelector('img').alt;
    });
  });

  // Close Lightbox when clicking on <span> (x)
  closeBtn.onclick = function() {
    lightboxModal.style.display = "none";
    lightboxImg.src = "";
    lightboxCaption.textContent = "";
  }

  // Close Lightbox when clicking outside the image
  lightboxModal.addEventListener('click', function(e) {
    if (e.target === lightboxModal) {
      lightboxModal.style.display = "none";
      lightboxImg.src = "";
      lightboxCaption.textContent = "";
    }
  });
});
</script>

In the code above, replace the tab names with your relevant tab names. Replace the image URLs with your own image URLs. And, if you know a little bit of CSS, you can tweak the values to change the look and feel of the design of your tabbed image gallery.

Here’s what this tabbed image gallery will look like on the front end:

Tabbed image gallery using HTML and CSS

You just need to copy this code from here and paste it into your WordPress website’s HTML block. Yes, don’t forget to replace the tab names and image URLs.

That’s all about creating a tabbed image gallery in WordPress. Using any of these methods, you can easily create tabbed galleries in WordPress without any effort.

I personally like Elementor Pro for creating tabbed image galleries. But, if you are not using Elementor Pro and don’t have any future plans of using it, you can go with the Ultimate Blocks plugin to create a tabbed image gallery in WordPress.

The third method I mentioned in this post is for code-friendly guys. If you have a bit of HTML and CSS knowledge, you can go with the third method and by tweaking the CSS of the code, you can make your tabbed image gallery look amazing.

Share This Blog:

Leave a Comment