Back End Interface Plugin

Question

The Back-end of Wordpress is nice, but I would like to customize the UI to some degree. My goal is to make the user experience REALLY simple for untrained users. I suspect plugins exist for this, but I thought I would ask the experts of Stack Exchange, before chasing any ideas down potentially deep rabbit holes. So, what is the preferred method of UI customization in wordpress?

Answer 1

You will need an Admin Theme. Despite its name, this should be implemented as a plugin.

Here is a basic plugin file:

<?php  # -*- coding: utf-8 -*-
/**
 * Plugin Name: T5 Admin Theme
 */

add_action( 'admin_init', 't5_admin_theme_init', 11 );

function t5_admin_theme_init()
{
    $settings = new stdClass;
    $settings->name   = 'Clean';
    $settings->url    = plugins_url( 'clean.css', __FILE__ );
    $settings->colors = array ( '#333', '#951', '#159', '#eee' );

    $GLOBALS['_wp_admin_css_colors']['clean'] = $settings;
}

As you can see, you should populate the global variable $_wp_admin_css_colors very early with an object. The three parameters are name, colors (both visible for the user in her profile page) and the URL to the stylesheet, the next file in your plugin’s directory.

Once activated, you get a very … clean admin area.

The file clean.css needs some content. Here you are free to add whatever you want. Be aware the basic admin styles are loaded too, so you will have to use !important in unhealthy doses like in this example:

/* readable font sizes */
body,
p.help, 
p.description, 
span.description, 
.form-wrap p,
input,
select,
option,
label
{
    font-size: 15px !important;
}

Tung Do has published a useful checklist for admin theme developers recently. Read that and use your browser’s DOM inspector to find the matching selectors.

You can also enqueue additional scripts, change content with filters … but I recommend not to change too much, focus on styling.