Home
Hello!
Welcome to the CSS Class Manager wiki!
Use css_class_manager_filtered_class_names filter to add class names from a PHP file.
Example:
<?php
use CSSClassManager\ClassPreset;
function plugin_prefix_add_css_classes( $class_names ) {
$additional_css_names = [
new ClassPreset( 'flex' ),
new ClassPreset( 'hidden', __( 'Hide element', 'textdomain' ) ),
];
return array_merge( $class_names, $additional_css_names );
}
add_filter( 'css_class_manager_filtered_class_names', 'plugin_prefix_add_css_classes' );Use the css_class_manager_theme_classes_css filter to add your CSS from which you want to extract the class names and show them in the Class names dropdown list.
Example:
<?php
function plugin_prefix_add_custom_css( $css ) {
// Additional CSS code as a string.
$custom_css = '
.custom-class {
background-color: #f0f0f0;
color: #333;
padding: 10px;
border-radius: 5px;
}
.another-class {
font-size: 16px;
font-weight: bold;
text-align: center;
}';
// Load CSS from a file.
$css_from_file = file_get_contents( __DIR__ . '/my-custom-css.css' );
// Load CSS from a saved option. Usefule to get any custom CSS saved by any other plugin.
$css_from_saved_option = get_option( 'my_custom_css_option', '' );
// Add styles from anywhere you want.
return $css . $custom_css . $css_from_file . $css_from_saved_option;
}
add_filter( 'css_class_manager_theme_classes_css', 'plugin_prefix_add_custom_css' );Enable the Press Space to add class names without creating them option in Preferences inside the Class Manager modal.
When this setting is enabled, you can type class names in the CSS class input and press Space to add them directly, without saving them to the database.
You can also copy and paste multiple class names and press Space. All class names will be added, but none of them will be saved to the class list.
You can see the screencast below for a clearer example:
add-classes-without-saving-to-the-db.mp4
When using the css_class_manager_filtered_class_names filter, you can use the priority property of the ClassPreset class to control the order of class names in the dropdown list. Class names are sorted by priority first, then alphabetically. By default, all class names have a priority of 0. Here is an example:
<?php
function plugin_prefix_add_css_classes( $class_names ) {
$additional_css_names = [
new ClassPreset( 'hidden', __( 'Hide element', 'textdomain' ), null, 10 ),
new ClassPreset( 'flex', '', null, 10 ),
new ClassPreset( 'md:flex', '', null, 11 ),
];
return array_merge( $class_names, $additional_css_names );
}
add_filter( 'css_class_manager_filtered_class_names', 'plugin_prefix_add_css_classes' );In this example, md:flex has the highest priority, so it appears at the top. The flex and hidden classes share the same priority and are then sorted alphabetically.
