How to Display a Personalized Icon for a Custom Menu in the Admin Sidebar
As a web developer, customizing the admin interface can be a great way to improve the user experience for your clients. One such customization is adding a personalized icon to the admin sidebar menu for your custom post types. In this article, we'll walk through a step-by-step process to achieve this using FontAwesome icons.
1. Pick an Icon
Head over to the FontAwesome website and browse through the extensive library of icons. For this example, we'll be using the "fa-flask" icon.
2. Get the SVG
Now that we've selected our icon, we need to obtain the SVG file. Go to the FontAwesome SVG repository on GitHub and find the icon you chose, in this case, "flask.svg". Click on the file and then click the "Raw" button to get the raw SVG code.
3. Bring the SVG into WordPress
In your WordPress functions.php file, where you register your custom post type, add the following snippet:
add_action('init', 'my_init');
function my_init() {
register_post_type('labs', [
'label' => 'Labs',
// .. other post type settings
'menu_icon' => 'data:image/svg+xml;base64,' . base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
]);
}
Here's what's happening in this code:
- We're using the
add_action()
function to hook into the init
WordPress action, which is triggered when WordPress initializes.
- Inside the
my_init()
function, we're registering a custom post type called "labs" using the register_post_type()
function.
- In the
'menu_icon'
parameter, we're setting the icon for the custom post type. This is where the magic happens.
The value of the 'menu_icon'
parameter is a data URI, which is a way of embedding the SVG image directly into the code. Here's a breakdown of what's happening:
'data:image/svg+xml;base64,'
: This is the prefix that tells WordPress to interpret the following data as an SVG image.
base64_encode('<svg width="20" height="20" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M1591 1448q56 89 21.5 152.5t-140.5 63.5h-1152q-106 0-140.5-63.5t21.5-152.5l503-793v-399h-64q-26 0-45-19t-19-45 19-45 45-19h512q26 0 45 19t19 45-19 45-45 19h-64v399zm-779-725l-272 429h712l-272-429-20-31v-436h-128v436z"/></svg>')
: This is the actual SVG code, which has been base64-encoded to make it easier to include in the data URI.
Important notes:
- The
fill="black"
attribute has been added to the <path>
element in the SVG code. This allows you to change the color of the icon by overriding the fill
property in your CSS.
- The
width
and height
attributes have been set to 20
, which is the default size for admin sidebar icons.
Now, whenever you visit the admin area and view the "Labs" custom post type, you'll see the personalized "fa-flask" icon in the sidebar menu.
Customizing the Icon Color
To change the color of the icon, you can use CSS to override the fill
property of the SVG. For example, you could add the following CSS to your WordPress theme's stylesheet:
.menu-icon-labs .dashicons {
fill: #00b8d4; /* Teal color */
}
In this example, the .menu-icon-labs
class is automatically added to the menu item for the "Labs" custom post type. By targeting this class and setting the fill
property, you can change the color of the icon.
Considerations for Custom Post Types
When working with custom post types, it's important to keep a few things in mind:
-
Unique Identifiers: Make sure to use a unique identifier for your custom post type, such as "labs" in this example. This will ensure that the icon is displayed correctly in the admin sidebar.
-
Post Type Arguments: The register_post_type()
function takes an array of arguments that allow you to customize the post type. In addition to the 'menu_icon'
parameter, you can set other options like the post type label, supports, and more.
-
Accessibility: While using an SVG icon can provide a crisp, scalable image, it's important to consider accessibility. Make sure to provide appropriate alternative text or a screen reader-friendly label for the icon.
By following these steps, you can easily add a personalized icon to the admin sidebar for your custom post types, enhancing the overall user experience for your clients.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your website and directly generate recommendations to fix them.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.