WordPress Customization and Plugins for the Administrative User Interface
As often happens, I forget what I was searching for when I stumble upon a great resource for WordPress developers, WordPress designers and aficionados. In this episode of “where am I?” I find a page chuck-full of very useful WordPress customization and Plugins for Admin Panel.
Simplify WordPress Admin UI for Beginners
You ask “why?” would anyone want to change the easily understood admin UI? To make it even easier to use for the beginner user: your client. I have several clients in mind whom have had difficulty understanding WordPress architecture and the post/page relationship as well as other WordPress-specific menus.
Let’s start with the very basic stuff first. Then, we’ll progress to gradually more complicated WordPress tricks and tips. These will all be focused on being upgrade-proof, so we’ll be editing your Child Theme’s functions.php file. Plugins will be used as a last resort.
ReBranding (Customizing) WordPress Login Page
Want to impress your customer with an ego-boost? Of course you do. Customizing WordPress’ Login Page is easily achieved by using WordPress Hooks, Actions and Filters. A reference to WordPress Hooks can be found at Adam R. Brown’s Hooks Database. Using these magnificent little snippets of code will allow you to change WordPress core functions without messing with the core. Therefore you can upgrade without worry of overwriting your customization[s].
Place the code below into your Child Theme’s functions.php file. It will change the login page’s Link Title, Url and Logo that appears.
add_filter( 'login_headerurl', 'namespace_login_headerurl' );
/**
* Replaces the login header logo URL
*
* @param $url
*/
function namespace_login_headerurl( $url ) {
$url = home_url( '/' );
return $url;
}add_filter( 'login_headertitle', 'namespace_login_headertitle' );
/**
* Replaces the login header logo title
*
* @param $title
*/
function namespace_login_headertitle( $title ) {
$title = get_bloginfo( 'name' );
return $title;
}function my_custom_login_logo() {
echo '<style type="text/css">
h1 a { background-image:url('.get_bloginfo('url').'/wp-content/uploads/new-york-web-designer-logo.png) !important; background-size: auto !important; width: auto !important;height: 76px !important; </style>'; }add_action('login_head', 'my_custom_login_logo');
Keep in mind that the image or logo you decide to use needs to either be the same size of the existing WordPress logo or you’ll need to make make the appropriate changes to the inline style CSS as I did above:
h1 a { background-image:url('.get_bloginfo('url').'/wp-content/uploads/new-york-web-designer-logo.png) !important; background-size: auto !important; width: auto !important;height: 76px !important; </style>'; }add_action('login_head', 'my_custom_login_logo');
Screen Capture of Customized Login Page for WordPress
