FAIR

Federated and Independent Repositories

DragFolio – Drag & Drop Portfolio Showcase

Plugin Banner

DragFolio – Drag & Drop Portfolio Showcase

by Hameem Mahdad Kader

Download
Description

DragFolio is a lightweight, zero-bloat portfolio plugin for WordPress. Add your projects and present them in a stunning responsive grid — then reorder them in real time by dragging, right on your live site.

No page builders. No bloated dependencies. Just drop the shortcode in and go.

Key Features

  • Custom Project Post Type — dedicated portfolio projects separate from your blog posts
  • 4 fields per project — Featured Image, Title, Description, and a fully custom Button (label + URL)
  • Live drag-to-reorder on the frontend — logged-in editors can drag cards to rearrange without ever opening the dashboard
  • Drag-to-reorder in the admin panel — visual card grid with grab handles and auto-save via AJAX
  • Responsive grid — 1 to 4 columns, stacks gracefully on mobile
  • Shortcode powered — works in any page, post, or widget area
  • Lightweight — no external libraries beyond jQuery UI Sortable (already bundled in WordPress)

Shortcode Usage

Place this shortcode on any page or post:

[dragfolio]

Shortcode Options

  • columns – Number of columns (1–4). Default: 3
  • draggable – Allow logged-in editors to drag-reorder on the frontend. Default: true

Examples:

[dragfolio columns="2"]
[dragfolio columns="4" draggable="false"]

Frontend Reordering

When a user with the edit_posts capability is logged in, a subtle drag hint appears above the grid and each card shows a grab handle on hover. Drag any card to a new position — the order saves automatically via AJAX with no page reload required.

Customization

All colors are CSS custom properties on :root in the frontend stylesheet. Override them in your theme’s CSS:

:root {
    --dragfolio-accent:      #ff6b6b;
    --dragfolio-accent-dark: #e84040;
    --dragfolio-card-bg:     #ffffff;
    --dragfolio-text-h:      #111111;
    --dragfolio-text-body:   #555555;
}
  1. Upload the dragfolio folder to /wp-content/plugins/, or install via Plugins Add New Search for “DragFolio”
  2. Activate the plugin through the Plugins menu in WordPress
  3. Navigate to DragFolio in the admin sidebar
  4. Click Add New Project to create your first portfolio item
  5. Add a Featured Image, Title, and fill in the Project Details meta box
  6. Publish the project
  7. Place [dragfolio] on any page or post
  1. <strong>Admin Panel</strong> — Visual card grid with drag-to-reorder handles and one-click shortcode copy

    Admin Panel — Visual card grid with drag-to-reorder handles and one-click shortcode copy

  2. <strong>Add / Edit Project</strong> — Title, Featured Image, Description, Button Label and Button URL fields

    Add / Edit Project — Title, Featured Image, Description, Button Label and Button URL fields

  3. <strong>Frontend Grid (3 columns)</strong> — Dark editorial card design with lime CTA buttons

    Frontend Grid (3 columns) — Dark editorial card design with lime CTA buttons

What shortcode do I use?

[dragfolio] — place it in any page, post, or widget text block.

Can I use more than one portfolio grid on the same page?

Yes. Each [dragfolio] shortcode instance renders its own independent grid.

Who can drag-reorder on the frontend?

Any logged-in user with the edit_posts capability (Editors and Administrators by default). Visitors see a static grid.

How do I turn off frontend drag-and-drop?

Use draggable="false" in the shortcode: [dragfolio draggable="false"]

Does this plugin work with the block editor (Gutenberg)?

Yes. Use the Shortcode block and paste [dragfolio] into it.

Will this slow down my site?

No. Assets are only enqueued on pages containing the shortcode. jQuery UI Sortable is bundled with WordPress and only loaded for logged-in editors.

How do I change the number of columns?

Use the columns attribute: [dragfolio columns="2"]. Values: 1, 2, 3 (default), 4.

Can I change the card colors to match my theme?

Yes — override the CSS custom properties in your theme’s stylesheet or via the Customizer Additional CSS panel.

Where is the project order stored?

In WordPress’s built-in menu_order field on the dragfolio_project post type.

1.1.0

  • New: Settings page — customise accent color, card background, text colors, font families, font sizes, card border radius and grid gap without editing code
  • New: Live preview panel in the Settings page
  • New: Reset to Defaults button

1.0.0

  • Initial release
Back to top