WP Manifestindependent plugin directory
manifest / unclassified / buymore-dashboard

BuyMore Explore Dashboard

Custom-coded WordPress plugin for the BuyMore Explore dashboard assignment (no page builder)

by Your Name · github.com/meetamadhu/buymore-dashboard · 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/meetamadhu/buymore-dashboard/archive/refs/heads/main.zip

A custom-coded WordPress plugin (no page builder) that renders the "Explore" bento-grid dashboard from the assignment's reference image: left sidebar navigation, a top bar with a live order count and profile, and a 7-card promotional/product grid.

Install

  1. Copy the buymore-dashboard folder into wp-content/plugins/.
  2. Activate it in Plugins. Activation automatically seeds demo content (7 Explore Cards, 2 sample orders, and a sidebar menu) so the page looks complete immediately — nothing to configure first.
  3. Create a page, add the shortcode [buymore_dashboard], publish, view it.

Plugin structure

buymore-dashboard/
├── buymore-dashboard.php        Bootstrap: constants, includes, activation hook
├── includes/
│   ├── class-bmd-cpt.php        Registers the two custom post types
│   ├── class-bmd-meta-boxes.php Per-card custom fields (slot, price, link…)
│   ├── class-bmd-nav-menu.php   Sidebar menu location + per-item icon field
│   ├── class-bmd-settings.php   Settings → BuyMore Dashboard admin page
│   ├── template-functions.php   Data-access helpers used by the template
│   ├── class-bmd-shortcode.php  [buymore_dashboard] + conditional asset loading
│   └── class-bmd-activator.php  One-time demo content seeding on activation
├── templates/
│   └── dashboard-template.php   The page markup (plain PHP, no template engine)
├── assets/
│   ├── css/bmd-dashboard.css    Front-end styles + 2 responsive breakpoints
│   ├── css/bmd-admin.css        Admin meta box / settings styling
│   ├── js/bmd-dashboard.js      Front-end interactivity (see below)
│   └── js/bmd-admin.js          Media-library pickers, conditional field rows
├── uninstall.php                 Removes plugin settings on delete (opt-in content wipe is commented out)
├── readme.txt                    WordPress.org-style readme
└── README.md                     This file

Nothing here touches theme files, and no page-builder plugin is used or required — every element is custom PHP/HTML/CSS/JS.

How dynamic content is handled

What you see on the page Where it comes from
The 7 grid cards buymore_card custom post type. Each post has a "Grid position" field (promo_1, promo_2, profile, favourites, product_1, product_2, wide) plus subtitle/price/button/background/category/swatch meta fields. The template always renders the most recently published card for a slot — publish a new one and it instantly replaces the old one, no code or template edit needed.
Sidebar "Last orders" + the order count in the top bar buymore_order custom post type. The list shows the most recent posts; the count next to "Orders" is calculated live with WP_Query + a date range (configurable in Settings, default 7 days) — it is not a hardcoded number.
Sidebar navigation A real WordPress nav menu (Appearance → Menus), registered at a custom location (buymore_sidebar_menu). This is deliberate: content editors already know how to use core menus. The plugin adds one custom field (a Dashicon slug) per menu item via the standard wp_nav_menu_item_custom_fields hook.
Top-bar profile (avatar + name) Defaults to whoever is currently logged in (wp_get_current_user() + get_avatar()), with an optional static override in Settings for a fixed demo name/photo.
Card images Post featured images. If an editor hasn't uploaded one yet, the plugin renders an inline SVG placeholder (generated from the post title) instead of a broken image — so the page never looks unfinished, even before content is filled in.

CMS usability

  • Editors manage cards/orders from Explore Cards in the admin menu — ordinary WordPress edit screens, no custom admin app.
  • The Grid position dropdown is the only thing that has to be set correctly; everything else is optional text/media fields with inline descriptions.
  • Sidebar links are edited via Appearance → Menus, which any WordPress editor already knows.
  • Site-wide values (brand name, cart link, profile override, "+N" count) live in one Settings page, not scattered across cards.

Front-end interactivity (assets/js/bmd-dashboard.js)

  • Mobile sidebar: slide-in panel with a scrim, toggled by a hamburger button.
  • All / Men / Women pills filter the product cards by a data-bmd-category attribute (set per-card in wp-admin).
  • A search icon reveals a text input that live-filters all visible cards by title.
  • The "Favourites" card has a tiny prev/next control.
  • Wishlist hearts toggle a saved state, persisted client-side in localStorage (a per-browser convenience only, not synced to the server).

No build step and no external JS dependencies — plain DOM APIs throughout.

Responsive behaviour

  • Desktop (≥1024px): 260px sidebar + 3-column bento grid, exactly as in the reference image.
  • Tablet (641–1024px): sidebar collapses to an 84px icon rail; grid reflows to 2 columns.
  • Mobile (≤640px): sidebar becomes a slide-in panel behind a hamburger toggle; grid stacks to a single column.

Notes for reviewers

  • Card images are generated inline-SVG placeholders when no featured image is set (true on a fresh activation) — this is intentional, not a bug; it keeps the layout complete without bundling stock photography of unclear license into the plugin. Upload real photos via each card's featured image to replace them.
  • uninstall.php removes only the plugin's own settings by default; it leaves your Explore Cards / Orders / menu intact so reinstalling the plugin doesn't lose content. A commented-out block shows how to wipe everything if that's the desired behaviour instead.