Title: CSS Class Manager – An advanced autocomplete additional css class control for your blocks
Author: Edi Amin
Published: <strong>May 25, 2024</strong>
Last modified: March 26, 2026

---

Search plugins

![](https://ps.w.org/css-class-manager/assets/banner-772x250.png?rev=3096211)

![](https://ps.w.org/css-class-manager/assets/icon.svg?rev=3092450)

# CSS Class Manager – An advanced autocomplete additional css class control for your blocks

 By [Edi Amin](https://profiles.wordpress.org/ediamin/)

[Download](https://downloads.wordpress.org/plugin/css-class-manager.1.6.1.zip)

 * [Details](https://srd.wordpress.org/plugins/css-class-manager/#description)
 * [Reviews](https://srd.wordpress.org/plugins/css-class-manager/#reviews)
 * [Development](https://srd.wordpress.org/plugins/css-class-manager/#developers)

 [Support](https://wordpress.org/support/plugin/css-class-manager/)

## Description

Struggling with adding multiple CSS classes to your WordPress blocks? CSS Class 
Manager simplifies the process with autocomplete suggestions and a dedicated manager
for adding, editing, and organizing your classes. Boost your block styling efficiency!

There are two main motivations behind creating this plugin:
 **Limitation of Block
Style** – When applying a block style, only one CSS class can be added to a block.
Unfortunately, the block editor lacks the ability to select multiple block styles.
To address this, users must resort to the Additional CSS Class(es) inspector control
to apply multiple classes. CSS Class Manager provides a powerful manager and an 
autocomplete inspector control, enabling users to easily add and apply CSS classes
to their blocks. **Poor UX of the Additional CSS Class(es) control** – The default
control for adding class names is a simple text input. This can be cumbersome, especially
when applying CSS classes frequently. With the custom inspector control provided
by CSS Class Manager, users can effortlessly add their class names, enhancing the
user experience.

### Features

 * **Advanced Autocomplete Control:** Streamline block styling with autocomplete
   functionality for CSS classes.
 * **Effortless Class Management:** Easily add, edit, or remove CSS classes directly
   within the manager interface.
 * **Body and Post Classes:** Add custom class names to post body and post containers
   using body_class and post_class filters directly from the post editor.
 * **Inline CSS Classes:** Add custom class names to any selected text inside paragraph,
   heading and other blocks that support Rich Text.
 * **Theme.json Integration:** Automatically include global class names generated
   from theme.json settings in your class suggestions.
 * **Show the control in its own panel:** User specific settings to show the Additional
   CSS Class(es) control in its own panel.
 * **Add classes without saving to the database:** User specific settings to toggle
   saving classes to the database.
 * **Import and Export:** Seamlessly transfer custom CSS class names to ensure consistency
   across projects.

### Getting Started

 1.  Activate the plugin within your WordPress setup.
 2.  The advanced control will replace the default “Additional CSS Class(es)” and can
     be found in the “Advance” block settings section.
 3.  Adding and selecting classes in the autocomplete field is similar to the tags 
     and categories fields.
 4.  To add body or post classes, look for the “Body Classes” and “Post Classes” controls
     in the Post tab of the post editor (requires custom-fields support). [See the limitations](https://github.com/ediamin/css-class-manager/wiki/Known-Issues#body-classes-preview-in-block-editor)
 5.  To add inline classes to the selected text, use the block format tool control 
     in the text formatting tools options (available in blocks that support Rich Text).
 6.  To edit and manage class names, click the “Open Class Manager” link or select “
     CSS Class Manager” from the More Menu.
 7.  Import/Export can be done from the manager modal.
 8.  Theme.json generated classes are automatically included and can be disabled from
     the Preferences in the manager modal.
 9.  Use `css_class_manager_filtered_class_names` filter to add class names with PHP
     files.

## Screenshots

 * [[
 * The advanced inspector control is located in the Advanced block settings section.
 * [[
 * Multi-select tag like input control instead of plain text field.
 * [[
 * Add body classes to your posts, pages or custom post types with the Body Classes
   control located in the Post Tab in the post editor.
 * [[
 * Add inline classes to the selected text from the text formatting tools options.
 * [[
 * Fuzzy searching with fuse.js.
 * [[
 * You can add your CSS classes and their descriptions in the CSS Class Manager 
   modal.
 * [[
 * Edit your CSS classes and their descriptions in the CSS Class Manager modal.
 * [[
 * User-specific settings for the plugin.
 * [[
 * Import or export your classes right from the manager modal.

## FAQ

### Where can I find the JavaScript and CSS non-compiled source files?

Please checkout the [GitHub repository](https://github.com/ediamin/css-class-manager)
of this plugin to see the sources.

### How to open the manager modal?

Under the Additional CSS Class(es) control, you will see a link says Open Class 
Manager. Click on that to open the CSS Class Manager preferences modal.

### How do the Body Classes and Post Classes work?

The Body Classes control adds class names to the post’s body element using WordPress’s
body_class filter, while Post Classes adds them to post containers using the post_class
filter. These controls are available in the Post tab of the post editor and require
the post type to support custom-fields.

### Can I disable theme.json generated classes?

Yes, you can disable theme.json generated class names from appearing in the dropdown
by adjusting the preferences in the CSS Class Manager modal.

### How to use the PHP filter?

Use the `css_class_manager_filtered_class_names` filter to add your class names 
from your plugin or theme. Check out the example code in this [GitHub wiki page](https://github.com/ediamin/css-class-manager/wiki#how-to-use-the-php-filter)
for more details.

### How can I add class names without saving them to the database?

You can enable the option ‘Press Space to add class names without creating them.’
to add class names without saving them to the database from the Preferences settings
in the CSS Class Manager modal. This setting is user-specific and allows you to 
manage class names temporarily during your editing session. For more details, please
refer to the [GitHub wiki page](https://github.com/ediamin/css-class-manager/wiki#how-to-add-css-classes-without-saving-them-to-the-database-or-class-manager-list).

### How to use the priority property for class presets?

You can set a priority for your class presets to control the order in which they
are applied. Higher priority classes will be applied before lower priority ones.
For more details, please refer to the [GitHub wiki page](https://github.com/ediamin/css-class-manager/wiki#how-to-use-the-priority-property-for-class-presets).

## Reviews

![](https://secure.gravatar.com/avatar/7361d1340007537f6c441e5be20c41911382de9b2d55ef47bd7e8daaa46ffec1?
s=60&d=retro&r=g)

### 󠀁[Such an improvement!](https://wordpress.org/support/topic/such-an-improvement-2/)󠁿

 [Christian Saborio](https://profiles.wordpress.org/christian-saborio/) December
19, 2025

CSS Class Manager is a total game-changer for WordPress block editing, turning the
clunky default class input into smooth autocomplete magic. The import feature is
fantastic for quickly loading in classes and getting instant suggestions, while 
body/post filters and inline text support give you pro-level control right in the
editor. It’s the kind of intuitive tool that feels like it should be core WordPress,
making styling way faster and earning a solid 5 stars.

![](https://secure.gravatar.com/avatar/df445ecea9cca33d322bc9011daf5cd75f38c65ca1e4ee4b80ee3a62994b82fb?
s=60&d=retro&r=g)

### 󠀁[A must-have plugin that should be in core!](https://wordpress.org/support/topic/a-must-have-plugin-that-should-be-in-core/)󠁿

 [Germán](https://profiles.wordpress.org/germanfrelo/) October 17, 2025

This plugin is such a hidden gem! It does exactly what it should — makes managing
CSS classes in the block editor super easy and fast. No bloat, no confusing UI, 
just a clean and lightweight solution that honestly feels like it should already
be in WordPress core. I love being able to save and label my classes (adding descriptions
is such a nice touch). It’s a total time-saver when working with custom CSS or utility
frameworks. Huge thanks to the developer for building and sharing this. It’s now
a must-have on every site I build!

![](https://secure.gravatar.com/avatar/30314d7363f045468cedc1b24216988783de7da31881f6b22a88365e53826c3f?
s=60&d=retro&r=g)

### 󠀁[Should be built in](https://wordpress.org/support/topic/should-be-built-in-3/)󠁿

 [luk4](https://profiles.wordpress.org/luk4/) September 4, 2025

Simple, efficient, handy, and lightweight plugin. Perfectly integrated into WP. 
Feels like it should be built in. The new <body> classes feature opens up many possibilities
beyond what the default WordPress UI offers. Thank you!

![](https://secure.gravatar.com/avatar/6d2e45b5cb49ad7b397c8a0a7438ec9605caf81598d65fcc151a64f333f465d2?
s=60&d=retro&r=g)

### 󠀁[Invaluable for Block Theming](https://wordpress.org/support/topic/invaluable-for-block-theming/)󠁿

 [Jakson](https://profiles.wordpress.org/jaskon/) July 14, 2025

Thanks you @ediamin – truly, thank you so much for this simple but super powerful
plugin 🙏 This is exactly what I was dreaming of to manage block classes – perfect
for introducing CSS Frameworks into Block Theming as well as it being perfect to
utilise for responsive CSS.1 zillion percent amazing – can’t imagine how much time
this will save on my development going forward Grazie millie,Jakson

![](https://secure.gravatar.com/avatar/a0e82dd6a7e877daa97820fcddd6a2cd2d23051e61f6705b4915eb07e236409c?
s=60&d=retro&r=g)

### 󠀁[Really useful!](https://wordpress.org/support/topic/really-useful-322/)󠁿

 [janebwebsite](https://profiles.wordpress.org/janebwebsite/) June 14, 2025

This is a handy way to keep track of the class/classes I’ve applied to a block. 
Choosing the option to show the classes in their own panel means I can see at a 
glance which class I’ve applied and I can easily pick a class using the drop down
list.

![](https://secure.gravatar.com/avatar/8c0ced2ad5a0c50ec3a0903b1d1946b4309a9b5e4ed01ff7f8d40bc710f49e3e?
s=60&d=retro&r=g)

### 󠀁[I really REALLY appreciate this.](https://wordpress.org/support/topic/i-really-really-appreciate-this/)󠁿

 [nick6352683](https://profiles.wordpress.org/nick6352683/) March 2, 2025

For years I used the Editors Kit plugin for the sole purpose of the CSS Class Management.
However, though the years that plugin became a disaster, with lots of garbage added
to it. Thankfully I found this little gem. The only thing that I want to add as 
a Wishlist, that the Editors Kit has is to export the custom CSS classes in php 
as well, so we can simply include that code in our plugins/themes, so we don’t have
to import/export the json files with each site installation. Nevertheless, this 
is one of my must use plugins for every site, since I have dozens of custom CSS 
classes to deal with. I can not express enough my gratitude, YOU ROCK !!!

 [ Read all 11 reviews ](https://wordpress.org/support/plugin/css-class-manager/reviews/)

## Contributors & Developers

“CSS Class Manager – An advanced autocomplete additional css class control for your
blocks” is open source software. The following people have contributed to this plugin.

Contributors

 *   [ Edi Amin ](https://profiles.wordpress.org/ediamin/)

[Translate “CSS Class Manager – An advanced autocomplete additional css class control for your blocks” into your language.](https://translate.wordpress.org/projects/wp-plugins/css-class-manager)

### Interested in development?

[Browse the code](https://plugins.trac.wordpress.org/browser/css-class-manager/),
check out the [SVN repository](https://plugins.svn.wordpress.org/css-class-manager/),
or subscribe to the [development log](https://plugins.trac.wordpress.org/log/css-class-manager/)
by [RSS](https://plugins.trac.wordpress.org/log/css-class-manager/?limit=100&mode=stop_on_copy&format=rss).

## Changelog

#### 1.6.1 – March 26, 2026

 * Add priority option for class names. [See documentation for more details.](https://github.com/ediamin/css-class-manager/wiki#how-to-use-the-priority-property-for-class-presets)

#### 1.6.0 – January 12, 2026

 * Add classes without saving to the database feature.
 * Add an user preference to toggle saving classes to the database.

#### 1.5.0 – October 04, 2025

 * Add Inline Element Classes feature to add custom class names to selected text
   inside paragraph, heading and other blocks that support Rich Text.
 * Improve CSS class name parser.
 * Exclude theme classes in exported class list json file.
 * Add a filter to manage theme classes css.
 * Fix unable to remove body classes issue.

#### 1.4.2 – September 03, 2025

 * Fix broken theme class generator when css contains line breaks.

#### 1.4.1 – September 03, 2025

 * Fix body classes not adding in pages.

#### 1.4.0 – September 03, 2025

 * Add Body Classes and Post Classes controls to the post editor for managing body_class
   and post_class filters.
 * Integrate theme.json generated class names into the class suggestions dropdown.
 * Add preference option to disable theme.json classes from appearing in suggestions.

#### 1.3.0 – May 24, 2025

 * Implement fuzzy search with fuse.js.
 * Fix overlapping typography sizes onto class list dropdown.

#### 1.2.1 – January 26, 2025

 * Improved the determination of control groups for own panel settings.

#### 1.2.0 – January 17, 2025

 * Add user preference to display the control in its own panel.

#### 1.1.0 – November 16, 2024

 * Allow colon in class names.
 * Fix preference modal tab background color.
 * Bump the minimum WordPress version requirement to 6.6 from 6.5.
 * Import PluginMoreMenuItem from wp-editor package.
 * Update scss file and use the @use instead of @import.
 * Upgrade the npm packages to the latest.

#### 1.0.0 – May 25, 2024

 * Initial release.

## Meta

 *  Version **1.6.1**
 *  Last updated **2 weeks ago**
 *  Active installations **300+**
 *  WordPress version ** 6.6 or higher **
 *  Tested up to **6.9.4**
 *  PHP version ** 7.4 or higher **
 *  Language
 * [English (US)](https://wordpress.org/plugins/css-class-manager/)
 * Tags
 * [dropdown](https://srd.wordpress.org/plugins/tags/dropdown/)[editor](https://srd.wordpress.org/plugins/tags/editor/)
   [gutenberg](https://srd.wordpress.org/plugins/tags/gutenberg/)[multiple](https://srd.wordpress.org/plugins/tags/multiple/)
   [styles](https://srd.wordpress.org/plugins/tags/styles/)
 *  [Advanced View](https://srd.wordpress.org/plugins/css-class-manager/advanced/)

## Ratings

 5 out of 5 stars.

 *  [  11 5-star reviews     ](https://wordpress.org/support/plugin/css-class-manager/reviews/?filter=5)
 *  [  0 4-star reviews     ](https://wordpress.org/support/plugin/css-class-manager/reviews/?filter=4)
 *  [  0 3-star reviews     ](https://wordpress.org/support/plugin/css-class-manager/reviews/?filter=3)
 *  [  0 2-star reviews     ](https://wordpress.org/support/plugin/css-class-manager/reviews/?filter=2)
 *  [  0 1-star reviews     ](https://wordpress.org/support/plugin/css-class-manager/reviews/?filter=1)

[Your review](https://wordpress.org/support/plugin/css-class-manager/reviews/#new-post)

[See all reviews](https://wordpress.org/support/plugin/css-class-manager/reviews/)

## Contributors

 *   [ Edi Amin ](https://profiles.wordpress.org/ediamin/)

## Support

Issues resolved in last two months:

     1 out of 1

 [View support forum](https://wordpress.org/support/plugin/css-class-manager/)