QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Changing WordPress Admin UI Color Scheme

Changing WordPress Admin UI Color Scheme

This post is a part 7 of Creating a WordPress Admin Theme post series.

In this article I will show you how to change your wordpress admin UI color scheme using admin UI, plugin and programmatically.


Changing Color Scheme using Profile Option

Click on Users->Your Profile menu button on admin UI. There you will find a list of color schemes.
Screen Shot 2014-08-17 at 4.17.27 pm

WordPress has different CSS files for each of these color schemes inside wp-admin/css/colors/{scheme-name}.

Here there only a few number of color schemes to choose from. We can extend number of schemes or create our own schemes using plugins.

Changing Color Schemes using Plugins

There are many plugins which adds new color schemes and also allow you to create customized color schemes. I mostly use Admin Color Schemer.

Changing Color Schemes Programatically

We can expand the color schemes in the profile option programatically. First create a folder with a name same as your new scheme name and then make sure it contains the same kind of CSS files as its contained in wp-admin/css/colors/{scheme-name} and also the CSS files contain the same CSS classes and ids with their properties. Make the color code changes inside the newly created CSS files. If you want to name your color scheme qnimate then make a folder with name qnimate inside your theme or plugin folder and the make sure it atleast contains the file colors.css.

Now we gave our CSS files for admin UI ready lets register the color scheme so what wordpress knows about our new scheme. New color schemes can be registered using wp_admin_css_color

<?php

function register_color_scheme()
{
    $theme_directory = get_stylesheet_directory_uri();
    wp_admin_css_color("vintage", "QNimate", $theme_directory . "qnimate/colors.css", array("#ffffff", "#eeeeee", "#6767c7", "#345098"));
}

add_action("admin_init", "register_color_scheme");

Screen Shot 2014-08-17 at 4.38.13 pm

Aug 17, 2014Narayan Prusty
WordPress Settings API Tutorial with ExamplesChanging WordPress Admin Footer Text

Leave a Reply 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 WordPress
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Changing Color Scheme using Profile Option
  • Changing Color Schemes using Plugins
  • Changing Color Schemes Programatically
Related Articles
  • Customizing WordPress Admin Profile Page
  • WordPress Frontend Registration And Login Forms
  • Designing WordPress Posts UI For Post Formats
  • Twitter Auto Favorite WordPress Plugin
  • WordPress Custom PHP, JS and CSS Plugin
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license