Work Projects Grid (GridWorkProjects)

Live demo

At a glance

Component: GridWorkProjects
Category: Grids & Listings
Used as: Page block — “Grid: Work Projects”
Options: 4 editable fields
Built with: PHP, Twig, SCSS, JavaScript
Platform: WordPress · Flynt theme · Timber/Twig · ACF Pro

About this component

The portfolio grid. Projects come from the Projects post type and show device mockups that turn from greyscale to colour on hover, with a scroll-triggered entrance.

Highlights

Category filter (FlyntWP, Roots · Sage, WooCommerce, Legal, Custom) with counts, accessible pressed states and a live result count.
Each card shows industry, location, a collapsible “What I built” list and a Visit site link.
Cards are visible by default; the reveal animation can never leave them blank.

Options

Editors add this as Grid: Work Projects in a page's components. Every field it exposes:

Option	Field	Type	Details
Number	`num`	text	Default: 01
Heading	`heading`	text	Default: Selected Work
Intro	`intro`	textarea	Default: Placeholder intro text describing this grid section, standing in for real supporting copy.
Disclaimer	`disclaimer`	textarea	Default: Disclaimer: many of these websites were delivered as a sub-contractor through the various agencies I have worked with. Brands, designs and trademarks belong to their respective owners, and the live sites may have changed since my involvement. Small note under the intro. Leave empty to hide it.

Under the hood

Components/GridWorkProjects/

_style.scss Styles (SCSS) 331 lines
functions.php Fields & data (PHP) 81 lines
index.twig Markup (Twig) 85 lines
script.js Behaviour (JavaScript) 52 lines

Share this component

Built by

Christopher Alberto · Senior WordPress Engineer

Senior WordPress engineer with a decade-plus of builds across New Zealand, Australia, the UK, the US, Canada and Germany — FlyntWP, Roots/Sage, WooCommerce and custom platforms, built for speed and maintainability.

LinkedIn GitHub