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 a 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 the top of the post editor header. So that we could see buttons on top.

So, I inspected that header element and added the following CSS to it. But still, it was not okay. It was looking like the following screenshot underneath the 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 the screenshot underneath the 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 the style of any element in the WordPress admin area. As many plugins not updated yet, we may find some issues 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.