MentoClasses

Your entire CSS library. One search away.

WordPress, Gutenberg

Every CSS class you’ve ever written is already on your site. The problem is finding it when you need it. MentoClasses scans your stylesheets automatically, builds a living searchable library, and puts a dedicated search panel right inside the Gutenberg block editor. Search by name, description, or tag. Copy with one click. No switching screens, no memorising class names, no duplicates.

Get from WP
GitHub

Stop writing the same class twice

Every growing WordPress project hits the same wall. Your stylesheet has hundreds of classes. Some are documented, most are not. New team members guess names. Experienced developers forget. The result is a codebase full of .btn-primary, .button-main, .cta-button — all doing exactly the same thing. MentoClasses solves this at the source. It scans your stylesheets once, stores every class in a searchable registry, and makes that registry available directly inside the editor — so whoever is building the page always works from the same single source of truth.

A smarter way to manage CSS classes in Gutenberg

MentoClasses adds a live search panel inside the block inspector’s Advanced panel — right where you already add CSS classes. Type any keyword and matching classes appear instantly, pulled from your own stylesheet. Each class can carry a plain-language description and free-text tags, so your whole team speaks the same language. The more you use a class, the higher it rises in your personal list. Mark your go-to classes as favourites and they are always one click away. The native “Additional CSS class(es)” field is never modified — your existing workflow stays exactly as it was.

Built for teams. Useful for solo developers.

When one developer builds the stylesheet and another builds the pages, things break down fast. MentoClasses bridges that gap. The class registry is shared across the whole site, but each user keeps their own personal list of favourites and most-used classes. Editors see the classes relevant to their work. Developers can enrich any class with a description and tags directly from the admin panel. Everyone works from the same library. No Slack messages asking “what was that card class again?” No outdated documentation to maintain separately.

Automatic scanning. Always up to date.

MentoClasses scans your registered stylesheets, your theme’s style.css, and your Customizer additional CSS automatically. You can trigger a scan manually with one click, set it to run every time you publish Customizer changes, or schedule it to run daily, twice daily, or weekly in the background. The result is a CSS class registry that stays current without any manual effort. Every class is stored with its source file so you always know exactly where it comes from.

Real problems. Real answers.

Here is what you can do in under a minute.

SCENARIO 01  ·  CLASS DUPLICATION

You already have this class. You just don’t know it.

A developer adds .card-featured to the stylesheet. Three weeks later a designer adds .featured-card to the same stylesheet because nothing was searchable. Both classes exist, both are used, both do the same thing. Your CSS grows. Your codebase gets harder to maintain.

How to fix it with MentoClasses:

  1. Open Gutenberg → select any block
  2. Go to block inspector → Advanced panel
  3. Type featured in the MentoClasses search field
  4. See .card-featured appear with its description
  5. Copy → paste into the CSS class field

No duplicate created. Existing class reused. Codebase stays clean.

SCENARIO 02  ·  ONBOARDING A NEW TEAM MEMBER

Your new designer doesn’t know your CSS naming system.

A new team member joins. They open Gutenberg and start building. They type class names from memory or from a stylesheet they have to download and search manually. They get it wrong half the time. You spend time in code review catching it.

How to fix it with MentoClasses:

  1. Add descriptions and tags to your key classes in MentoClasses admin
  2. Tag .btn-primary as button, cta, primary action
  3. New designer types button in the search panel
  4. All button-related classes appear with descriptions
  5. They pick the right one — first time

Faster onboarding. Fewer code review corrections. Shared language across the team.

SCENARIO 03  ·  CAMPAIGN ANALYSIS

You ran a campaign. But did it actually work?

You sent a coupon to customers in a specific country. Now you want to know who used it, whether they were new or returning, and how much they spent. That answer normally takes a developer or an expensive tool. Not anymore.

HOW TO DO IT

  1. Open WooCommerce → Advanced Search
  2. Products tab → Coupon Used → enter your coupon code
  3. Customer tab → Country → select your target country
  4. Customer tab → Customer Type → Registered
  5. Click Search
  6. Export CSV → measure your campaign’s real reach

Every campaign leaves a trail in your order data. Advanced Shop Search helps you read it.