Directory / plugin

DragFolio – Drag & Drop Portfolio Showcase

v1.1.0 · by Hameem Mahdad Kader

A beautiful drag-and-drop portfolio plugin. Showcase your projects with image, title, description, and a custom button — reorder live on the frontend.

View on WordPress.org

About this plugin

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;
}

Plugin tags