Add Custom CSS to WordPress 5.0 Admin for Post Editor « RainaStudio

Add Custom CSS to WordPress 5.0 Admin for Post Editor

Finally, we are relying on WordPress 5.0. Today, I just come to write a blog post on another topic. I opened WordPress post editor it’s now on Gutenberg look. The editor was looking like the following screenshot.

WordPress Gutenberg Post Editor
WordPress Gutenberg Post Editor

I tested it on my desktop and it was alright. So the issue with Laptop screen size. We needed to add some space at top of post editor header. So that we could see buttons on top.

So, I inspect that header element and added the following CSS to it. But still, it was not okay. It was looking like following screenshot underneath code.

WordPress Post Editor Header Issue

So, another element masking those buttons on the right side on the header. And the following code solved it. Now, it looks okay and screenshot underneath code proves that.

Add Custom CSS to WordPress Admin

We need to implement those CSS codes to our WordPress admin. First, open your theme’s functions.php file and add the following into it. You should add them to last.

If you use child theme, replace get_template_directory_uri() with get_stylesheet_directory_uri().

Now, create a file in your theme directory called editor-style.css. And add the following code into that file. Then save and boom you done!


Using the same method you can edit style of any element in WordPress admin area. As many plugins not updated yet, we may found some issue like that.

If you got this tutorial helpful, share with your friends who might be looking for this and leave your feedback.

Anwer Ashif

I like to quote code snippet, fix things like error 503 service unavailable. Cycling, traveling and plantation are my hobbies.