Adding a WordPress admin page

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:

  1. Page title (required) – the text to be displayed in the title tags of the page when the menu is selected
  2. Menu title (required) – the text to be used for the menu item itself
  3. Capability (required) – the user must have this capability in order to see the menu item
  4. Menu slug (required) – the unique reference for the menu page
  5. Function (optional) – this is called to output the content for the menu page (defaults to empty string)
  6. Icon (optional) – this is the interesting one that we’re going to come back to in a minute (defaults to empty string)
  7. 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.

 

Big changes coming to GTmetrix

If you’ve ever done any performance optimisation on your website, you’ll almost certainly have come across GTmetrix, how could you not? The site was originally created as a tool for their own hosted customers to check the speed of their websites and improve them, but over the years it has become a go-to resource for so many…

Disabling WordPress auto-updates

I’ve already written about WordPress auto-updates, a new hotly contested feature of WordPress 5.5.  I’ve previously said that the best advice I can give is to make sure that plugins involved in non-critical functionality should probably be set to auto-update, as if the plugin stops working, it’s most likely to only affect that functionality and the loss of…

WordPress auto-updates

Recently WordPress 5.5 was released and one of the new features that has been rolled out is the ability to auto-update plugins and themes.  There are mixed opinions on whether this is really a good thing or not, so here’s my take. Firstly, how you can you enable this functionality?  It isn’t enabled out of the…

Upgrade to WordPress 5.5

In general my upgrade to WordPress 5.5 has been pretty seamless, across all of the client sites that I maintain.  This is good news! One of the main issues that I’ve come across is with a few of the sites running older themes (despite my recommendations to let me update or create a custom theme…