WordPress Admin Themes provide a better user experience to the site administrator. They customize the look and feel of the admin panel to reflect the website type and/or front-end theme.
In nutshell a WordPress admin theme is a group of actions, filters, styles, scripts and hacks to add, remove, style and alter various components(HTML elements, layout sections, icons, meta boxes, widgets etc) and functionality of the admin panel. In this tutorial we will look at various actions, filters, styles, scripts and hacks to create a admin theme.
Popular WordPress Admin Themes
Before we start with coding its worth looking at some popular WordPress admin themes to get inspired.
Slate Admin Theme
Slate provides a clean, simplified design for your WordPress Admin area. There aim is to simplify the visual design with a primary focus on the content writing experience.
Bootstrap Admin
Bootstrap Admin provides a clean, minimalistic administration theme implementing Twitter’s Bootstrap. This plugin will completely re-style your WordPress admin area, offering a cleaner experience.
How to install an Admin Theme
If you are building an admin theme to reflect your front-end theme than its recommended to add your admin theme code to your theme’s function.php file.
But if you are creating an admin theme for reflecting website type or for better user experience then its better to install the admin theme using a WordPress plugin. A plugin will be easier way to distribute your admin theme in this case.
Styling Admin Panel Components
WordPress stores all the stylesheets of the admin panel components in the /wp-admin/css directory.
You can refer these stylesheets CSS code to find our the various components that are styled by WordPress and their default style. You shouldn’t modify these files directly because the modifications will disappear when WordPress is upgraded.
You can overwrite these styles by enqueuing your own stylesheet in admin panel. Here is the code to enqueue a custom stylesheet in admin panel
{
wp_enqueue_style("my-admin-theme", plugins_url("wp-admin.css", __FILE__));
}
add_action("admin_enqueue_scripts", "my_admin_theme_style");
add_action("login_enqueue_scripts", "my_admin_theme_style");
Here are the CSS selectors for some popular admin panel components
#wphead
{}
/* The main level navigation bar, for links: Dashboard, Write, Manage, etc. */
#adminmenu ul
{}
/* The sub level navigation bar, for links (example: under Manage: Posts, Pages, Categories). */
#adminmenu2 ul
{}
/* The basic wrapper for all content in the admin panel, set in a <div>. */
.wrap
{}
/* The sidebar on the Dashboard displaying Latest Activity and Blog Stats. */
#zeitgeist
{}
/* The footer at the bottom, with Wordpress logo, version number, and help links. */
#footer
{}
/* Individual Page headers for the various subpanels, like General Options. */
.wrap h2
{}
Manipulating DOM
Sometimes CSS is not enough to style the components so you may need JavaScript to alter the DOM to add new visual components or style based on event or interval.
Here is the code to enqueue a custom JS file in admin panel
wp_enqueue_style("my-admin-theme-script", plugin_dir_url( __FILE__ ) . "wp-admin.js");
}
add_action("admin_enqueue_scripts", "my_admin_theme_script");
add_action("login_enqueue_scripts", "my_admin_theme_script");
Adding, Removing and Altering Admin Panel Components and Functionality
Here is a series of tutorials which will help you to learn the various actions, filters and hacks that are available for adding, removing and altering various components and functionality of WordPress admin panel.
Designing WordPress Posts UI For Post Formats
One of the awesome feature of WordPress is Post formats. Post formats made us less dependent on custom post types. But they are many things missing in ...Continue Reading
WordPress Custom Meta Boxes Tutorial
In this post we will learn how to add custom meta boxes to wordpress posts, pages and custom post types. Custom fields are limited to key/value pairs. ...Continue Reading
Change Position of WordPress Dashboard Widget
In this tutorial I will show you how to display a widget in various position of WordPress dashboard page.WordPress doesn't provide any API to chan ...Continue Reading
Creating Custom WordPress Shortcodes using PHP
What is WordPress ShortcodesWordPress shortcodes are a text patterns(with opening and closing square bracket tags) in post content which are repla ...Continue Reading
Overview of WordPress Admin Menu API
In this post we will see how to create new admin pages and also how to attach the existing menus. WordPress Menus API provides a very simple way to do ...Continue Reading
Changing WordPress Admin UI Color Scheme
In this article I will show you how to change your wordpress admin UI color scheme using admin UI, plugin and programmatically.Changing Color ...Continue Reading
Below the admin screen you will see a left footer with text "Thank you for creating with WordPress." and right footer with text representing version n ...Continue Reading
Customizing WordPress Admin Toolbar
In this article I will show you how to add and remove new items to admin toolbar in wordpress. Let's get started:Understanding WordPress admin ...Continue Reading
Add and Remove Widgets in WordPress Dashboard
In this article we will look at WordPress dashboard widgets API using which you can add and remove widgets into wordpress admin dashboard.What ...Continue Reading
Attaching Icons to WordPress Theme Menu Items
Attaching icons to menu items has become a trend. WordPress theme developers need to build a functionality write into WordPress theme to provide users ...Continue Reading
Understanding WordPress User Roles
A WordPress site can have multiple registered users. All these users don't have the same authority for site customisation, posting, editing etc. They ...Continue Reading
Creating WordPress Tables and Storing Data
In this article I will show you how you can create wordpress tables and also how to store data in wordpress tables. WordPress can be used to store arb ...Continue Reading
Customizing WordPress Admin Profile Page
In this article I will show you how to add fields on WordPress admin profile page. And then how to retrieve the profile information for our customized ...Continue Reading
Login User into WordPress without Password
In this tutorial I will show you how to create a front-end login and registration form which allows users to login with their username only. And then ...Continue Reading
Create a WordPress Post Editor Button to Add Shortcode
WordPress provides a post editor to add or edit content of a post or page. WordPress post editor has a lot of buttons attached to it to add or edit t ...Continue Reading
