BrightLeaf Digital Code Snippet Library

A production-ready, client-first A/B testing utility designed for WordPress. This utility handles A/B test resolution in the browser, making it fully compatible with page caching (Cloudflare, Varnish, WP Rocket). --- USAGE: GUTENBERG BLOCKS --- 1. Create two blocks in the editor (e.g., two different Buttons). 2. In the "Advanced" sidebar for BOTH blocks, add the class: abtestcontainer-{slug} Example: abtestcontainer-hero-cta 3. …

GOAL Adds category slugs as CSS classes to the body tag on single posts and category archives, enabling category-specific styling without custom templates. CONFIGURATION None - works out of the box Optional: Add CSS rules targeting .category-{slug} in your theme stylesheet USAGE Access in CSS as: body.category-news { /* styles * / } Example output on single post in "News" …

GOAL Creates a real-time countdown timer displaying days, hours, minutes, and seconds until a specified date. Uses WordPress timezone settings and validates date input. CONFIGURATION CSS: Style classes .countdown-timer, .countdown-segment, .countdown-number, .countdown-label WordPress: Ensure timezone is set correctly in Settings > General Date Format: Must use dd/mm/yyyy format (e.g., 31/12/2025) Accepts an optional end_text to show when the timer countdown …

This code snippet creates a custom {user_role} merge tag for Gravity Forms. It dynamically retrieves the current user's WordPress role(s) and allows you to use this information within form notifications, confirmations, and field values. Features Adds two merge tags: {user_role} (all roles) and {user_primary_role} (primary role). Automatically retrieves the logged-in user's role(s) and replaces the merge tag with the corresponding …

GOAL Creates a tabbed interface by parsing nested div structures into clickable tabs with associated content panels. Supports nested shortcodes and DOM-based parsing. CONFIGURATION CSS: Style .tabbed-content-wrapper, .tabbed-content-tabs, .tab-label, .tab-panel CSS: Define .active class for selected tab and visible panel Structure: Content must follow specific div nesting (see usage) USAGE [tabbed_content]  <div>  <div>Tab 1 Label</div>  <div>Tab 1 content here...</div>  </div> …

This snippet adds a widget to your admin dashboard and embeds your selected form in it. Works well with many add ons such as Nested Forms and Populate Anything and Live Merge Tags. Displays a custom confirmation with a link to the entry (opened in a new tab). Can easily reload the form after submissions. Triggers feeds and notifications and …

Goal Show a simple popup based on three common behaviors: Exit intent (when a desktop user moves the mouse toward the browser’s top bar) Idle time (after a visitor hasn’t moved/typed/scrolled for N seconds) After scrolling a specified amount down the page. Keep everything self‑contained: the shortcode prints its own minimal CSS and JS inline. Work nicely with normal page …

GOAL Creates a visual progress meter that calculates the sum of a specific numeric field from Gravity Forms entries and displays progress toward a goal. Supports filtering by field values, date ranges, and custom multipliers. CONFIGURATION CSS: Style .gfpm-container, .gfpm-meter, .gfpm-fill, .gfpm-caption, .gfpm-goal CSS: Set width, colors, borders for progress bar appearance Attributes: form_id, field, and goal are required USAGE …

GOAL Creates a responsive image carousel with navigation arrows, dots, touch/swipe support, and modal lightbox for full-size image viewing. Accepts image URLs or img tags as content. CONFIGURATION Optional: Override default styles by targeting class names in theme CSS Optional: Customize arrow symbols, colors, transitions USAGE Method 1 (URLs) [image_carousel] https://example.com/image1.jpg https://example.com/image2.jpg https://example.com/image3.jpg [/image_carousel] Method 2 (IMG tags) [image_carousel] <img …

Creates a new merge tag-available anywhere, not just in standard Gravity Forms areas-that retrieves the specified GET parameter. It will look for "parameter name" in the query strings of the URL and replace the merge tag with the value for that paramater.

GOAL Creates a mobile-friendly accordion component that parses nested divs into collapsible sections. Supports nested shortcodes and allows only one section to be open at a time. CONFIGURATION CSS: Add styles for .mobile-accordion-wrapper, .accordion-section, .accordion-label, .accordion-content CSS: Define .open and .visible classes for active states Structure: Content must follow specific format (see usage below) USAGE [mobile_accordion] <div>  <div>Section 1 Title</div>  <div>Section …

BrightLeaf Pricing Table — Single-File Shortcode Snippet Goal Make it easy to add a clear, modern pricing table to any page with simple shortcodes. Keep everything in one place: the layout, styles, and behavior live in this single file. Optionally connect to Freemius for checkout and automatically load your plans and prices. Features Clean pricing cards with a Monthly/Annual toggle. …

Goal This snippet creates a shortcode that displays the configured text along with a copy button to easily display copyable content on your site. Usage: [bl_copy]Some text to copy[/bl_copy] [bl_copy label="API Key"]sk_live_123...[/bl_copy] [bl_copy tag="span"]Text[/bl_copy] Attributes: label: small label shown above the value tag: wrapper tag for the value (div|span|code), default: div

Creates a shortcode to display simple information about a plugin hosted in the WP repo.