Building a Lightbox JS Gallery Plugin for ClassicPress & WordPress using Custom Post Types

One of the power tools that WordPress & ClassicPress give is the ability to tap into the in-built functionality of the software core. I got a challenge by a customer recently and as they shared, I figured using lightbox JS by Lokesh as a tool for implementation would be spot on. The video below highlights this.

YouTube video explaining the Lightbox JS Gallery Plugin in build.

I am going to make a plugin that works on both platforms using

  1. Custom post types
  2. Attachment post type
  3. WP_Query` class and get_posts()
  4. Lightbox JS library by Lokesh
  5. Of course, style in CSS.

Setting up the plugin and adding custom post type

With a file structure like this below in the image

We add the code below to the litbox-gallery.php file.

<?php

/**
 * Plugin Name: Litbox Gallery
 * Plugin URI: https://omukiguy.com
 * Description: Lightbox custom ClassicPress/WordPress Plugin
 * Author: Laurence Bahiirwa
 * Author URI: https://omukiguy.com
 * Version: 0.1.0
 */

 /**
 * Register a custom post type called "gallery".
 *
 * @see get_post_type_labels() for label keys.
 */
function wpdocs_codex_gallery_init() {
    $labels = array(
        'name'                  => _x( 'Galleries', 'Post type general name', 'textdomain' ),
        'singular_name'         => _x( 'gallery', 'Post type singular name', 'textdomain' ),
        'menu_name'             => _x( 'Galleries', 'Admin Menu text', 'textdomain' ),
        'name_admin_bar'        => _x( 'gallery', 'Add New on Toolbar', 'textdomain' ),
        'add_new'               => __( 'Add New', 'textdomain' ),
        'add_new_item'          => __( 'Add New gallery', 'textdomain' ),
        'new_item'              => __( 'New gallery', 'textdomain' ),
        'edit_item'             => __( 'Edit gallery', 'textdomain' ),
        'view_item'             => __( 'View gallery', 'textdomain' ),
        'all_items'             => __( 'All Galleries', 'textdomain' ),
        'search_items'          => __( 'Search Galleries', 'textdomain' ),
        'parent_item_colon'     => __( 'Parent Galleries:', 'textdomain' ),
        'not_found'             => __( 'No Galleries found.', 'textdomain' ),
        'not_found_in_trash'    => __( 'No Galleries found in Trash.', 'textdomain' ),
        'featured_image'        => _x( 'gallery Cover Image', 'Overrides the “Featured Image” phrase for this post type. Added in 4.3', 'textdomain' ),
        'set_featured_image'    => _x( 'Set cover image', 'Overrides the “Set featured image” phrase for this post type. Added in 4.3', 'textdomain' ),
        'remove_featured_image' => _x( 'Remove cover image', 'Overrides the “Remove featured image” phrase for this post type. Added in 4.3', 'textdomain' ),
        'use_featured_image'    => _x( 'Use as cover image', 'Overrides the “Use as featured image” phrase for this post type. Added in 4.3', 'textdomain' ),
        'archives'              => _x( 'gallery archives', 'The post type archive label used in nav menus. Default “Post Archives”. Added in 4.4', 'textdomain' ),
        'insert_into_item'      => _x( 'Insert into gallery', 'Overrides the “Insert into post”/”Insert into page” phrase (used when inserting media into a post). Added in 4.4', 'textdomain' ),
        'uploaded_to_this_item' => _x( 'Uploaded to this gallery', 'Overrides the “Uploaded to this post”/”Uploaded to this page” phrase (used when viewing media attached to a post). Added in 4.4', 'textdomain' ),
        'filter_items_list'     => _x( 'Filter Galleries list', 'Screen reader text for the filter links heading on the post type listing screen. Default “Filter posts list”/”Filter pages list”. Added in 4.4', 'textdomain' ),
        'items_list_navigation' => _x( 'Galleries list navigation', 'Screen reader text for the pagination heading on the post type listing screen. Default “Posts list navigation”/”Pages list navigation”. Added in 4.4', 'textdomain' ),
        'items_list'            => _x( 'Galleries list', 'Screen reader text for the items list heading on the post type listing screen. Default “Posts list”/”Pages list”. Added in 4.4', 'textdomain' ),
    );
 
    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'publicly_queryable' => true,
        'show_ui'            => true,
        'show_in_menu'       => true,
        'query_var'          => true,
        'rewrite'            => array( 'slug' => 'gallery' ),
        'capability_type'    => 'post',
        'has_archive'        => true,
        'hierarchical'       => false,
        'menu_position'      => null,
        'supports'           => array( 'title', 'editor', 'thumbnail'),
    );
 
    register_post_type( 'gallery', $args );
}
 
add_action( 'init', 'wpdocs_codex_gallery_init' );

Enqueue the JavaScript and CSS from Lightbox JS library

Download the lightbox js from http://lokeshdhakar.com/projects/lightbox2/ and extract the dist folder into your assets folder in the plugin.

add_action('wp_enqueue_scripts', 'add_our_custom_scripts');

function add_our_custom_scripts() {
    wp_enqueue_style( 'litbox-style', trailingslashit( plugin_dir_url(__FILE__) ) . 'assets/css/lightbox.min.css', false );
    wp_enqueue_script( 'litbox-script', trailingslashit( plugin_dir_url(__FILE__) ) . 'assets/js/lightbox.min.js', array('jquery'), '20190629', true );
}

Querying the custom post type and attachment post type

Styling the incoming data from Queries

Add the line below to the enqueue scripts to add a custom css file

wp_enqueue_style( 'litbox-gallery-style', trailingslashit( plugin_dir_url(__FILE__) ) . 'assets/css/litbox.css', false );

Final enqueue script looks like this

add_action('wp_enqueue_scripts', 'add_our_custom_scripts');

function add_our_custom_scripts() {
    wp_enqueue_style( 'litbox-style', trailingslashit( plugin_dir_url(__FILE__) ) . 'assets/css/lightbox.min.css', false );
    wp_enqueue_style( 'litbox-gallery-style', trailingslashit( plugin_dir_url(__FILE__) ) . 'assets/css/litbox.css', false );
    wp_enqueue_script( 'litbox-script', trailingslashit( plugin_dir_url(__FILE__) ) . 'assets/js/lightbox.min.js', array('jquery'), '20190629', true );
}

Add CSS to the file to bring life to the queried data.

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 2rem;
    height: 200px;
}

.image-set {
    display: block;
    height: 200px;
    overflow-y: hidden;
}

.image-set a {
    display: block;
    width: 100%;
    height: 100%;
}

.image-set img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Putting these together should be a breeze and you will be able to use the plugin now. The plus would be making this into a shortcode friendly plugin and make it usable in several places.

Have you tried this? Please let me know how you fared, were you successful?


Comments

2 responses to “Building a Lightbox JS Gallery Plugin for ClassicPress & WordPress using Custom Post Types”

  1. Hi, thank you for sharing this. However, it does not work for me. I get error from WordPress saying “your website is experiencing technical issues”. Would it be possible for you to share all the files actually?

    1. omukiguy Avatar
      omukiguy

      There is no way for me to know why the error is showing up but you get a proper analysis in the WP email you get for the error. Can you share that then we can get a solution?

Leave a Reply

Your email address will not be published. Required fields are marked *