WP Manifestindependent plugin directory
manifest / ecommerce / custom-tabbed-product-grid

Custom Tabbed Product Grid

Mobile-optimized WordPress plugin for beautiful tabbed product grids

by Cliff Cordes · github.com/seltzertime/custom-tabbed-product-grid · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/seltzertime/custom-tabbed-product-grid/archive/refs/heads/main.zip
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
Readme github.com/seltzertime/custom-tabbed-product-grid ↗

Requires: WordPress 5.0+, PHP 7.0+ License: GPL v2 or later

A powerful, mobile-optimized WordPress plugin for creating beautiful tabbed product grids with customizable categories and images. Features fully responsive design with touch-friendly interactions.

🎯 Features

Core Functionality

  • ✅ Unlimited Grids - Create as many product grids as you need
  • ✅ Unlimited Categories - Organize products into unlimited tabs/categories
  • ✅ Unlimited Products - Add unlimited products per category
  • ✅ Dual Images - Primary and hover/secondary image for each product
  • ✅ Flexible Layout - 2-6 column layouts, responsive to screen size
  • ✅ Toggle Options - Show/hide titles, tabs, and library link

Mobile Optimization

  • 📱 Mobile-First Design - 5 comprehensive responsive breakpoints
  • 📱 Touch-Friendly - Optimized touch interactions for mobile devices
  • 📱 Mobile Dropdown - Category selector on small screens
  • 📱 Fluid Typography - Scales perfectly across all devices
  • 📱 Responsive Images - Srcset and native lazy loading

Management Features

  • 🗂️ Soft Delete - Trash/restore grids before permanent deletion
  • 🗂️ Bulk Actions - Manage multiple grids at once
  • 🗂️ Duplicate Grids - One-click grid duplication
  • 🗂️ Export/Import - Backup and transfer grids via JSON
  • 🗂️ Drag & Drop - Reorder categories and products easily

Professional Features

  • 🔐 Secure - CSRF protection, input validation, SQL injection prevention
  • 🌍 Translation Ready - Full i18n support with text domain
  • ♿ Accessible - ARIA attributes, keyboard navigation, reduced motion support
  • ⚡ Performance - Conditional asset loading, optimized queries
  • 🎨 Customizable - CSS custom properties for easy theming

📦 Installation

Method 1: Upload via WordPress Admin

  1. Download the plugin ZIP file
  2. Go to Plugins → Add New in WordPress
  3. Click Upload Plugin
  4. Choose the ZIP file and click Install Now
  5. Click Activate Plugin

Method 2: Manual Installation

  1. Download and extract the plugin ZIP file
  2. Upload the custom-tabbed-product-grid-v2-mobile folder to /wp-content/plugins/
  3. Go to Plugins in WordPress admin
  4. Find Custom Tabbed Product Grid and click Activate

Method 3: FTP Upload

  1. Extract the plugin ZIP file
  2. Upload via FTP to /wp-content/plugins/
  3. Activate in WordPress admin under Plugins

🚀 Quick Start

Create Your First Grid

  1. Go to Tabbed Grids in WordPress admin
  2. Click Add New Grid
  3. Configure:
    • Grid Name - Internal name (not shown publicly)
    • Grid Title - Displayed heading
    • Description - Subtitle text
    • Number of Columns - 2-6 columns
    • Display Options - Toggle titles, tabs, library link
  4. Add Categories (tabs):
    • Enter unique Category ID (lowercase, dashes only)
    • Enter display name
  5. Add Products to each category:
    • Product title
    • Product link URL
    • Primary image (always shown)
    • Hover image (optional, shown on hover/tap)
  6. Click Create Grid

Display Your Grid

Copy the shortcode from the grid list:

[tabbed_product_grid id="1"]

Paste it into any post, page, or widget.

📖 Usage

Shortcode

[tabbed_product_grid id="X"]

Replace X with your grid ID (found in the admin list).

Shortcode Examples

[tabbed_product_grid id="1"]
[tabbed_product_grid id="5"]

Display Options

Configure in the admin editor:

  • Show Product Titles - Display title under each product
  • Show Category Tabs - Display category navigation
  • Show "See Entire Library" Link - Display custom CTA link
  • Number of Columns - Desktop columns (2-6)

Responsive Behavior

Screen Size Columns Tab Display
Desktop (1201px+) Configured (2-6) Horizontal tabs
Laptop (1025-1200px) Max 4 Horizontal tabs
Tablet Portrait (769-1024px) Max 3 Scrollable tabs
Mobile Landscape (481-768px) 3 Dropdown
Mobile Portrait (320-480px) 2 Dropdown
Extra Small (<320px) 1 Dropdown

Touch Interactions

Mobile Devices:

  • Single Tap - Shows hover image for 2 seconds
  • Double Tap - Toggles hover image permanently
  • Tap Outside - Hides hover image

Desktop:

  • Mouse Hover - Shows hover image
  • Click - Follows product link

🎨 Customization

CSS Custom Properties

Customize colors and spacing by adding to your theme:

:root {
    --tpg-accent-color: #5f7eff;      /* Blue accent */
    --tpg-active-color: #d5ff3d;       /* Active/highlight */
    --tpg-border-radius: 3.125rem;     /* Rounded corners */
    --tpg-border-color: #000000;       /* Border color */
    --tpg-bg-light: #F8F7F7;           /* Background */
    --tpg-link-color: #996633;         /* Links */
    --tpg-spacing-md: 1.25rem;         /* Spacing */
}

Override Styles

Add to your theme's style.css or Appearance → Customize → Additional CSS:

/* Example: Change active tab color */
.custom-tabbed-product-grid-container .tab.active {
    background-color: #your-color !important;
}

/* Example: Change grid gap */
.custom-tabbed-product-grid-container .custom-photo-grid {
    gap: 10px !important;
}

🛠️ Grid Management

List View

Tabbed Grids page shows all grids:

  • All - Published grids
  • Trash - Deleted grids (recoverable)

Actions

Row Actions:

  • Edit - Modify grid
  • Duplicate - Create copy
  • Export - Download as JSON
  • Trash - Move to trash (soft delete)
  • Delete Permanently - (Only in trash) Remove forever
  • Restore - (Only in trash) Recover grid

Bulk Actions: Select multiple grids and:

  • Move to Trash
  • Restore
  • Delete Permanently
  • Duplicate
  • Export

Import/Export

Export Grid:

  1. Click Export next to a grid
  2. Downloads grid-X-2025-10-08.json

Import Grid:

  1. Click Import a Grid button
  2. Choose JSON file
  3. Click Import Grid
  4. Grid appears in list (name may have "(Imported)" appended)

🔧 Troubleshooting

Grid Not Displaying

  1. Check shortcode ID - Ensure ID matches grid in admin
  2. Check grid status - Must be "Published", not in trash
  3. Check theme compatibility - Try with default WordPress theme
  4. Clear caches - Browser, CDN, WordPress caching plugins

Images Not Loading

  1. Verify images uploaded - Check Media Library
  2. Check image IDs - Re-select images in grid editor
  3. Regenerate thumbnails - Use plugin like "Regenerate Thumbnails"

Styles Look Wrong

  1. Clear browser cache - Hard refresh (Ctrl+F5 / Cmd+Shift+R)
  2. Check theme conflicts - Inspect with browser dev tools
  3. Check plugin conflicts - Disable other plugins temporarily

Touch Not Working

  1. Check device - Test on actual mobile device, not just browser resize
  2. Check JavaScript errors - Open browser console
  3. Check jQuery loaded - Required dependency

Admin Not Saving

  1. Check browser console - Look for JavaScript errors
  2. Check server PHP errors - View error logs
  3. Increase PHP limits - max_input_vars, post_max_size
  4. Check permissions - User must have manage_options capability

🔌 PHP Functions

For developers who want to use PHP instead of shortcodes:

<?php
// Display grid by ID
if (function_exists('ctpg_init')) {
    $plugin = ctpg_init();
    echo do_shortcode('[tabbed_product_grid id="1"]');
}
?>

🎯 Best Practices

Images

  • Dimensions: Use square images (1:1 ratio) for best results
  • Size: 600x600px minimum recommended
  • Format: WebP for best performance, JPG/PNG supported
  • Optimization: Compress images before upload

Product Titles

  • Length: Keep concise (1-3 words ideal)
  • Testing: Preview on 320px width devices
  • Wrapping: Longer titles will wrap on mobile

Categories

  • Count: Recommended 3-7 tabs for best horizontal fit
  • IDs: Use descriptive slugs: most-popular, best-sellers
  • Names: Clear, concise category names

Performance

  • Product count: 50-100 products per grid performs well
  • Image optimization: Always optimize images
  • Caching: Use caching plugin for best performance

🆘 Support

Documentation

  • Changelog: See CHANGELOG.md for version history
  • Mobile Optimization: See MOBILE-OPTIMIZATION-CHANGELOG.md for 2.0.0 details

Get Help

  1. Check this README
  2. Check CHANGELOG.md for known issues
  3. Contact: Cliff Cordes
  4. WordPress support forums

🔄 Upgrade Guide

From 2.0.0 to 2.1.0

  1. Backup your site
  2. Deactivate plugin
  3. Delete old plugin folder
  4. Upload new plugin
  5. Activate plugin (database auto-updates)
  6. Clear all caches
  7. Test your grids

✅ 100% Backward Compatible - All existing grids work immediately

👨‍💻 For Developers

File Structure

custom-tabbed-product-grid-v2-mobile/
├── custom-tabbed-product-grid.php    # Main plugin file
├── uninstall.php                      # Cleanup on deletion
├── README.md                          # This file
├── CHANGELOG.md                       # Version history
├── includes/                          # PHP classes
│   ├── class-database.php             # Database operations
│   ├── class-admin.php                # Admin interface
│   ├── class-ajax-handler.php         # AJAX handlers
│   └── class-shortcode.php            # Shortcode rendering
├── templates/                         # PHP templates
│   └── shortcode-output.php           # Frontend HTML
├── css/                               # Stylesheets
│   ├── tabbed-product-grid.css        # Frontend styles
│   └── admin.css                      # Admin styles
└── js/                                # JavaScript
    ├── tabbed-product-grid.js         # Frontend scripts
    └── admin.js                       # Admin scripts

Database Schema

CREATE TABLE wp_tabbed_product_grid (
    id mediumint(9) NOT NULL AUTO_INCREMENT,
    name varchar(255) NOT NULL,
    title varchar(255) NOT NULL DEFAULT '',
    tab_count int NOT NULL DEFAULT 0,
    product_count int NOT NULL DEFAULT 0,
    data longtext NOT NULL,
    status varchar(20) NOT NULL DEFAULT 'publish',
    created_at datetime DEFAULT CURRENT_TIMESTAMP NOT NULL,
    updated_at datetime DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP NOT NULL,
    PRIMARY KEY (id),
    KEY name_idx (name),
    KEY status_idx (status),
    KEY created_idx (created_at)
);

Constants

CTPG_VERSION        // Plugin version (2.1.0)
CTPG_PLUGIN_FILE    // Main plugin file path
CTPG_PLUGIN_DIR     // Plugin directory path
CTPG_PLUGIN_URL     // Plugin URL

Classes

  • Custom_Tabbed_Product_Grid - Main plugin class
  • CTPG_Database - Database operations
  • CTPG_Admin - Admin interface
  • CTPG_Ajax_Handler - AJAX request handling
  • CTPG_Shortcode - Shortcode rendering

Hooks

Currently no public hooks, but architecture supports easy addition.

📜 License

GPL v2 or later

This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version.

🙏 Credits

  • Development: Cliff Cordes
  • Architecture: Object-oriented WordPress standards
  • Testing: Internal QA
  • Icons: WordPress Dashicons

📈 Changelog

See CHANGELOG.md for detailed version history.

Recent Updates

2.1.0 (2025-10-08)

  • Major security and architectural overhaul
  • Added trash/restore functionality
  • Added bulk actions
  • Added export/import
  • Added duplicate functionality
  • Complete code refactoring
  • Full internationalization
  • Enhanced security

2.0.0 (2025-10-08)

  • Complete mobile optimization
  • Responsive breakpoint system
  • Touch-friendly interactions
  • CSS custom properties
  • Performance improvements

Made with ❤️ for WordPress