QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Creating a WordPress Admin Theme

Creating a WordPress Admin Theme

wordpress-admin

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

banner-772x250

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
Screen Shot 2015-03-06 at 6.08.26 pm

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.

Screen Shot 2015-03-06 at 9.16.35 pm

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

function my_admin_theme_style()
{
    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

/* The main title of the admin panel. Used to display the name of the blog and a link to View Site. */
#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

function my_admin_theme_script() {
    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

  • Changing WordPress Admin Footer Text

    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

Mar 6, 2015Narayan Prusty
Using WordPress Media Uploader in Plugins and ThemesHTTP/2 Complete Tutorial
Comments: 1
  1. julie ranawat
    6 years ago

    Thanks to sharing this blog…it’s really helpful….

    ReplyCancel

Leave a Reply to julie ranawat Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

8 years ago 1 Comment WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Popular WordPress Admin Themes
  • How to install an Admin Theme
  • Styling Admin Panel Components
  • Manipulating DOM
  • Adding, Removing and Altering Admin Panel Components and Functionality
Related Articles
  • Multi-language WordPress Theme and Site
  • Login User into WordPress without Password
  • WordPress Custom PHP, JS and CSS Plugin
  • HTTP/2 for WordPress Sites
  • WordPress Frontend Twitter OAuth Login
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license