Codex Resources
Creating Admin Themes
Contents |
WordPress' flexible nature allows for almost every part of it to be easily changed. Creating a custom WordPress Admin Panel Theme is no different. There are essentially two ways of making a WordPress Admin theme: with a Plugin or by simply changing the CSS. The Plugin method is the easier of the two methods, allowing you to install WordPress Admin Themes quickly and easily. You literally "plug it in" and it works.
If you are the creative type, we also have instructions to help you design your own style sheet for the Administration Panels, and even how to turn your Admin Theme into a Plugin for easy distribution to the public.
Using Admin Theme Plugins
WordPress Plugins allow a user to easily add functionality to their blog without editing core WordPress files. There are several WordPress Plugins available that will allow you to use a WordPress Admin Theme with little or no fuss. Check the List of Admin themes and follow their instructions to change the look of your Administration Panels.
Typically, the instructions are to upload the Admin Theme Plugin to your plugins folder and then activate it on your Plugin Panel. Simple and easy.
Styling The Admin Theme
- Direct Editing
- Make a backup copy of the wp-admin.css file from the wp-admin folder on your WordPress site. Then you can go in and make changes in the new wp-admin.css file with a backup, just in case.
The Admin Style Sheet
Here is a partial list of the important style references used in the Administration Panels. Per CSS web standards, # denotes a style ID and . denotes a style class.
- #wphead
- The main title of the admin panel. Used to display the name of the blog and a link to View Site.
- #adminmenu ul
- The main level navigation bar, for links: Dashboard, Write, Manage, etc.
- #adminmenu2 ul
- The sub level navigation bar, for links (example: under Manage: Posts, Pages, Categories).
- .wrap
- The basic wrapper for all content in the admin panel, set in a <div>.
- #zeitgeist
- The sidebar on the Dashboard displaying Latest Activity and Blog Stats.
- #footer
- The footer at the bottom, with Wordpress logo, version number, and help links.
- .wrap h2
- Individual Page headers for the various subpanels, like General Options.
The changes you make in the wp-admin.css can be minor or extensive. You can just change the background color, add a background image to different sections, change the font, or even just do a minor color or design change to the Quicktag buttons. It is up to you to use your imagination and create whatever effect you want.
Creating an Admin Theme Plugin
To create an Admin Theme Plugin, it will need to be easily installed with little effort by the user, and easily uninstalled or deactivated, returning the Administration Panels to their original state.
We begin by telling WordPress to link to a new style sheet.
In a text editor, in a new document, put the following:
<?php /* Plugin Name: Blue Steel Theme Plugin URI: http://example.com/blue-steel-admin-theme Description: Blue Steel WordPress Admin Theme - Upload and Activate. Author: Mr. WordPress Version: 1.0 Author URI: http://example.com */ ?>
This is the "header" of the style sheet and provides information about the plugin to be viewed on the Plugin Panel. It provides the name, URI of the plugin, the description, author, and version.
Create a folder on your computer, per this example, called blue-steel. Save this file inside of the folder and call it blue-steel.php. When you are ready, upload the entire folder to your plugin folder on your website at /wp-content/plugins/. This folder should be at /wp-content/plugins/blue-steel/ and the plugin file should be at /wp-content/plugins/blue-steel/blue-steel.php.
To make this plugin call a new style sheet for the Administration Panels, we need to create a function that will add the style sheet to the head of the Admin Panel's header. This is no different than adding a link to a style sheet in all web pages. It will look something like this when the page is generated:
<link rel="stylesheet" type="text/css" href="http://example.com/wp-content/plugins/blue-steel/wp-admin.css">
With your plugin, you will want to detect where the user has installed WordPress, so that you know where the rest of your Theme is located. You can use the get_settings() function for that. This makes your plugin flexible and portable. Here is how we would create the stylesheet link shown above:
<?php
/*
Plugin Name: Blue Steel Theme
Plugin URI: http://example.com/blue-steel-admin-theme
Description: Blue Steel WordPress Admin Theme - Upload and Activate.
Author: Mr. WordPress
Version: 1.0
Author URI: http://example.com
*/
function mr_blue_steel() {
$url = get_settings('siteurl');
$url = $url . '/wp-content/plugins/blue-steel/wp-admin.css';
echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}
?>
Before we get to the actual styles, you need to add an action with the Plugin API. Actions allow for plugins to "hook" into functions and features of the program. For Admin Themes, you want to hook into the admin_head (called in the <head>) of the Administration Panel with add_action():
function mr_blue_steel() {
$url = get_settings('siteurl');
$url = $url . '/wp-content/plugins/blue-steel/wp-admin.css';
echo '<link rel="stylesheet" type="text/css" href="' . $url . '" />';
}
add_action('admin_head', 'mr_blue_steel');
?>
In addition to the admin_head Plugin API hook, you can also optionally add a function to add content to the admin_footer. For example, you might want to put a notice about the theme in the footer. Here is how to add it to your plugin:
function blue_steel_footer() {
echo 'This theme was made by <a href="http://example.com">Mr. WordPress</a>.';
}
add_action('admin_footer', 'blue_steel_footer');
Save the plugin and upload it to your site. Select it from the Plugins Panel and see if anything about blue-steel appears. If it does, you are on the right track!
Change Log-In page's style
If you would like to change your Log-In page's style with your wp-admin.css file you must be use the wp_admin_css function. Create a plugin that contains these lines:
function my_wp_admin_css() {
echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/wp-admin.css" type="text/css" />';
}
add_action('wp_admin_css','my_wp_admin_css');
This plugin overrides the original function, and displays only your stylesheet in the admin page's header. You use the .login and the #login element in the CSS file to change the page's style.
If you use this plugin you don't need to use the admin_head function that you read before!
Alternatively, if you don't want to override the default wp-admin.css stylesheet for the overall admin screen, you can use the login_head function to add a style sheet solely to your log-in page. To get this working, copy the login.css file from /wp-admin/css/ you can append the following to the original plug-in you've created.
function wp_blue_steel_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_settings('siteurl') . '/wp-content/plugins/blue-steel/login.css" />'."\n";
}
add_action('login_head', 'wp_admin_login_css');
The wp_admin_css function also displays some other CSS file so you should add some other lines to this plugin. You can find these stylesheet files in the wp-admin folder, and the /wp-admin/css/ maps (For example: upload.css).
If you would like to use the original style:
echo '<link rel="stylesheet" href="/wp-admin/css/upload.css" type="text/css" />';
If you would like to use your style:
echo '<link rel="stylesheet" href="/wp-content/plugins/blue-steel/upload.css" type="text/css" />';
In the end:
<?php
/*
Plugin Name: Blue Steel Theme
Plugin URI: http://example.com/blue-steel-admin-theme
Description: Blue Steel WordPress Admin Theme - Upload and Activate.
Author: Mr. WordPress
Version: 1.0
Author URI: http://example.com
*/
function my_wp_admin_css() {
echo '
// use the "blue-steel" style
<link rel="stylesheet" href="/wp-content/plugins/blue-steel/wp-admin.css" type="text/css" />
// use the original style
<link rel="stylesheet" href="/wp-admin/css/upload.css" type="text/css" />
';
}
add_action('wp_admin_css','my_wp_admin_css');
?>
These plugins don't work with the install.css file and the "rtl" files. If you would like to use the rtl files, please look at how the wp_admin_css function works in the wp_include/general-template.php file.
Advanced CSS Styles
Sometimes there are places where CSS just cannot achieve the look you want without making modifications to the HTML of the Administration Panels.
A popular CSS style is to create rounded corners on "boxes" of content. The technique involves adding divisions or wrappers to the HTML architecture in order to achieve the effect. Since we really do not want to get into the core Administration Panels to make these changes, which will disappear with the next upgrade, you can use the DOM (Document Object Model). The DOM is a way of dynamically accessing and updating content, structure, and style of documents.
In this example, using the Transparent Rounded Corners effect from 456 Berea Street, you can add the Javascript provided on the site to your Admin Theme Plugin, without editing the WordPress source.
Download the script and save it to your blue-steel folder as javascript.js. Change the mr_blue_steel() function to:
function mr_blue_steel() {
$url = get_settings('siteurl');
$dir = $url . '/wp-content/plugins/blue-steel/';
echo '<link rel="stylesheet" type="text/css" href="' . $dir . 'wp-admin.css" />';
echo '<script type="text/javascript" href="' . $dir .'javascript.js"></script>';
}
This script uses a single "hook" (cbb) to create many divisions around the container. For this to work, open the Javascript file and change all references of cbb to wrap to match the wp-admin.css standard style references.
Resources
This article is marked as in need of editing. You can help Codex by editing it.