Safely modify your WordPress admin’s CSS and make it futureproof

Filed as Features on June 21, 2007 6:42 am

I’ve written a few posts in the past on Blog Herald, showing how you can make different changes for your WordPress admin by modifying the CSS file for it.

Being able to modify the CSS file to make quick design changes to your WordPress admin is very useful indeed, but the problem is when you upgrade your version of WordPress, the wp-admin.css file is replaced with the newer version because it’s not considered a file that should be modified by users.

Here’s where a new plugin that I came across comes in. It’s called the WordPress admin themer plugin, and what it does is simple. It allows you to create a separate wp-admin.css file that does not require modifying the default wp-admin.css file.

To use the plugin, you simply need to install it like any other WordPress plugin, then create a wp-admin.css file in the folder of the particular theme that you are currently using on your blog.

For example, for myself, I’ve got a wp-admin.css in the /wp-content/themes/default/ folder. The file contains the following:

textarea, input, select { font-family: "lucidamac bold","lucida grande",arial,sans-serif; }

#categorychecklist { height: 25em; }
#postdivrich { margin: 0 auto; width: 510px; }
#title { font-size: 1.5em; }

I love this, because now I can modify my own WordPress admin like never before, without overwriting anything in the existing file. Let me explain what my particular file does.

textarea, input, select { font-family: "lucidamac bold","lucida grande",arial,sans-serif; }

This changes the text in the textbox for my post’s content to the same text that I actually have on my site, so that I can better gauge just how the text will look like.

#categorychecklist { height: 25em; }

This changes the Categories box in the Write page to be twice the size that it currently is.

#postdivrich { margin: 0 auto; width: 510px; }

This makes the Write textbox to be smaller, so that it’s the same size as it actually shows on my blog. This helps me better understand where the post will wrap and where images will appear.

#title { font-size: 1.5em; }

This makes the Title of the post in the Write page to be the same size as the text size for the titles on my blog. This helps me better understand how long the title actually is.

Do you have any other changes that you’d like to do to your WordPress admin, now that you can easily modify the CSS for it? Share your changes in the comments below!

Gary King is a professional freelance web developer, primarily using Ruby on Rails and PHP to create cool new websites. When he’s not trying to take over the world one blog at a time, you can find him mulling over his thoughts at King Gary.

Tags:

This post was written by

You can visit the for a short bio, more posts, and other information about the author.


Submissions & Subscriptions

Submit the post to Reddit, StumbleUpon, Digg or Del.icio.us.

Did you like it? Then subscribe to our RSS feed!



  1. Safely modify your WordPress admin’s CSS and make it futureproof | King GaryJune 21, 2007 at 4:24 pm
  2. Things I do to optimize and secure every WordPress site and blog » wordpressgarage.comJuly 6, 2007 at 6:38 am
  3. By disqueSSD posted on August 9, 2010 at 3:43 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Good tip, but there is another way to do that, using the admin_head hook :

    add_action(‘admin_head’, ‘mr_blue_steel’);
    http://codex.wordpress.org/Creating_Admin_Themes

    Very useful for plugin development.

    Reply

    Your words are your own, so be nice and helpful if you can. If this is the first time you're posting a comment, it might go into moderation. Don't worry, it's not lost, so there's no need to repost it! We accept clean XHTML in comments, but don't overdo it please.

    Current ye@r *