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
0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/seltzertime/custom-tabbed-product-grid/archive/refs/heads/main.zip
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