Styling the WordPress admin interface

wordpress_admin

Wouldn’t it be great if you could style the WordPress admin interface. Well you can and it is easy. In my case, a customer wanted me to remove a link in the User area of the CMS because it became redundant after I installed a user moderation plugin. It annoyed the client that the ‘Pending’ link was still visible in the User area because that link didn’t work anymore as the new plugin overtook that function. The link was placed in a real obvious spot and they kept clicking it when they wanted to moderate users instead of clicking the new link which the plugin placed elsewhere. They asked me if I could remove the link it and in the process I found a way to add in a style sheet for the Admin area which is useful for any kind of styling you may wish to implement.

Create a CSS file

The CSS code I used was as follows. Of course you can add whatever you want.

li.registered {display:none;}

Update your theme’s function file

Here is the code I put in to the function file to implement the new style sheet.

/* CSS in the CMS */
function admin_style() {
wp_enqueue_style('admin-styles', get_stylesheet_directory_uri().'/admin.css');
}
add_action('admin_enqueue_scripts', 'admin_style');

If you don’t use a Child Theme, (you should), then use the following code instead.

function admin_style() { wp_enqueue_style('admin-styles', get_template_directory_uri().'/admin.css'); } add_action('admin_enqueue_scripts', 'admin_style');
}

Now place the CSS file which I called admin.css in your active theme’s root folder. It will be something like: /wp-content/themes/twentynineteen.

Done

Only show the WordPress toolbar to Admins

If you wish to disable the WordPress toolbar for all users except Admins, then place this small snippet of code in your theme’s function file.

// Remove Toolbar for users except for Admins
if (!current_user_can('administrator')) :
  show_admin_bar(false);
endif;

Why would you want to disable the toolbar in the first place? Well for one, if you run a BuddyPress site and most members on your website are BBPress forum participants, then the toolbar is overkill as you already have your user profile on the front-end of the website. In fact any kind of members plugin that has user profiles on the front-end of the site are better without the toolbar.

However, retaining the toolbar for Admins is a good idea if you decide to disable the toolbar for other roles. The reason is it gives quicker access to the Admin area without having to append /wp-admin/ to the URL to enter the CMS. It is also handy as you can directly edit pages when on the website as the ‘Edit’ link on the toolbar is available. Otherwise you have to enter the CMS and go to Pages, then search for the page. More often than not, you notice that pages need a correction or edit when you are reading the page from the website, so you want to be able to fix it easily right there and then.

If you want other user roles to have access to the toolbar like Editors, then try the code below and edit depending on what user roles you want to show the toolbar too.

add_action( 'after_setup_theme', 'remove_admin_bar' );
function remove_admin_bar() {
    if( ! current_user_can( 'administrator' ) || ! current_user_can( 'editor' ) || ! current_user_can( 'author' ) ) {
        show_admin_bar(false);
    }
}

There are of course a number of plugins that can do this for you, but I prefer to add code to the function.php file in your theme as it is much lighter than loading a plugin. Often plugins have a number of features that you may not use, but you have to load that code anyway.