Install
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/meetamadhu/buymore-dashboard/archive/refs/heads/main.zipNo built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.
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
- Copy the
buymore-dashboardfolder intowp-content/plugins/. - 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.
- 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 fileNothing 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-categoryattribute (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.phpremoves 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.