WordPress 3.8 New Admin Design

WordPress 3.8 Admin Design

If you read our recent article about the new features in WordPress 3.8, it’s no surprise that the admin UI is getting a facelift. Let’s cover the following topics related to the new admin design:

  • What’s changing
  • What’s staying the same
  • Color schemes
  • Responsive design
  • Theme selection
  • Widgets
  • Dashboard changes
  • Password Generator

You can also take a look at our WordPress 3.8 admin UI photo gallery »

What’s Changing

From a design standpoint, you’ll notice:

  • flatter elements, less gradients & shadows, more solid colors, etc.
  • a new font (Open Sans)
  • more contrast & whitespace
  • responsive design for phones & tablets

WordPress 3.8 Admin Design Most will agree that it’s an improvement, but nothing revolutionary. We’ll highlight a few of the key changes being made below, and explain them in further detail.

What’s Staying the Same

Most of the placement of things remains untouched. Your admin bar is still fixed at the top of the page. The menu on the left. Publish button in the top-right metabox. Your settings pages have not changed. Installing & activating plugins is as easy as it’s always been.

WordPress Admin Color Schemes - Default 8
The 8 default admin color schemes in WordPress 3.8.

New Admin Color Schemes

There are now 8 admin color schemes to choose from. My personal favorite is Midnight. Give them a try by navigating to “Users” > “Your Profile”.

  • Default
  • Blue
  • Light
  • Midnight
  • Coffee
  • Ectoplasm
  • Ocean
  • Sunrise

If you’re looking for additional color schemes, install the Admin Color Schemes plugin (by the WordPress Core Team) to add even more options.

WordPress Admin Color Schemes (16)
The WordPress Admin Color Schemes plugin adds 8 more options.

Responsive Design

WordPress Responsive Admin - iPhones
Responsive admin area in various color schemes

The new WordPress admin responsive design includes some nice improvements for mobile devices.

  • Improved navigation for the main menu options on the left, similar to Facebook’s mobile app & the sidr plugin.
  • Everything condensed into a single column layout
  • Larger relative font sizes throughout
  • Larger checkboxes
  • Larger pagination for listings of posts, pages, comments, media & users
  • Sub-menu items no longer open in a flyout. On click, they appear directly below the parent menu item. This is very similar to the desktop experience when you are already viewing a parent page.
  • The Open Sans font looks fantastic on mobile devices
WordPress 3.8 Mobile Menu Animation
New menu navigation on smaller screens
WordPress 3.8 Theme Chooser Overview
“Appearance” > “Themes” screen

Theme Selection

Browsing, previewing & activating new themes is now a little easier. The “Appearance” > “Themes” page has a new design. To learn more about a theme, simply click on its image (an “i” will appear on hover). This brings up a modal window with the full description, along with previous & next navigation so you can scroll right through all of your installed themes. WordPress Themes Detail Window (3.8)

Widgets

The “Appearance” > “Widgets” screen functions the same as you’re used to, but the design has changed. You still drag & drop widgets from the left side to the appropriate sidebar on the right, and edit them the same as before. Here’s what the new widgets design looks like: WordPress 3.8 Widgets Screen

WordPress 3.8 Dashboard

There are quite a few changes being made to the dashboard (the first screen you see when you login to the WordPress admin). We’ve created a separate article that outlines all WordPress 3.8 dashboard updates.

WordPress 3.8 Dashboard

New Password Generator

WordPress Password GeneratorWordPress 3.8 has added a new “Generate Password” button to the “Users” > “Add New” screen. Previously, you had to make up your own password when creating new users. Now WordPress gives you the option to automatically create a strong one.

This password can still be emailed to the user (in plain text, if their email program doesn’t use SSL), and you can still create your own if you’d like. Also keep in mind, the user can go to their profile page & change their password whenever they’d like, and there are no strength requirements when they do so.

I see where WordPress is going with this, but if you want to read more, check out my article on why a password generator is a bad idea.

Trouble Finding Something?

Can’t find something? Not sure where something went? Struggling with the new design? Leave us a comment & we’ll try to help you get back on track.

16 Commentson "WordPress 3.8 New Admin Design"

  1. /

    Hey there! Thanks for the post here.

    I’m running WordPress 3.8-beta-1-26375, and ever since 3.8-beta-1 I have not had access to the “Admin Color Scheme” options at all! It is just blank. See this screenshot to see what I am seeing: https://www.evernote.com/shard/s121/sh/5838db9a-ad7d-47d4-921e-7a40c975e8d1/1b449447aa97eb8df7c3f647dd113094

    I have tried deleting ALL of the core WordPress files (only leaving my .htaccess, wp-config.php, and wp-content), and still no love! Any ideas?

    → Reply
    1. (Author) /

      Hi Chris,

      I am running the same version (3.8-beta-1-26375) and I am having no issues with the Admin Color Scheme on my user profile. I see it, and it’s working properly. (image)

      Here are some things you could try:

      • Check your browser’s Inspector (or Firebug). Look for the fieldset with the id of "color-picker". Maybe there’s an errant CSS rule that is hiding it.
      • I think javascript needs to be running in order for the dropdown to be displayed. Check that you have javascript enabled. Also, look at your “Console” panel in your browser’s inspector. See if there are javascript errors related to the color picker.
      • Cache: Clear your browser’s cache, as well as any server-side caching you might be doing. Some hosts (like WP Engine) cache things aggressively. Or if you’re using a plugin like W3 Total Cache, wipe that clean too.
      • You could try going to Dashboard > Updates again, and using the “Update” button. If that doesn’t change anything, I’d download the nightly build, and then re-install it manually.
    2. (Author) /

      Chris,

      RC1 was just released, and they actually changed the format of the color schemes. They removed the dropdown in favor of radio buttons (with images). (screenshot)

      Any luck on them showing back up for you?

    3. /

      This was resolved. It had something to do with OptimizePress, but they released an update well before WP 3.8 even went live. So all is well now. :-)

  2. /

    I can’t seem to open (to edit) my widgets anymore in wordpress 3.8. I can move them, add a new widget, but when I click the little arrow to open them, nothing happens!?? Any thoughts anyone?

    → Reply
    1. (Author) /

      Hans,

      Sounds like a javascript issue. The /wp-admin/load-scripts.php file loads all the necessary javascript files for the admin to work. I think the widgets use jquery-ui or the utils script.

      Maybe check with your host to look in the error logs. See if there are any errors causing certain javascript files (or the load-scripts.php file) not to load properly.

    2. /

      Thanks, turned out my theme was the problem. It had compatibility issues.

  3. /

    hi friends!
    I have updated my wordpress website to new version wp 3.8 but after this i can not access any of my website link including wp-admin. every link show error 404 not found except home page. my website is http://www.gcadz.com ….
    Can anyone help me please….
    thanks

    → Reply
    1. (Author) /

      Kashif,

      Feel free to take Chris up on his offer, but please know that we do not endorse or recommend anyone’s work. Proceed at your own risk. (But I have no reason to assume that Chris would do anything but try to help.)

      From looking at your site (what I can see in Google SERPs, and the homepage), I’d guess it’s either 1) an issue with a plugin, or 2) an issue with your custom post types and/or taxonomies. It looks like a majority (if not all) of you site runs off custom post types & taxonomies.

      If you’d like to try some things on your own…

      • Disable all plugins (use FTP method or PHPmyAdmin)
      • Check that all of your post types & taxonomies were setup correctly
      • If you can get into your /wp-admin/ after disabling plugins, go to your permalinks settings, and click the button to update permalinks
    2. /

      Thanks Dave! I appreciate that you didn’t give me a “smack down” after my offer. ;-)

    3. (Author) /

      Chris, we only smack down code, tutorials & other inanimate digital stuff. Never humans :-)

    4. /

      Haha! Indeed… Smack on!

  4. /

    I have some problems with 3.8:
    1. I can’t delete themes
    2. I can’t create menus or add new element the existing ones.

    What should i do?

    → Reply
    1. (Author) /

      Florin,

      A few things I can think of that you might try:

      • Check that you have the correct permissions (user level) to access the “Appearance” menu, and modify themes & menus. Go to “Users” > “All Users”, and you should see “Administrator” next to your name. If you can’t see “All Users,” then you probably don’t have permission to edit themes & menus.
      • Could be a plugin issue. Do you have any plugins installed that are affecting the admin area? Admin color schemes, custom user roles/permissions, etc. Try de-activating those plugins & see if that solves it.
      • Re-install 3.8. There could be some issues with your 3.8 core files. Make a backup first. And just replace the core files in the root, wp-includes and wp-admin folders. This is a last resort, and if you’ve made any custom changes to those core files (hopefully you haven’t), be careful. Maybe even see if your web host can help.

      Let me know how it goes.

  5. /

    This may be a bit old but I found this post while researching a solution for my current problem. after the new interface I can’t find the Editor which was under Appereance first anymore. Where did they moved it to? I can’t do any changes to the coding.

    Help is appreciated!

    → Reply

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.