How to Add a Lightbox Gallery to a WordPress Photo Site Without Plugins

Updated 2026-06-22 · Hosting Reviews

Adding a lightbox gallery to WordPress photo site without plugins is easier than you think once you have the right hosting, domain, and a clean theme. In this guide we’ll walk through the exact tools you need, compare hosting options, and give you a step‑by‑step process to get your images looking professional without spending a fortune.

What You Need Before You Start

Before you dive into code, make sure you have these basics covered:

• Domain name: Choose a short, memorable .com or .photography domain that reflects your brand.
• Web hosting: For a photography website you want image‑optimized servers, fast load times, and reliable uptime. Hostinger offers shared plans starting around $3‑$5 per month with free SSL and one‑click WordPress installation, which is perfect for beginners.
• WordPress installation: Most hosts, including Hostinger, provide a one‑click installer. You’ll also need a lightweight theme that supports custom CSS (e.g., Astra, GeneratePress, or the default Twenty‑Twenty‑Three).
• Basic tools: A text editor (VS Code, Sublime, or even Notepad++) and an FTP client or the host’s file manager.

Choosing the Right Hosting for a Photography Website

Photographers need fast image delivery and enough storage for high‑resolution files. Here’s a quick comparison:

1. Shared hosting: Cheapest option, typically $3‑$8/month. Good for small portfolios (under 500 images) and low traffic. Hostinger’s shared plans include LiteSpeed caching, which speeds up image loading.
2. Cloud hosting: Mid‑range $10‑$20/month. Offers scalable resources, better performance during traffic spikes, and easier upgrades. Consider this if you sell prints or expect regular client proofing sessions.
3. VPS hosting: $15‑$30/month and up. Full control over server settings, ideal for large galleries or multiple client sites. More technical management required.

For most beginners and small studios, a shared plan from Hostinger provides the best balance of cost and speed. You can always upgrade later without migrating domains.

Setting Up WordPress and a Lightbox Without a Plugin

WordPress already includes a built‑in image gallery block, but to get the sleek overlay effect of a lightbox you’ll add a few lines of CSS and a tiny JavaScript snippet. No plugin means fewer updates and a lighter site.

1. Install WordPress: Use Hostinger’s one‑click installer. Follow the on‑screen prompts to set your admin username and password.
2. Create a new page or post: In the Gutenberg editor, add an “Image Gallery” block and upload your photos. Set the block to display images in a grid.
3. Add custom CSS: Go to Appearance → Customize → Additional CSS and paste the following:

   .gallery-item img {
     cursor: pointer;
     transition: transform .2s;
   }
   .gallery-item img:hover {
     transform: scale(1.05);
   }
   .lightbox {
     display: none;
     position: fixed;
     top: 0; left: 0; width: 100%; height: 100%;
     background: rgba(0,0,0,.9);
     justify-content: center;
     align-items: center;
     z-index: 9999;
   }
   .lightbox img { max-width: 90%; max-height: 90%; }
   

4. Insert JavaScript: Still in the Customizer, open Additional CSS/JS (or use a child theme’s functions.php to enqueue a script). Add:

   document.addEventListener('DOMContentLoaded', function() {
     const gallery = document.querySelectorAll('.gallery-item img');
     const lightbox = document.createElement('div');
     lightbox.className = 'lightbox';
     const img = document.createElement('img');
     lightbox.appendChild(img);
     document.body.appendChild(lightbox);
   
     gallery.forEach(function(pic) {
       pic.addEventListener('click', function() {
         img.src = this.src;
         lightbox.style.display = 'flex';
       });
     });
   
     lightbox.addEventListener('click', function() {
       lightbox.style.display = 'none';
     });
   });
   

5. Test the gallery: View the page on a desktop and mobile device. Clicking any thumbnail should open the overlay with the full‑size image. Adjust CSS for spacing or background opacity as needed.

This method keeps your site lightweight and avoids the overhead of a third‑party plugin.

Speed and Security Basics for Image‑Heavy Sites

Even with a custom lightbox, you’ll want to optimize loading times and protect your site:

• Image compression: Use a free tool like TinyPNG or an online batch compressor before uploading. Aim for files under 200 KB for web display.
• Lazy loading: WordPress 5.5+ adds native lazy loading. Verify it’s active in the media settings.
• Caching: Hostinger’s LiteSpeed cache works out of the box on shared plans. Enable it in the control panel.
• SSL: Free SSL is included with Hostinger’s plans. Activate it via the SSL/TLS manager to encrypt image downloads.
• Backups: Schedule weekly backups through Hostinger’s backup tool or a simple WordPress plugin (you can keep one for backups only).

Launching Your Photography Website

Now that the lightbox is set up and your hosting is optimized, follow these final steps to go live:

1. Point your domain’s DNS to Hostinger’s nameservers (provided in the account dashboard).
2. Install an SSL certificate via the Hostinger control panel – it’s usually a one‑click “Activate” button.
3. Run a speed test with GTmetrix or WebPageTest. Aim for a PageSpeed score above 80 and a fully loaded time under 3 seconds.
4. Set up Google Analytics and Google Search Console to monitor traffic and indexing.
5. Publish your site, share it on social media, and start collecting client inquiries.

With a reliable host like Hostinger, you’ll have the bandwidth and support to handle growing galleries, client proofing, and even e‑commerce for prints as your business expands.

FAQ

Do I really need to write code to add a lightbox?

No, many plugins do it for you, but writing a few lines of CSS/JS keeps the site faster and avoids extra updates. The code above works with any standard WordPress gallery block.

Can I use the same method on a website builder instead of WordPress?

Most builders (Wix, Squarespace) have built‑in lightbox features, so you wouldn’t need custom code. If you’re on WordPress, the manual approach saves money and resources.

Will Hostinger’s shared hosting handle high‑resolution images?

Yes, for typical portfolios and modest traffic. Their LiteSpeed caching and SSD storage deliver images quickly. If you expect thousands of daily visits, consider upgrading to a cloud plan.