DragFolio – Drag & Drop Portfolio Showcase

Descripcion

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

Screenshots

Installacion

  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

FAQ

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.

Reviews

There are no reviews for this plugin.

Contributors & Developers

“DragFolio – Drag & Drop Portfolio Showcase” is open source software. The following people have contributed to this plugin.

Contributors

Changelog

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