Add Custom Icons to WordPress Admin Menu Easily
How to add custom icons to wordpress admin menu;
Wordpress admin menu custom icon tutorial;
Change wordpress admin menu icons;
Add svg icon to wordpress admin menu;
Customize wordpress admin menu icons;
Wordpress admin menu icon plugin;
Custom icon for wordpress admin dashboard;
Wordpress admin menu icon change;
Add custom image to wordpress admin menu;
Wordpress admin menu icon customization;
Explanation
Want to jazz up your WordPress admin menu with custom icons? Here's how you can do it without breaking a sweat.
Change Existing Icons:
- To change the icon for the Dashboard, use a special code called Dashicons. For example, '\f120' changes the Dashboard icon.
- Similarly, you can change the Posts menu icon using '\f109'.
Add Custom SVG Icons:
- If you have a specific SVG icon, you can set it for a menu item by specifying the path to your SVG file. This will replace the default icon with your custom image.
- Ensure your SVG file is accessible and the path is correct.
Create a New Menu with a Custom Icon:
- You can add a new menu item with a default Dashicon. For instance, 'dashicons-admin-generic' is used here.
- To replace this with your SVG, use the same method as above by specifying the SVG path.
These tweaks are added to the admin area using a bit of CSS magic. Just make sure to place the code in your theme's functions file, and you're good to go!
Code
// Function to add custom icons to WordPress admin menu
function wp_dudecom_custom_admin_menu_icons() {
?>
<style>
/* Change the icon for the Dashboard menu item */
#adminmenu #menu-dashboard div.wp-menu-image:before {
content: '\f120'; /* Dashicons code for a custom icon */
}
/* Add a custom SVG icon to a specific menu item */
#adminmenu #toplevel_page_custom_menu div.wp-menu-image {
background-image: url('path-to-your-icon.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
/* Example: Change the icon for the Posts menu item */
#adminmenu #menu-posts div.wp-menu-image:before {
content: '\f109'; /* Dashicons code for a custom icon */
}
</style>
<?php
}
add_action('admin_head', 'wp_dudecom_custom_admin_menu_icons');
// Function to register a custom admin menu with a custom icon
function wp_dudecom_register_custom_menu_page() {
add_menu_page(
__('Custom Menu Title', 'textdomain'),
__('Custom Menu', 'textdomain'),
'manage_options',
'custom_menu_slug',
'wp_dudecom_custom_menu_page',
'dashicons-admin-generic', // Default Dashicon
6
);
}
add_action('admin_menu', 'wp_dudecom_register_custom_menu_page');
// Callback function for the custom menu page
function wp_dudecom_custom_menu_page() {
echo '<h1>' . __('Welcome to the Custom Menu Page', 'textdomain') . '</h1>';
}
// Function to enqueue custom SVG icon for the custom menu
function wp_dudecom_enqueue_custom_admin_icons() {
?>
<style>
#adminmenu #toplevel_page_custom_menu_slug div.wp-menu-image {
background-image: url('path-to-your-custom-icon.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
</style>
<?php
}
add_action('admin_head', 'wp_dudecom_enqueue_custom_admin_icons');Instructions
File Location: Add the following code to your theme's functions.php file or a custom plugin file.
Prerequisites:
- Ensure you have access to your WordPress theme files or a custom plugin.
- Have the path to your custom SVG icons ready if you plan to use them.
Implementation Steps:
- Open your WordPress theme's
functions.phpfile or create a new custom plugin file. - Copy and paste the provided code into the file.
- Replace
'path-to-your-icon.svg'and'path-to-your-custom-icon.svg'with the actual paths to your SVG files. - Save the changes to the file.
- Log in to your WordPress admin dashboard to see the changes in the menu icons.
Notes:
- Ensure your SVG files are uploaded to your server and the paths are correct.
- If you encounter any issues, double-check the code for any syntax errors.
Need help with implementation or want more advanced functionality? Visit wp-dude.com for expert WordPress assistance.