Friday, 18 September 2015

A Stepwise Tutorial On Adding New Admin Menu With Custom Icon

If you're an avid WordPress fan then you'd have surely tried the offerings of this absolutely brilliant CMS(Content Management System). Backed by an intuitive user interface and built-in menus like Pages, Posts, Categories etc, WordPress has allowed users to perform several customizations for their website - be it WordPress theme customization, or customizing some specific sections of a WordPress site.

What does this tutorial look into?

Considering your familiarity with the significance of having a custom admin menu, I've written this tutorial which makes you familiar with the process of creating one along with a custom icon.

Creating a custom menu in WordPress Admin

Unlike the hassles associated with choosing the right plugin for creating a custom admin menu, you can easily opt for an alternative wherein you just need to write a simple piece of code. Just follow the two steps explained below:

Step 1- Register the new Admin menu using Action hook

The code associated with the same is:

add_action( 'admin_menu', 'register_my_custom_menu_page' );

In the above code, add_action is a WordPress hook which is used for registering the custom admin menu item. This action hook is registering the function called 'register_my_custom_menu_page function available under the admin_menu hook. Here, you need to consider an important thing that the custom admin menu should be activated using the add_action() call. Failure to do so will result into an error.

Step 2- Create a custom function for adding the custom admin menu in back-end(in addition to a custom icon)

Here's the code associated with this step:

function register_my_custom_menu_page()
add_menu_page( 'custom menu title', 'custom menu', 'manage_options', 'custompage', 'my_custom_menu_page','', plugins_url( 'myplugin/images/icon.png' ), 6);

The above function will call the 'add_menu_page function which will be adding the new custom admin menu in your WordPress theme. As is visible from the code snippet, the function 'add_menu_page is being passed seven parameters which have been explained below:

1. Page title- as the very first parameter, it is used for defining a suitable title for the page. To put in simple words, whenever a user clicks on the custom admin menu, the text specified here will be shown in the title tags of the page.

2. Menu title- this is the title for the custom menu and will be displayed in your site's admin area.

3. Capability- this is the parameter which specifies whether the user has the ability to display the custom menu or not.

4. Menu slag- as the fourth parameter, this is used for managing the URL of page.

5. Function- Although this is optional, you'll be required to add the menu page content here. Plus, 'my_custom_menu_page' is the function which allows you to produce the user list, specific roles as well as the profile edit link.

6. Icon URL- If you're inclined on embellishing your custom admin menu using icon, then this is a parameter you can't afford to skip. It will be passed for displaying a specific icon for the new custom admin menu. Here, you also need to pass the image path as a unique value. Well, you can choose from a variety of options that are available for adding an icon to the admin menu. Here are two of the most effective ones for you to choose from:

If you already have a custom image file, then simply use the function plugin_dir_url(_FILE_) for obtaining the plugin directory URL. After this, simply add the image filename to the respective URL.

I'm sure you must be aware of the Dashicons feature available with WordPress 3.8 version. Hence, you can simply choose from the wide collection of eye-catchy icons and opt for adding a suitable one by including a little markup and CSS.

7. Menu Position- As a yet another optional parameter, you can use it for managing the position of the custom admin menu. That means, you can choose to place the admin menu either towards the top or bottom of the admin page.

Here's how the final output will look like:

We're done!

Wrapping Up

With admin menu serving as an excellent tool for managing menus visible in the front-end, I'm sure the steps explained in the above tutorial would aid you in building one that's simple to use and highly effective. Moreover, by equipping the menu with your kind of icon, accessing the WordPress admin dashboard would become a completely exciting venture.  

1 comment:

  1. Hello OSS Media,

    Thanks for such a wonderful tutorial let me also try this...!!

    Thanks & Best Regards
    Hexagon | Affordable WordPress Development India