How to change the WordPress admin design
In my Vkontakte group I was asked a question, how to change the design of the WordPress CMS admin panel. I think the official guide will help me with this question, as always., let's get started together.
By visiting the site Codex WordPress as always, I realized that there is no Russian translation of this question, which means we start translating and looking for different articles on this topic.
I will try to offer my version of changing the appearance of the admin panel.
So, based on the same Khukov which I already wrote about in the section "For plugin development» you can painlessly change the design of the admin panel. Since hooks can be used in your own plugins, I decided to create some basic code for you., and you will find out exactly how and what, you are my smarties ).
Let's Start Creating a WordPress Admin Theme Plugin
We will work with this hook add_action(‘admin_head’, ‘my_admin_head’). To start create a folder on your test site in the plugins folder wp-admin-themmes and file wp-content/plugins/wp-admin-themmes/my-admin-themes.php. Put the base code of the plugin into the file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<?php /* Plugin Name: My Admin Theme Plugin URI: https://wp-admn.com.ua/my-admin-theme Description: My WordPress Admin Theme - Upload and Activate. Author: Ms. WordPress Version: 1.0 Author URI: https://wp-admin.com */ function my_admin_head() { echo '<link rel="stylesheet" type="text/css" href="' .plugins_url('wp-admin.css', __FILE__). '">'; } add_action('admin_head', 'my_admin_head'); ?> |
In general, the plugin is now ready for us. Next, go to the admin panel of our site and activate the created plugin My Admin Theme. After activation, the created plugin will help you customize the admin panel styles through the plugins folder.
Create another file in the plugin folder wp-admin.css and add any of the example codes below:
Admin Styles
#wp-admin-bar-site-name – The main style for displaying the site name or a link to view the site in the admin bar ( #wp-admin-bar-site-name).
Trying the style and watching the admin panel:
|
1 2 3 4 5 |
#wp-admin-bar-site-name{ background-color: #616c6e!important; background: -moz-linear-gradient(bottom,#616c6e,#B0C4DE); background: -webkit-gradient(linear,left bottom,left top,from(#616c6e),to(#B0C4DE)); } |
#adminmenuback, #adminmenuwrap – Changing the background of the first level menu in the admin panel
Trying Styles and Watching the WordPress Admin:
|
1 2 3 4 5 |
#adminmenuback, #adminmenuwrap{ background-color: #dbe8f8!important; background: -moz-linear-gradient(bottom,#dbe8f8,#fff); background: -webkit-gradient(linear,left bottom,left top,from(#dbe8f8),to(#fff)); } |
Trying the style and watching the admin panel:
|
1 2 3 4 5 |
#adminmenu ul { background-color: #dbe8f8!important; background: -moz-linear-gradient(bottom,#dbe8f8,#fff); background: -webkit-gradient(linear,left bottom,left top,from(#dbe8f8),to(#fff)); } |
Trying the style and watching the admin panel:
|
1 2 3 4 5 |
#wpwrap { background-color: #E4F0FE!important; background: -moz-linear-gradient(bottom,#E4F0FE,#B0C4DE); background: -webkit-gradient(linear,left bottom,left top,from(#E4F0FE),to(#B0C4DE)); } |
Example:
|
1 2 3 4 5 6 |
#footer { background-color: #E4F0FE!important; background: -moz-linear-gradient(bottom,#E4F0FE,#B0C4DE); background: -webkit-gradient(linear,left bottom,left top,from(#E4F0FE),to(#B0C4DE)); padding:30px; } |
#wpbody h2 - change the titles on each page in the admin.
Example:
|
1 2 3 4 |
#wpbody h2{ font-size:25px; color:#8b2010 !important; } |
I think you can change, simply by inspecting certain elements.
You can also copy standard WordPress admin styles and change them inside platinum, they are in the folder here: /wp-admin/css. Copy to the plugin folder and change the admin panel as you like.
Here is my result of working with the plugin we created:
Developers CMS WordPress also recommend the plugin WP Admin Theme to change the appearance of the engine.
Another little bonus in the article:
You can slightly change the footer in the admin panel with a special hook:
|
1 2 3 4 5 |
function remove_footer_admin () { echo 'Уроки WordPress <a href="https://wp-admin.com.ua">wp-admin.com.ua</a> (с) 2012'; } add_filter('admin_footer_text', 'remove_footer_admin'); |
Code checked, everything is working. Good luck developing WordPress sites!
/*
- Basic web design course;
- Site layout;
- General course on CMS WordPress and continuation of the course on template development;
- Website development in PHP.
Thank you for the article, you helped a lot. Is it possible to change the admin html code?
found examples, but they were made in javascript, think,
that it is not necessary to change the source codes. When changing the main code, you can lose your admin template, when will the engine be updated?.
As an option, you can look towards WordPress hooks, but only in English. find something useful, Throw or if you find something that you do not understand, but this 100% works, we'll figure it out together. Just not everything )