Adding a WordPress admin page in itself is pretty straightforward, and well documented. You do it using the add_menu_page function, something like this…
add_menu_page('My Page', 'My Page', 'manage_options', 'my-page', 'show_my_page', '', 1);
This function takes the following parameters:
- Page title (required) – the text to be displayed in the title tags of the page when the menu is selected
- Menu title (required) – the text to be used for the menu item itself
- Capability (required) – the user must have this capability in order to see the menu item
- Menu slug (required) – the unique reference for the menu page
- Function (optional) – this is called to output the content for the menu page (defaults to empty string)
- Icon (optional) – this is the interesting one that we’re going to come back to in a minute (defaults to empty string)
- Position (optional) – the order of the menu in relation to others
As I say, the most interesting one as far as I’m concerned is the sixth, the icon definition. Whilst it defaults to empty string, there are 3 ways of setting it…
- Base64-encoded SVG using a data URI (eg. ‘data:image/svg+xml;base64,’)
- Name of a Dashicons class (eg. ‘dashicons-chart-pie’)
- The string ‘none’ – this leave the element (div.wp-menu-image) empty, which allows you to style it yourself with CSS
My favourite of these is the first, the Base64-encoded SVG. The Dashicons can be convenient, but there’s often not one that really fits, especially if you’re doing something like a plugin and want to use a brand logo.
The main reason that I like to use an SVG is so that the icon fits with the rest of the colour branding of the menu. Some plugins like to use the colour of their logo, and this makes sense, but personally I think fitting in is better than standing out.
However, one thing I keep forgetting, including again this morning, is that the SVG will only colour match if it has a “fill” style attribute, like this…
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="2190.667" height="1553.333" viewBox="0 0 1643 1165"> <path fill="#eee" d="........"/> </svg>
So if you’re using SVG and it’s not the same colour as the other menu items, you might need to get in there and add the “fill” style attribute, which can be done using any text editor.