Home

Hello!

Welcome to the CSS Class Manager wiki!

How to use the PHP filter

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' );

Generate class names from your custom CSS

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' );

How to add CSS classes without saving them to the database or class manager list

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