{"id":1809,"date":"2018-03-13T11:35:06","date_gmt":"2018-03-13T17:35:06","guid":{"rendered":"https:\/\/wpcodeus.com\/?p=1809"},"modified":"2025-07-30T11:02:39","modified_gmt":"2025-07-30T16:02:39","slug":"create-wordpress-dashboard-admin-theme-plugin","status":"publish","type":"post","link":"https:\/\/wpcodeus.com\/create-wordpress-dashboard-admin-theme-plugin\/","title":{"rendered":"Create WordPress Dashboard Admin Theme Plugin"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

In today\u2019s blog post we are going to teach you how to create a simple WordPress plugin that you can use to create a custom WordPress Dashboard Admin Theme.<\/p>

While the overall default admin theme is slick, there might be a few items that you would like to adjust, or maybe ever just have it match the branding of your companies website!<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Creating The Plugin<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

To make these adjustments, we\u2019re going to follow the official guide that is already available in the\u00a0WordPress Codex<\/strong><\/a>\u00a0on how to create an Admin Theme.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div>

To start off, you need login to your FTP and go to your Plugins folder under WP Content. Now create a new folding for your plugin and name it \u201csimple-admin-theme<\/strong>\u201d or whatever name you would like to choose.\u00a0 Once your new folder is created simply click and go into the new folder. Now you will need to create a new file called \u201csimple-admin-theme.php<\/strong>\u201c. In this file, you\u2019ll want to paste the following code snippet we have provided you:<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t

\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\t<?php\n\n\/*\nPlugin Name: Simple Admin Theme\nPlugin URI: https:\/\/wpcodeus.com\/\nDescription: A Simple Admin Theme for WordPress\nAuthor: WP Codeus\nVersion: 1.0.0\nAuthor URI: https:\/\/wpcodeus.com\/\n*\/\n\nfunction sat_enqueue_custom_admin_theme() {\n    wp_enqueue_style( 'sat-enqueue-custom-admin-theme', plugins_url( 'wp-admin.css', __FILE__ ) );\n}\nadd_action( 'admin_enqueue_scripts', 'sat_enqueue_custom_admin_theme' );<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f962780 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"f962780\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4156dda elementor-widget elementor-widget-text-editor\" data-id=\"4156dda\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>The function that you just pasted into your file will properly en-queue your stylesheet that we will be using to add our custom styles for the Admin Theme.<\/p><p>If you look on\u00a0<strong>line 13<\/strong>\u00a0you can see that we have named the stylesheet wp-admin.css. Now you need to create this file in your Admin Theme Folder that you just created. You can either name it \u201c<strong>wp-admin.css<\/strong>\u2018 or name your stylesheet to your liking. Just make sure if you create a custom name that you change the stylesheet file name on\u00a0<strong>line 13<\/strong>\u00a0as well.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ebef90f e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"ebef90f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9eda8d4 elementor-widget elementor-widget-heading\" data-id=\"9eda8d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Styling Your WordPress Dashboard Theme<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-516dcce elementor-widget elementor-widget-text-editor\" data-id=\"516dcce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"vc_row wpb_row section vc_row-fluid \"><div class=\" full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column wpb_content_element \"><div class=\"wpb_wrapper\"><p>Now the fun part begins! Now that you have created your custom Admin Theme Plugin folder, plugin file, and your custom stylesheet. We can now begin styling the WordPress dashboard!<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row section vc_row-fluid \"><div class=\" full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column wpb_content_element \"><div class=\"wpb_wrapper\"><p>Let\u2019s get started! For this blog we are going to show you how to change the color of the Dashboard Options to match the branding color of your website or company. By default WordPress does have some out of the box themes but they may not be the exact colors that you would like.<\/p><p>As long as you have some knowledge in .CSS you can pretty much change anything you would like in the dashboard! If you do not have knowledge in .CSS or coding we are always here to help you with your WordPress needs!<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-b7e5e1e e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"b7e5e1e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7ecdb1b elementor-widget elementor-widget-heading\" data-id=\"7ecdb1b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Changing The WordPress Dashboard Options Color<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3af3f9e elementor-widget elementor-widget-text-editor\" data-id=\"3af3f9e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"vc_row wpb_row section vc_row-fluid \"><div class=\" full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column wpb_content_element \"><div class=\"wpb_wrapper\"><p>Below you can copy the .CSS code snippet we provided into your \u201cwp-admin.css\u201d stylesheet, or whatever you named it. To match your branding simple change the Hex codes to your liking. For example if you would like it to be the color orange, change the hex code #6556be to #FF7F50.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c3192c5 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"c3192c5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43bbaaa elementor-widget elementor-widget-code-highlight\" data-id=\"43bbaaa\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-default copy-to-clipboard \">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>\/* Dashboard Options Color Change *\/\n\n#adminmenu .wp-has-current-submenu .wp-submenu .wp-submenu-head, #adminmenu .wp-menu-arrow, #adminmenu .wp-menu-arrow div, #adminmenu li.current a.menu-top, #adminmenu li.wp-has-current-submenu a.wp-has-current-submenu, .folded #adminmenu li.current.menu-top, .folded #adminmenu li.wp-has-current-submenu {\n    background: #1abc9c!important;\n    color: #fff;\n}\n#adminmenu li a.wp-has-current-submenu .update-plugins, #adminmenu li.current a .awaiting-mod {\n    background-color: #6556be!important;\n    color: #fff;\n}\n#adminmenu div.wp-menu-name:hover {\n    background: #1abc9c!important;\n    color: #fff!important;\n}\n.wp-menu-image .dashicons-befor {\n    color: #6556be!important;\n}\n#adminmenu li.menu-top:hover, #adminmenu li.opensub>a.menu-top, #adminmenu li>a.menu-top:focus {\n    position: relative;\n    background-color: #191e23;\n    color: #1abc9c!important;\n}\n#adminmenu li a:focus div.wp-menu-image:before, #adminmenu li.opensub div.wp-menu-image:before, #adminmenu li:hover div.wp-menu-image:before {\n    color: #6556be!important;\n}\n#adminmenu .wp-submenu a:focus, #adminmenu .wp-submenu a:hover, #adminmenu a:hover, #adminmenu li.menu-top>a:focus {\n    color: #1abc9c;\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f633828 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"f633828\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6233b83 elementor-widget elementor-widget-text-editor\" data-id=\"6233b83\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"vc_row wpb_row section vc_row-fluid \"><div class=\" full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column wpb_content_element \"><div class=\"wpb_wrapper\"><p>Save your stylesheet and head back over to your WordPress Dashboard. Go to your installed plugins and now you need to active your new plugin that you just created. Now if you hit refresh you will see that the Dashboard active and hover options are green and purple. ( WP Codeus colors \ud83d\ude42 ). If you do not see the changes you may need to clear you browser cache for your website.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"vc_row wpb_row section vc_row-fluid \"><div class=\" full_section_inner clearfix\"><div class=\"wpb_column vc_column_container vc_col-sm-12\"><div class=\"vc_column-inner\"><div class=\"wpb_wrapper\"><div class=\"wpb_text_column wpb_content_element \"><div class=\"wpb_wrapper\"><p>Now that you have everything setup you can now add your own adjustments by right clicking elements in your browser and click \u201cInspect Element\u201d to get the property name and styles to edit from your browsers\u2019 web inspector.<\/p><\/div><\/div><\/div><\/div><\/div><\/div><\/div>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ae9938e e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"ae9938e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6b7f48f elementor-widget elementor-widget-heading\" data-id=\"6b7f48f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">In Summary<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5542725 elementor-widget elementor-widget-text-editor\" data-id=\"5542725\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>You have now created your first WordPress Dashboard Admin Theme! If you liked this blog please comment below and share your feedback so we know what articles to create in the future. If are having any issues you can leave a comment and we are always here to help you out.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>In today&#8217;s blog post we are going to teach you how to create a simple WordPress plugin that you can use to create your own WordPress Admin Theme. You can use this to add a nice little touch to your clients website to match their company branding!<\/p>\n","protected":false},"author":1,"featured_media":1810,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[249,68],"tags":[71,69],"class_list":["post-1809","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tutorials","category-code-snippets","tag-functions-php","tag-wordpress"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/posts\/1809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/comments?post=1809"}],"version-history":[{"count":0,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/posts\/1809\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/media\/1810"}],"wp:attachment":[{"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/media?parent=1809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/categories?post=1809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpcodeus.com\/wp-json\/wp\/v2\/tags?post=1809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}