Do you want to add a custom dashboard icon in WordPress? Often people replace the WordPress logo with a custom dashboard icon for branding purposes. In this article, we will show you how to add a custom dashboard icon in WordPress for branding.
Table of Contents
Method 1: Add a custom dashboard logo in WordPress using a plugin
This method is easier and is recommended for most beginners.
The first thing you need to do is install and activate the plugin White Label CMS . For more details, see our step-by-step guide on how to install a WordPress plugin.
Upon activation, you need to visit Settings » White Label CMS page and click on the Brand tab to expand it.
Next, you need to click ‘Yes’ to hide the WordPress logo and then upload your own custom logo. Custom logos must be exactly 16 x 16 pixels in size.
Don’t forget to click the save changes button to save your settings.
In addition to a custom dashboard logo, White Label CMS also offers other features to rebrand your WordPress installation. See our guide on how to white label the WordPress admin dashboard for detailed instructions.
Method 2: Manually Add Custom Dashboard Logo in WordPress
This method is for users who are comfortable pasting code snippets in WordPress.
First, you need to save your custom logo as a custom-logo.png file on your computer. It should be exactly 16 x 16px in size.
Once you have your custom logo, you need to upload it to the /wp-content/themes/your-theme/images folder using FTP . If your theme doesn’t have an images folder, then you need to create it.
After uploading your custom logo image, simply add this code to your theme’s functions.php file or a site-specific plugin.
function wpb_custom_logo() {
echo '
#wpadminbar #wp-admin-bar-wp-logo > .ab-item .ab-icon:before {
background-image: url(' . get_bloginfo('stylesheet_directory') . '/images/custom-logo.png) !important;
background-position: 0 0;
color:rgba(0, 0, 0, 0);
}
#wpadminbar #wp-admin-bar-wp-logo.hover > .ab-item .ab-icon {
background-position: 0 0;
}
';
}
//hook into the administrative header output
add_action('wp_before_admin_bar_render', 'wpb_custom_logo');
This code simply adds the necessary CSS to display your custom logo in the WordPress admin bar.
That’s all we hope this article helped you learn how to add custom dashboard icons in WordPress for branding. You may also want to check out our guide on how to hide unnecessary items from WordPress with Adminimize.
.
