Add Custom CSS to WordPress 5.0 Admin

Add Custom CSS to WordPress 5.0 Admin for Post Editor

wprocket

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.

.auto-fold .edit-post-header {top: 72px;}
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.

.edit-post-layout.is-sidebar-opened .edit-post-plugin-sidebar__sidebar-layout, .edit-post-layout.is-sidebar-opened .edit-post-sidebar {
        top: 128px;
    }

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.

/* Editor styles */
add_action('admin_enqueue_scripts', 'studio_player_editor_css');
function studio_player_editor_css() {
  wp_enqueue_style('studio_player_editor_css', get_template_directory_uri() .'editor-style.css' );
}

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!

@media (min-width: 960px) and (max-width: 1366px) {
    .auto-fold .edit-post-header {
        top: 72px;
    }
    .edit-post-layout.is-sidebar-opened .edit-post-plugin-sidebar__sidebar-layout, .edit-post-layout.is-sidebar-opened .edit-post-sidebar {
        top: 128px;
    }
}

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.

wprocket-728x98_Black

I have added the Jetpack subscription box here. You could add Genesis eNews Extended if you got it already installed. Save the widget and visit the 404 page.

You will love The following tutorials:

GenesisPro728x90

Facebook
Twitter
LinkedIn
Pinterest
Tumblr
Anwer Ashif

Anwer Ashif

Founder of RainaStudio. Help businesses and individuals to create and outstand their online presence. Our success rate is measurable. Our blog served all around the world and counting.

Leave a Reply

Your email address will not be published. Required fields are marked *