Add admin CSS styles to your WordPress editor

Applying admin CSS styles to your WordPress editor can greatly enhance your workflow. I will show you a couple of styles you can apply so you get the idea.

I always suggest working with a child theme for greater flexibility.

We would, first, need to enqueue the admin stylesheet to be applied ONLY to the admin area. Enter the following code to your functions.php:

add_action( 'admin_enqueue_scripts', 'load_admin_style' );
function load_admin_style() {
	wp_enqueue_style( 'admin_css', get_stylesheet_directory_uri() . '/admin-style.css', false, '1.0.0' );
}

Create a CSS file in the root of your child theme and name it admin-style.css. Now let’s add a couple of styles:

select#_generate-full-width-content option[value=contained] {
    display: none;
}

.gb-highlight {
    background: rgba(15,82,87, 0.2) !important;
}

The following stylesheet will hide the Contained dropdown value from the Content Container section of your admin. It will also apply the highlight background color when working with GenerateBlocks so that you can actually see the color applied to your admin and not only in the front end. Obviously, you would need to apply the highlight background color to your normal style, as well.

Applied stylesheet in WP backend — Applied stylesheet in WordPress backend

Add admin CSS styles to your WordPress editor

Need help on customizing GeneratePress or GenerateBlocks?

Helpful info

Keep up to date with newly released articles