Customizing the WordPress Admin User Interface To Encourage Clients To Take Ownership and control of their website

This weekend I gave a talk at WordCamp Boston with my friend Jake (@redlist) on customizing the WordPress admin interface for clients. If you missed the talk this post is intended to be a brief recap of what we covered.

As someone who uses WordPress on a daily basis I tend to ignore most parts of the admin interface. I know exactly where everything is and it takes me a matter of milliseconds to find most things. But lets take a step back for a second and remember who we are making websites for: the end users and our clients. As web designers and developers we spend so much time on the public facing side of a website that we sometimes forget the admin interface and most importantly the client that will hopefully be managing and updating their site.

In this talk we discussed 4 things you can do to simplify the WordPress admin and make it more usable for non-technical clients.

Our Fake Client:

For example purposes we will be making a site for a fake client. Their site requirements are pretty simple:

  • Movie Review Site
  • About Us Page, Contact Us Page
  • Links in the sidebar

Custom Post Type

If you look at the default WordPress admin screen you notice a slew of options in the left hand side bar. Most of these options are useless to a client. Posts, Pages, comments, links, media appearance, settings, plugins OH MY! Luckily we can simplify this pretty easily based on our clients specific content.

Since our client’s site is primarily for movie reviews we will create a custom post type of ‘Movies’ which will appear as an option in the left hand sidebar. This makes it pretty clear to the end user that this is where you go to add movie reviews to your site.

Adding a custom post type is actually pretty easy with the help of the nifty Custom Post Types UI plugin. The plugin page has a helpful short screencast and overview of the plugin.

Once we add the custom post type it shows up in the left hand menu as ‘Movies’.

Custom Fields

Along with adding a custom post type we will also add some custom fields to simplify the writing experience for the client. Our clients movie reviews have 3 specific pieces of content:

  • Movie Cover / Screenshot
  • 1-5 star rating
  • A brief review

We will be using these custom fields instead of the main WordPress WYSIWYG interface to avoid confusion on the clients part and to free them from the burden of styling and placing the content. Floating and styling elements in the write editor can be a pain for clients.

We have also found that the default custom field panel in WordPress to be confusing to non-technical users. Instead we will be using a plugin called Custom Field Template that allows us to simplify and make things easier for the end user. This will make the expierence of writing a movie review much like filling out a simple web form:

  1. Upload thumbnail movie image
  2. Rate movie
  3. Write a brief review

Here’s what our writing screen looks like after adding a custom post type and custom fields:

WordPress admin customized writing screen with custom post type and custom fields

Here’s what our post looks like when the custom fields are inserted into our template:

Custom Fields in our WordPress Theme

Admin Menu Editor

Now that we have simplified the option for adding a movie reviews and writing the review itself, let’s focus on cleaning up the WordPress menu system.

With the Admin Menu Editor plugin we can remove, rename, customize and assign access levels for menu items per user. For this example our client only needs access to pages, media, links, comments and movies. We will hide everything else to make things much simpler. I’ve assigned administrator only access to everything but these 5 options so when a user with the access level of contributor or author etc logs in they will only see what they need!

We will also rename a few things: change media to upload photos, Comments to manage comments and links to manage links.

Admin menu editor also has some advanced options for changing icons for the menu items as well as more granular access levels.

Custom Admin Branding

Along with simplifying the menu and customizing the content types we also need to spend a bit of time customizing the color scheme of the admin interface. These customizations can make the backend of the site feel less threatening and foreign to your client and hopefully make them feel like this is their website. The whole goal of simplifying and customizing is to encourage your client to take ownership and control of their website.

The Custom Admin Branding plugin allows you to easily customize several aspects of the WordPress admin: login screen, admin header, admin footer, and also allows custom css.

Our WordPress login screen with a custom logo:
WordPress admin custom login screen

We spent a few minutes adding logos, colors as well as digging around in the WordPress admin css. Custom admin branding also allows for custom css that will override the default WordPress css.

Since our clients site is light blue we have utilized the same color scheme in the admin. We have also added the clients logo to the login screen as well as header and footer of the site.

Fluency Admin Theme

If all else fails and you don’t have time to make a custom admin theme you can always find a pre-made theme out there and tweak the colors a bit. The Fluency Admin Theme seems to be one of the better WordPress admin themes out there. It comes prebuilt with a variety of colors schemes and allows for adding a logo to the login screen etc.

Cleaning up the dashboard

Along with simplifying the number of menu options the end user has access to we can also customize the dashboard of our WordPress site. The dashboard is the first thing a user sees after they log in, and the default screen can be pretty busy.

Selecting screen options in the top right corner allows you to turn the dashboard widgets on and off. We have turned off all of the default widgets and installed two widgets that are relevant to our imaginary client:

Google analytics dashboard widget

Dashboard twitter widget

We added these two widgets so our client can see how their posting schedule corresponds to their site traffic, as well as encouraging them to manage their social media presence.

In the upper right corner of the screen you will notice a screen options tab that allows you to customize the WordPress dashboard widgets:
WordPress admin dashboard screen options

The Final Product

Here’s what our WordPress admin interface looks like after all the customizations:

Customized and simplified WordPress admin interface

Hopefully this looks much less intimidating to a non-technical user vs the default admin screen.

Slides and your thoughts!

I’d love to hear about how you customize the admin interface for your clients. Leave a comment and let me know what you think!

If you were at our WordCamp Boston talk please take a second and rate how we did! I’m always looking for feedback on how I am doing when rambling in front of a group of people. If you leave feedback I’ll give you a hi-five! Use the button below:

Slides from the presentation: