« ECMAScript speed benchmark Progress in the W3C »

Deconstructed WP admin theme

January 21st, 2008 by Nate Steiner

WordPress has been a helpful tool. Love it, hate it - it’s free, flexible and approachable by average joe web developers who don’t really write programs (me). There’s much about it I don’t love, but I use it often. One thing that bothers me each time I install it: the default admin theme. I like the look of the WP-Tiger theme better, but it feels less responsive to me (probably because of client-side layout redrawing?). What I’ve really wanted is something super quick to install (a plugin-based theme), something responsive and based on the initial layout, but much cleaner/simpler.

screenshot of admin theme

So I’ve made a new admin theme (wp-admin-nate.zip 8K), like WP, it’s free to use and repurpose. All I’ve done here is stripped out the hideous teal color, made all the fonts sans-serif, eliminated the tab-styling and excessive bordering/shadows. The navigation is still tab based, but uses a simple yellow-highlighter approach instead.

You’ll see how simple it is when you crack it open - feel free to modify and post alternate versions in the comments to this page. The upload interface is not modified - that interface is run through an iframe, and is harder (if even possible) to target with CSS only modifications.

To install it, just throw the unzipped folder into your plugins directory (wp-content/plugins/) then activate it in the admin tool. It’ll show up as “Nate’s Admin Style”, but you can rename it by editing the wp-admin-nate.php file.

Unfortunately I can’t offer support for this admin theme, but please feel free to leave comments, post updated versions, etc in the comments to this post.

Posted in Blog |

You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.


25 Responses to “Deconstructed WP admin theme”

  1. Vin Says:
    January 23rd, 2008 at 5:57 pm

    The yellow is a little bright on the eyes…but overall it is nice.

  2. Nathan Chapman Says:
    January 24th, 2008 at 1:19 am

    Yes, I agree with Vin:

    The yellow is a little bright on the eyes…but overall it is nice.

    I changed the yellow to a more pale colour (mine is #e5fba9, although that’s just so it fits in with my new (and not yet uploaded) theme for Pixl Design.

    Anyway, thanks for the theme, good job!

  3. Jenny Says:
    January 24th, 2008 at 11:31 am

    That’s a nifty theme. But I already have a dashboard theme I like.

  4. Jonathan Says:
    January 24th, 2008 at 12:06 pm

    Jenny,

    Then why the heck did you post a comment? wow, that really didn’t add anything to the conversion…heh

  5. Heliologue Says:
    January 24th, 2008 at 12:14 pm

    @Jonathan

    Actually, it did add something to the conversation…. specifically, that she thinks it’s “a nifty theme.” The fact that it won’t replace her current favorite in no way undermines her vote of support for the theme in question.

  6. Wedge Says:
    January 24th, 2008 at 12:18 pm

    I like the original WP-Admin theme.

    And they’re planning a whole new administration for the WP 2.5 release.

  7. Aleksandar Says:
    January 24th, 2008 at 1:24 pm

    nice and clean.. thanks for the theme!

  8. jez Says:
    January 24th, 2008 at 2:15 pm

    nice - loving it, will use it on my blog admin (cheers)

    will you update it to reflect 2.5 wordpress changes?

  9. Tom Says:
    January 24th, 2008 at 3:04 pm

    It is nice to see another bash made at the admin theme.

  10. Will Wilkins Says:
    January 24th, 2008 at 6:09 pm

    I really love the minimalism of your admin theme Nate!

  11. Bill Says:
    January 24th, 2008 at 6:09 pm

    Clean and simple… Quite nice. I’ve always wondered with all the theme developers out there why there are very few that do anything with admin.

  12. Ted Clayton Says:
    January 24th, 2008 at 9:18 pm

    Thanks! I appreciate the simpler version, on several counts. Round-corner-graphics, the presumption that Admin is an appropriate place for style-exersizes … ok, it has to be ‘nice’ to a lot of different people.

    But me? This is my idea of the way to go!

  13. Nate Steiner Says:
    January 24th, 2008 at 10:59 pm

    Thanks for the kind words everyone.

    @jez: Definitely I will, unless they provide a minimal option baked in somehow.

    @bill: admin themes are a little imposing (seeming), there’s so many pre-baked classes and IDs to track down. This theme was rather simple because I just went through a copy of the default css and modified colors/fonts. Doing more, or really affecting a change requires more effort and more time. It’s one thing to CSS Zen garden a page, it’s another to reskin a whole application interface.

    BTW - if anyone has an alternate to my theme zip file, please feel free to link it up here in the comments.

  14. xentek Says:
    January 25th, 2008 at 1:41 am

    How often do you even need to use the admin? Get a good blog client/writer and your trips to the admin will be for just that - Admin stuff.

    Your day to day blogging will be much served by investigating one of the many free and paid blogging clients.

    Me, I prefer ecto on Mac (windows version isn’t the same program - completely seperate code base, workflow and developers).

  15. Ozh Says:
    January 25th, 2008 at 6:02 am

    You’re going to hate probably the upcoming look of admin pages in WP 2.5 :) …

  16. Dave Says:
    January 25th, 2008 at 6:10 am

    Nice, was looking for something like this for my WP sites to cut down on the clutter in the admin section

  17. Leo Plaw Says:
    January 25th, 2008 at 7:43 am

    I got WP-Tiger theme to place with Admin Drop Menus. That certainly makes a world of difference. All of your WP navigation available immediately!

  18. Juice Says:
    January 25th, 2008 at 10:17 am

    I’m using this right now. I love it and I even modified the colors to my liking!

  19. Chip Bennett Says:
    January 25th, 2008 at 9:13 pm

    Great Admin theme! I love the simplicity.

    I have taken it, and modified it to be somewhat consistent with my overall site style.

    One note (perhaps intentional?) - the background url declarations are not correct, since the plugin is more deeply nested than the original admin.css file.

    And, two suggestions (that I might try to take on myself):

    1) Add in more annotations in the CSS file, explaining what the various ID and class declarations refer to (i.e. who would know that “zeitgeist” is the “Latest Activity” sidebar on the dashboard?).

    2) Create an admin page (e.g. Presentation - Admin Theme) to allow for the various style specifications to be input more intuitively. (This might be a good opportunity for me to learn how to write admin pages, as well as how to modify CSS via such a page?)

  20. Nate Steiner Says:
    January 25th, 2008 at 10:41 pm

    Juice sent me a zip of her variation on this admin theme. It’s the same as mine, but with more subtle colors. You can download it here. Screenshots are here.

    @Chip: Great ideas! Please let us know if you permit your version to be downloaded.

  21. emphbone Says:
    January 26th, 2008 at 1:10 am

    minimalistic. nice..
    allows greater creative customization for other developers.

  22. Dave Says:
    January 26th, 2008 at 9:15 am

    I uploaded and activated, but got no change. What do you think the issue is?

    Thanks.

  23. Nate Steiner Says:
    January 26th, 2008 at 1:29 pm

    @Dave: I’m not sure - although I noticed that I needed to shift-reload to see the change. Does that help at all?

  24. Mark Says:
    February 7th, 2008 at 7:15 am

    I just had this - I think the unzipped folder has a different name.

    I had to remove _alt from the end of the name then all was good.

  25. tench Says:
    March 18th, 2008 at 2:53 pm

    any chance you could do an upgrade of this great style for it to work with wp 2.5? that would be super.

Leave a Reply