How to Add or Change WordPress Admin Icons (2 Easy Methods)

How to Add or Change WordPress Admin Icons (2 Easy Methods)

Personalizing your WP dashboard can enhance the consumer expertise. One simple approach to do that is by including or altering admin icons.

Bespoke icons can enhance your workflow and make it simpler for brand new customers to navigate the admin space of your website. Plus, a customized dashboard is extra pleasing to make use of.

On this article, we are going to present you the right way to add or change WP admin icons. We’ll information you thru the method step-by-step. By the top, your WP dashboard will look recent and distinctive.

Changing menu icons in WordPress admin areaChanging menu icons in WordPress admin area
How to Add or Change WordPress Admin Icons (2 Easy Methods) 1

What Are Admin Icons in WP?

Admin icons are the tiny pictures you see within the navigation panel of the WP admin space. They seem subsequent to every menu merchandise.

Menu icons in WordPress admin areaMenu icons in WordPress admin area
How to Add or Change WordPress Admin Icons (2 Easy Methods) 2

These pictures use Dashicons, an icon font made for WP. It was first launched in 2013 and has not modified since then.

It’s possible you’ll wish to give your WP admin space a slight makeover by altering these icons. You possibly can swap out present icons with one thing you want higher and even change them with your personal {custom} icons.

In case you are making a web site for purchasers who usually are not aware of WP, utilizing {custom} icons may also 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 try this, and you’ll select the one which works greatest for you:

Technique 1: Change Admin Icons in WP Admin Utilizing a Add-on

For this technique, we can be utilizing the Admin Menu Editor plugin. Because the identify suggests, it lets you customise WP admin menus simply.

First, it is advisable to set up and activate the Admin Menu Editor plugin. For extra particulars, see our tutorial on the right way to set up a WP plugin.

After you might have activated the plugin, go to the Settings » Menu Editor web page. Right here, you will note your WP admin menu inside a neat consumer interface (UI) the place you may customise it.

The UI has a toolbar on the high, which lets you add or delete menu gadgets, add separators, copy and paste gadgets, and extra.

Menu editor Menu editor
How to Add or Change WordPress Admin Icons (2 Easy Methods) 3

Under that, you may click on on a menu merchandise to develop and consider its settings. Right here, we’ve expanded the Posts menu merchandise.

Once you develop any menu merchandise, you will note extra choices. If it’s a guardian menu, additionally, you will see any youngster menu gadgets in the proper column.

READ  6 Best Online Order Form Plugins for WordPress (Expert Picks)

So as to add, change, or delete a menu icon, click on on the ‘Present superior choices’ hyperlink on the backside.

Choose menu icon Choose menu icon
How to Add or Change WordPress Admin Icons (2 Easy Methods) 4

Now, click on on the button subsequent to the ‘Icon URL’ area.

It will reveal a popup the place you may see all of the accessible Dashicons. Alternatively, you may click on on the ‘Media Library’ button to add your personal picture icon.

Select font iconSelect font icon
How to Add or Change WordPress Admin Icons (2 Easy Methods) 5

If you wish to add your personal picture icon, we suggest utilizing a 32×32 picture, ideally in clear PNG format.

After selecting your icon, click on on the ‘Save Adjustments’ button to retailer your settings.

You’ll now see your {custom} menu icon used within the admin menu.

Custom icon using the plugin methodCustom icon using the plugin method
How to Add or Change WordPress Admin Icons (2 Easy Methods) 6

This subsequent technique requires you so as to add some {custom} code to alter icons.

Should you haven’t performed it earlier than, we suggest taking a fast have a look at our tutorial on including {custom} code in WP.

The best and most secure approach so as to add {custom} code in WP is utilizing WPCode. It’s the greatest WP code snippets plugin. It lets you safely add {custom} code, CSS, and HTML to your WP website with out unintentionally breaking something.

Be aware: The plugin additionally has a free model referred to as WPCode Lite, which can get the job performed. Nonetheless, the professional model provides you further options that could be useful.

Instance 1. Changing an Icon Utilizing the Default Dashicons

For this instance, we are going to use the default Dashicons to interchange an icon from the present icon set.

It’s essential to notice that WP already hundreds Dashicons, that are extremely optimized for efficiency. So, utilizing them is not going to influence web page load pace.

That stated, earlier than you run the code, it is advisable to word down the next:

  1. The URL for the menu merchandise you wish to change
  2. The icon identify you wish to use

First, it is advisable 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 note 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 can be edit.php.

Find page URLFind page URL
How to Add or Change WordPress Admin Icons (2 Easy Methods) 7

Subsequent, go to the Dashicons web site and click on on the icon you wish to use.

READ  How to Make a WordPress Website With AI (Beginner's Guide)

Clicking on any icon will present its identify and slug on the high. At this level, it is advisable to copy the slug since you’ll want it within the subsequent step.

Select icon dashiconsSelect icon dashicons
How to Add or Change WordPress Admin Icons (2 Easy Methods) 8

When you’ve performed that, go to the Code Snippets » + Add Snippet web page and hover your mouse over the ‘Add Your Bespoke Code (New Snippet)’ field.

Then, merely click on on the ‘+ Add Bespoke Snippet’ button that seems.

Add new custom code snippetAdd new custom code snippet
How to Add or Change WordPress Admin Icons (2 Easy Methods) 9

On the subsequent display screen, present a title to your snippet and choose PHP Snippet beneath the Code Sort choice.

After that, you may copy and paste the next code into the code editor field:

operate change_post_menu_icon() {
    world $menu;
    
    // Loop by way of the menu gadgets
    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 unique 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 alter the dashicons-format-aside to the slug you copied earlier.

Your code will seem like this within the editor:

Add menu icon codeAdd menu icon code
How to Add or Change WordPress Admin Icons (2 Easy Methods) 10

Subsequent, it is advisable to inform WP the place to run this code.

Admin menu icons seem contained in the WP admin space. On the identical web page, scroll to the Insertion part and choose ‘Admin Solely’ beneath the Location choice.

Load code locationLoad code location
How to Add or Change WordPress Admin Icons (2 Easy Methods) 11

Lastly, change your snippet to Energetic and click on the ‘Save Snippet’ button to save lots of your adjustments.

WP will now begin utilizing the icon you chose for the Posts web page.

Custom icon code methodCustom icon code method
How to Add or Change WordPress Admin Icons (2 Easy Methods) 12

Instance 2. Use Font Superior Icon for a Menu Merchandise in The WP Admin Space

The default Dashicon library has a restricted set of icons. The excellent news is that you need to use a font and icon library like Font Superior, which has a a lot bigger set of icons.

Nonetheless, this implies you’ll have to load Font Superior, which can decelerate your WP admin space barely (just a few milliseconds).

Earlier than you add any code, first it is advisable to discover the icon you wish to use. Go to the Font Superior web site and change to the Free Library.

Font Awesome websiteFont Awesome website
How to Add or Change WordPress Admin Icons (2 Easy Methods) 13

You will note all of the icons accessible at no cost.

Click on on the icon you wish to use, and it’ll open in a popup. From right here, it is advisable to copy the icon’s Unicode worth.

Find unicode for the icon you want to useFind unicode for the icon you want to use
How to Add or Change WordPress Admin Icons (2 Easy Methods) 14

After that, go to the Code Snippets » + Add Snippet web page in your WP dashboard.

READ  How to Fix WordPress 'jQuery is not defined' Error (6 Ways)

Go forward and click on on the ‘+ Add Bespoke Snippet’ button throughout the ‘Add Your Bespoke Code (New Snippet)’ field.

Add new custom code snippetAdd new custom code snippet
How to Add or Change WordPress Admin Icons (2 Easy Methods) 15

On the subsequent display screen, present a title to your snippet and choose PHP Snippet because the Code Sort choice.

After that, you may 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() {
    world $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 alter the icon to a Font Superior icon
operate custom_admin_menu_icon() {
    echo '<fashion>
        .custom-post-menu-class .wp-menu-image:earlier than {
            font-family: "Font Superior 5 Free" !essential;
            content material: "f015"; /* Unicode for the Font Superior icon */
            font-weight: 900; /* Wanted for stable icons */
        }
    </fashion>';
}
add_action('admin_head', 'custom_admin_menu_icon');

Don’t overlook to interchange f015 with the Unicode worth you copied earlier.

Your code will seem like this within the editor:

Adding font awesome code for a menu itemAdding font awesome code for a menu item
How to Add or Change WordPress Admin Icons (2 Easy Methods) 16

Subsequent, it is advisable to inform WP the place to run this code.

Admin menu icons seem contained in the WP admin space, so you may scroll to the Insertion part and choose ‘Admin Solely’ because the Location choice.

Load code locationLoad code location
How to Add or Change WordPress Admin Icons (2 Easy Methods) 17

Lastly, change your snippet to Energetic and click on on the ‘Save Snippet’ button to save lots of your adjustments.

WP will now begin utilizing the icon you chose for the Posts web page.

Custom menu icon using Font AwesomeCustom menu icon using Font Awesome
How to Add or Change WordPress Admin Icons (2 Easy Methods) 18

Bonus: Add Icons for Bespoke Article Varieties in WP

Bespoke submit varieties permit you to create distinctive sorts of content material to your WP web site. These usually are not default posts or pages however one thing completely authentic to your website.

In case you are utilizing a {custom} submit kind in your WP web site, you may wish to change its icon so as to simply determine it.

Changing menu icon for a custom post type in WordPressChanging menu icon for a custom post type in WordPress
How to Add or Change WordPress Admin Icons (2 Easy Methods) 19

In that case, take a look at our detailed tutorial on the topic, which exhibits a number of methods to alter or add icons to your {custom} submit varieties.

We hope this text helped you alter or add admin icons in WP. You may additionally wish to take a look at the right way to white-label the WP admin dashboard or view these skilled recommendations on customizing the WP admin space for higher workflows.

Should you appreciated this text, then please subscribe to our YouTube Channel for WP video tutorials. You too can discover us on Twitter and Fb.

Leave a Reply

Your email address will not be published. Required fields are marked *