How to Add or Change WordPress Admin Icons (2 Easy Methods)
Personalizing your WordPress dashboard can enhance the person expertise. One straightforward approach to do that is by including or altering admin icons.
Customized icons can enhance your workflow and make it simpler for brand new customers to navigate the admin space of your web site. Plus, a personalised dashboard is extra pleasurable to make use of.
On this article, we are going to present you the best way to add or change WordPress admin icons. We’ll information you thru the method step-by-step. By the tip, your WordPress dashboard will look contemporary and distinctive.
What Are Admin Icons in WordPress?
Admin icons are the tiny photographs you see within the navigation panel of the WordPress admin space. They seem subsequent to every menu merchandise.
These photographs use Dashicons, an icon font made for WordPress. It was first launched in 2013 and has not modified since then.
You could wish to give your WordPress admin space a slight makeover by altering these icons. You possibly can swap out present icons with one thing you want higher and even exchange them with your individual {custom} icons.
In case you are making a website for shoppers who will not be accustomed to WordPress, utilizing {custom} icons might help them navigate the admin dashboard extra simply.
Now, let’s see how one can simply change admin icons. We’ll present you two methods to do this, and you may select the one which works greatest for you:
Methodology 1: Change Admin Icons in WordPress Admin Utilizing a Plugin
For this methodology, we shall be utilizing the Admin Menu Editor plugin. Because the title suggests, it lets you customise WordPress admin menus simply.
First, it’s essential to set up and activate the Admin Menu Editor plugin. For extra particulars, see our tutorial on how to install a WordPress plugin.
After you may have activated the plugin, go to the Settings » Menu Editor web page. Right here, you will notice your WordPress admin menu inside a neat person interface (UI) the place you’ll be able to customise it.
The UI has a toolbar on the high, which lets you add or delete menu objects, add separators, copy and paste objects, and extra.
Under that, you’ll be able to click on on a menu merchandise to develop and look at its settings. Right here, we’ve expanded the Posts menu merchandise.
If you develop any menu merchandise, you will notice extra choices. If it’s a father or mother menu, additionally, you will see any youngster menu objects in the fitting column.
So as to add, exchange, or delete a menu icon, click on on the ‘Present superior choices’ hyperlink on the backside.
Now, click on on the button subsequent to the ‘Icon URL’ subject.
This may reveal a popup the place you’ll be able to see all of the out there Dashicons. Alternatively, you’ll be able to click on on the ‘Media Library’ button to add your individual picture icon.
If you wish to add your individual picture icon, we suggest utilizing a 32×32 picture, ideally in clear PNG format.
After selecting your icon, click on on the ‘Save Modifications’ button to retailer your settings.
You’ll now see your {custom} menu icon used within the admin menu.
This subsequent methodology requires you so as to add some {custom} code to vary icons.
Should you haven’t performed it earlier than, we suggest taking a fast have a look at our tutorial on adding custom code in WordPress.
The best and most secure approach so as to add {custom} code in WordPress is utilizing WPCode. It’s the greatest WordPress code snippets plugin. It lets you safely add {custom} code, CSS, and HTML to your WordPress web site with out by chance breaking something.
Observe: The plugin additionally has a free model known as WPCode Lite, which can get the job performed. Nevertheless, the professional model provides you additional options that is perhaps useful.
Instance 1. Changing an Icon Utilizing the Default Dashicons
For this instance, we are going to use the default Dashicons to exchange an icon from the present icon set.
It’s necessary to notice that WordPress already masses Dashicons, that are extremely optimized for efficiency. So, utilizing them is not going to influence page load speed.
That stated, earlier than you run the code, it’s essential to be aware down the next:
- The URL for the menu merchandise you wish to change
- The icon title you wish to use
First, it’s essential to discover the web page URL for the menu merchandise you wish to customise. As an illustration, let’s say you wish to change the icon for the ‘Posts’ menu.
Transfer your mouse over to the Posts menu, and you will notice the URL it hyperlinks to in your browser’s standing bar on the backside of the web page. You simply want the final a part of the URL, which on this case could be edit.php.
Subsequent, go to the Dashicons website and click on on the icon you wish to use.
Clicking on any icon will present its title and slug on the high. At this level, it’s essential to copy the slug since you’ll want it within the subsequent step.
When you’ve performed that, go to the Code Snippets » + Add Snippet web page and hover your mouse over the ‘Add Your Customized Code (New Snippet)’ field.
Then, merely click on on the ‘+ Add Customized Snippet’ button that seems.
On the following display, present a title on your snippet and choose PHP Snippet underneath the Code Sort possibility.
After that, you’ll be able to copy and paste the next code into the code editor field:
operate change_post_menu_icon() {
international $menu;
// Loop by the menu objects
foreach ($menu as $key => $menu_item) {
// Discover the "Posts" menu merchandise (default URL is 'edit.php')
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
// Change the icon to a special Dashicon class
$menu[$key][6] = 'dashicons-format-aside'; // Change this to your most well-liked Dashicon slug
}
}
}
add_action('admin_menu', 'change_post_menu_icon');
Don’t overlook to vary the dashicons-format-aside to the slug you copied earlier.
Your code will seem like this within the editor:
Subsequent, it’s essential to inform WordPress the place to run this code.
Admin menu icons seem contained in the WordPress admin space. On the identical web page, scroll to the Insertion part and choose ‘Admin Solely’ underneath the Location possibility.
Lastly, change your snippet to Energetic and click on the ‘Save Snippet’ button to avoid wasting your modifications.
WordPress will now begin utilizing the icon you chose for the Posts web page.
Instance 2. Use Font Superior Icon for a Menu Merchandise in The WordPress Admin Space
The default Dashicon library has a restricted set of icons. The excellent news is that you should use a font and icon library like Font Superior, which has a a lot bigger set of icons.
Nevertheless, this implies you’ll have to load Font Superior, which can decelerate your WordPress admin space barely (only some milliseconds).
Earlier than you add any code, first it’s essential to discover the icon you wish to use. Go to the Font Superior web site and change to the Free Library.
You will notice all of the icons out there at no cost.
Click on on the icon you wish to use, and it’ll open in a popup. From right here, it’s essential to copy the icon’s Unicode worth.
After that, go to the Code Snippets » + Add Snippet web page in your WordPress dashboard.
Go forward and click on on the ‘+ Add Customized Snippet’ button throughout the ‘Add Your Customized Code (New Snippet)’ field.
On the following display, present a title on your snippet and choose PHP Snippet because the Code Sort possibility.
After that, you’ll be able to copy and paste the next code into the code editor field:
// Enqueue Font Superior within the admin space
operate enqueue_font_awesome() {
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');
// Add {custom} class to the Posts menu merchandise
operate add_custom_post_menu_class() {
international $menu;
foreach ($menu as $key => $menu_item) {
if (isset($menu_item[2]) && $menu_item[2] == 'edit.php') {
$menu[$key][4] .= ' custom-post-menu-class';
}
}
}
add_action('admin_menu', 'add_custom_post_menu_class');
// Add {custom} CSS to vary the icon to a Font Superior icon
operate custom_admin_menu_icon() {
echo '<model>
.custom-post-menu-class .wp-menu-image:earlier than {
font-family: "Font Superior 5 Free" !necessary;
content material: "f015"; /* Unicode for the Font Superior icon */
font-weight: 900; /* Wanted for stable icons */
}
</model>';
}
add_action('admin_head', 'custom_admin_menu_icon');
Don’t overlook to exchange f015 with the Unicode worth you copied earlier.
Your code will seem like this within the editor:
Subsequent, it’s essential to inform WordPress the place to run this code.
Admin menu icons seem contained in the WordPress admin space, so you’ll be able to scroll to the Insertion part and choose ‘Admin Solely’ because the Location possibility.
Lastly, change your snippet to Energetic and click on on the ‘Save Snippet’ button to avoid wasting your modifications.
WordPress will now begin utilizing the icon you chose for the Posts web page.
Bonus: Add Icons for Customized Put up Sorts in WordPress
Customized put up sorts mean you can create distinctive kinds of content material on your WordPress web site. These will not be default posts or pages however one thing completely unique to your web site.
In case you are using a custom post type in your WordPress web site, you may wish to change its icon so to simply establish it.
In that case, take a look at our detailed tutorial on the topic, which exhibits a number of methods to change or add icons for your custom post types.
We hope this text helped you alter or add admin icons in WordPress. You might also wish to take a look at how to white-label the WordPress admin dashboard or view these knowledgeable tips on customizing the WordPress admin area for higher workflows.
Should you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You too can discover us on Twitter and Facebook.
