Creating a WordPress Admin Theme is so Easy!

capture

WordPress  flexibility makes it easy to change almost every part of it, if needed. Creating a custom WordPress Admin Panel Theme is not an exception. There are two main ways to make a WordPress Admin theme: with the help of a Plugin or by simply changing the CSS. The Plugin method is the easiest of the two, as it allows you to install WordPress Admin Themes quickly and easily. You literally “plug it in” and it work!

If you are creative, WordPress has instructions to help you design your own style sheet for the Admin Panels. You can even turn your Admin Theme into a Plugin for easy distribution to the public.

WordPress Plugins give a user an opportunity to add functionality to their blog without editing core WordPress files. There are many WordPress Plugins available which allow you to use a WordPress Admin Theme with no difficulty.

Usually, the instructions are aimed to upload the Admin Theme Plugin to your plugins’ folder and after activate it on your Plugin Panel.

Other plugins, as WP Admin Theme, let you change your layout on the fly, without creating your own plugin.

If you want to design your own Administration Panel Theme, the best way is to make a plugin, even if you’re never going to share the code with anyone else. Admin Theme includes a function which will instruct WordPress to use a new stylesheet to display the Admin Panel. A definite advantage to make a plugin is that if you ever want to revert back to the default style, all you have to do is deactivate the plugin.

The default Admin Theme style sheet is very complex, it covers all aspects of the Administration Panels thoroughly. Not all the parts and pieces need to be changed to recreate your Admin Theme. Look at the files stored in /wp-admin/css to see all the style components that go into the admin dashboard.

The changes you make may be minor or extensive. You can simply 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. You can use your imagination and create whatever effect you want.

To create an Admin Theme Plugin, you should easily install it with little effort, and easily uninstall or deactivate, returning the Administration Panels to their original state. They can be used to change the header or footer of the admin pages in different ways.

In a text editor, in a new document, you can put the following:

<?php

/*

Plugin Name: My Admin Theme

Plugin URI: http://example.com/my-crazy-admin-theme

Description: My WordPress Admin Theme – Upload and Activate.

Author: Ms. WordPress

Version: 1.0

Author URI: http://example.com

*/

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’);

?>

This plugin allows you to customize the CSS of the admin dashboard via a file called wp-admin.css in your plugin folder.

Sometimes there are places where CSS just can’t get the look you need without making modifications to the HTML of the Administration Panels.

The most popular CSS style is creating rounded corners on “boxes” of content. The technique involves adding divisions or wrappers to the HTML architecture to get the effect. You can use the DOM (Document Object Model) to make these changes, not getting into the core Administration Panels . The DOM is a way to dynamically access and update content, structure, and style of documents.

In this example, using the Transparent Rounded Corners effect from 456 Berea Street, you may add the Javascript that’s provided on the site to your Admin Theme Plugin, without editing the WordPress source.

Just download the script and save it to your blue-steel folder as javascript.js. and change the mr_blue_steel() function to:

function mr_blue_steel() {

    $url = get_option(‘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” src=”‘ . $dir .’javascript.js”></script>’;

}

The script given uses a single “hook” (cbb) to create many divisions around the container. To make this work, open the Javascript file and change all references of cbb to wrap to match the wp-admin.css standard style references.

Hope this article helped you, guys!

Share this!

Post Author: Staff

Leave a Reply

Your email address will not be published. Required fields are marked *