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.

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?