WordPress photo gallery without plugin

Learn how to make your WordPress website photo gallery Lightbox-ready. That way your clients don’t have to install any plugin to have a fully functional native WordPress photo gallery with Lightbox effects.

Let’s get started.

  1. Go to Lokesh Dhakar’s website. Study his tutorial on how to use his version of Lightbox, then download Lightbox from there.
  2. Unzip and move the jQuery, CSS, and image files to the appropriate folders in your website directory.
  3. Notice that what connects the images to the Lightbox script is the data-lightbox attribute value.
  4. If you took time to study Lokesh Dhakar’s Lightbox implementation tutorial properly, you won’t have a problem understanding what we’ll be doing next.

    Since it’s the data-lightbox attribute that connects the image and the Lightbox script, we need to find a way to insert it into our image link and that’s where the next step comes in.

  5. Study and copy the block of code below and paste it into your functions.php file.
    /* Add  data-lightbox attribute to WordPress Gallery Photos */
    add_filter('wp_get_attachment_link', 'rc_add_rel_attribute');
    function rc_add_rel_attribute($link) {
    global $post;
    return str_replace('<a href', '<a data-lightbox="samples" href', $link);
    }
    
  6. The above block of code helps us establish a connection between our gallery images and the Lightbox script.

  7. Enqueue or add the Lightbox script and CSS to the header of your website.
     <script src="js/lightbox.min.js"></script>
     <link href="css/lightbox.css" rel="stylesheet" />
    
  8. Now install a gallery, test it, and see for yourself that you’re a genius. You have a sleek, lightweight, and fast loading gallery with a Lightbox effect.

To add more features, refer to Lokesh Dhakar’s tutorial via the link provided in step 1 of this tutorial.

If you suffer from what I Call code anxiety (No offense), then this tutorial isn’t for you. Study How to use native WordPress photo gallery. Note: You’d have to install a plugin for it to be Lightbox-ready.
That is it. If you have any questions, please use the comment form below and I’d be glad to help you.
Comments are appreciated.

  • Exactly what I needed! Thank you for sharing!

  • Chib says:

    Thank you so much for the comment Doubleedesign. Glad you like it-Enjoy.

  • Leave a Reply