Simple Lightbox: Anatomy of a Theme

By Sol in Know

Simple Lightbox’s themes give you an unprecedented amount of control over your site’s lightbox. Layout, colors, fonts, and even robust control over animations are fully customizable via SLB’s themes and all it takes is a bit of HTML, CSS, and JavaScript.

Today you’re going to learn about the different parts of a custom theme for Simple Lightbox. Not to worry though, as you would expect, SLB’s themes are simple.

This tutorial covers adding a custom theme as a WordPress plugin, but it could also be done as part of a theme with a few simple modifications.

Follow Along

This tutorial will be using a sample theme to illustrate the different aspects of creating custom themes for Simple Lightbox.

Theme Properties

ID

A theme’s ID must be unique so use something that is not likely to be used by another theme.

Name

Type:string

Users see a theme’s name in the theme selection list. A theme’s name should also be unique to avoid confusion with other themes.

Parent

Type:string (optional)

A theme can be a child of another theme. This is an incredibly powerful feature that seriously cuts down on theme development time.

All of the parent theme’s properties are inherited by the child theme, providing you with a foundation to start your custom theme from.

Simple Lightbox provides a special theme called slb_baseline that you to use as a starting point for your custom theme. It sets up the essential nuts and bolts of a standard lightbox. You then customize any aspect of the lightbox with your theme’s own properties.

Layout

Type:string (optional for child themes)

This property points to a file that contains the HTML layout for your lightbox. This allows you to fully customize the structure of the lightbox and what information is displayed.

Scripts

Type:array (optional for child themes)

Your theme can include custom scripts that extend the functionality of the theme, such as adding animations or custom margins and offsets.

Each script is defined as an array of properties that closely matches WordPress’ own wp_register_script() function.

array( $handle, $src, $deps, $ver )

$handle (string) — Unique ID for script file

$src (string) — URI/Path to script file

$deps (array) — Optional: Script dependencies

$ver (string) — Optional: Script version

Styles

Type:array (optional for child themes)

Your theme can also include custom CSS styles that control how the theme looks.

Each style is defined as an array of properties that closely matches WordPress’ own wp_register_style() function.