Admin Color Schemes
What are Admin Color Schemes?
Color schemes are skins that style what the admin area looks like. It’s basically a css file. You can make it so each user can choose their own, or override it so everyone sees the same one.
If you go to Users > click on one, you’ll see some default schemes to choose from.
Customizing Admin Color Schemes via a Plugin
Admin Color Schemes simply gives you a bunch extra to choose from.
Admin Color Schemer lets you create your own custom color scheme on the fly using color pickers. After you install it, you can find it under Tools > Admin Colors. Once you’re done, you can save and use it, and you’ll also find it in the Users option with the others.
Customizing Admin Color Schemes from Scratch
Start by making a child theme with the style.css and funtions.php files.
If you go to the root WP folder > wp-admin > css > colors, you’ll see each color scheme as a folder there. The colors-rtl.css file is for people whose languages read right to left. We’ll open the colors.css file, and copy its contents.
Next, go back to your child theme, and make a folder called admin-colors, and inside that, make a folder for each theme color you want to have, and paste in the colors.css. To tell WP we now have a new color and we want it to appear in the admin area, we can use the wp_admin_css_color function in functions.php.
First, create a name-scaped function, in this case called wpt_admin_color_schemes. Set the theme directory to a variable, then the wp_admin_css_color function, which takes some parameters. The first is its short name, the next is it’s translatable full name, then the link to the folder where it can be found, then finally an array of hex values to appear as the four color options when viewing this in the admin option color select section.
Finally, you use add_action to call the function during admin_init, which is as soon as the admin area is initialized.
To change the colors, go into the colors.css file and do a find and replace for the corresponding colors. So if we inspect element for the ectoplasm color scheme that ours is based on, we can find and replace that with the corresponding colors from our array.
To ensure that a certain user can only have one applied, you’d add a conditional statement within your wp_admin_css_color function based on the user.
Customizing the WordPress Login Screen
Customizing the WordPress Login Screen
For when you go to site.com/wp_admin. This lets you build a custom branded site for your client.
How to Customize the WordPress Login Screen via functions.php
Here’s what the default log in screen looks like.
Here’s a link to the codex page on customizing this. The code will go inside your funcitons.php file. It starts with how to replace the logo, then how to add your own css file for it. You’d really just enqueue them in the same way you would for the main site. They also give you some highly helpful/specific classes you’ll need for this.
You can also add in some login hooks for things like errors. Note that you don’t just find and copy a file here, or need to take the child theme approach.
How to Customize the WordPress Login Screen Using a Plugin
Plugins make customizing the login form a lot easier. Custom Login is a good one for this. After installing it, you’ll find it under Settings > Custom Login. First, you should activate it, and put in a background color to test it. Log out and see if it worked. You can also set a background image.
You can easily upload a logo and customize the settings for it. Note that for the logo, a lot of the heights are hard coded in, so it’s often better to upload a file with the dimensions you need rather than try changing them in this form.
You can customize the login form as well. You can also paste in any custom html, css or jQuery you’d like to use, right in the form.
Controlling Admin Navigation in WordPress
How and Why to Change Admin Navigation in WordPress
Your end user might not need to see or use all the options here, so it’s a good idea to remove those.
How to Remove and Add Admin Menu Links via the functions.php File
Note that the user level affects what they see, so an Editor wouldn’t see links to Settings, Plugins or Appearance.
Let’s say the user just needed access to the Pages section. Go to functions.php. The remove_menu_page function lets you remove things. It accepts the slug of the page you’d like to remove. For example, if you wanted to remove the link to plugins you’d write remove_menu_page( “plugins.php” ). It’s easy to just copy it over from the codex, and commenting out the things they don’t need access to. Note that add_action is using admin_menu, so when the admin menu is loaded, this function is called.
Now, we only see Pages in the menu.
Note that this just removes the links, and if someone knew the url they’d still be able to get to that page.
Remember, custom post types often make their own sections as well, so remove those too if you don’t want them appearing.
If the top menu bar is also customizable.
You can use add_menu_page to add links as well, though that takes a bit more knowledge then is covered here.
How to Customize the WordPress Admin Menu with a Plugin
Plugins make this easy. Admin Menu Editor is a good one for this. It also lets you control submenu links. After installing it, you’ll find it under Settings > Menu Editor. Note that there is a pro version, which let’s you set them per user role.
On the left you’ll see your main links, and on the right your sub links, which you can open and edit.
Custom Dashboard Widgets in WordPress
Custom Dashboard Widgets in WordPress
When a user first signs in, they’re taken to their dashboard page. You can make custom ones, which is helpful if you want to display a custom message to some one as soon as they sign in. This can contain helpful links and contact info.
How to Add Custom WordPress Dashboard Widgets via the functions.php File
You can click Screen Options at the top to toggle widgets on and off. Note that these are customized on a per user basis. There are some global option plugins for this though.
Here is a link to the documentation for the Dashboard Widgets API. You can copy the code here right into your functions.php file. You make one function which contains the main wp_add_dashboard_widget function, which takes some parameters. The first is the slug, the second is the title, and the third is another function which will contain the content. That one is shown below, echoing out a message.
It will now appear on your dashboard, and under the Screen Options menu as well. The API documentation also tells you how to remove widget options.
How to Add Custom WordPress Dashboard Widgets via a Plugin
The Custom Dashboard Help Widget plugin is good for this. The premium version lets you set the widgets for all users. Once installed, it’s found under Settings.
Updating the Footer Text in the Admin Area in WordPress
This is what we’re editing.
The Custom Admin Footer Text plugin is good for this and will appear under Settings. It basically lets you set what you want for the left and right sides. It allows html, so you can put links in there as well.
Note that you can also do this with code via the functions.php file.
Kyle's Awesome Awful Websites 