How to create new custom menu item in your wordpress back end?

One question that I am asked about WordPress frequently is: how to add custom menu items to the WordPress admin menu? This is what we will tackle in this post.

The back end menu of your WordPress website may seem a little inflexible to you. Chances are that you might even urge for a custom menu, so as to have better control over your site’s admin bar.

In this post, we’ll help you understand the significance of custom menu, and how you can add it in your website admin menu.

Why You May Need to Add a Custom Menu?

WordPress website admin panel already has menus like Pages, Posts, Appearance etc. However, using the already existing menus make you perform pre-defined functions only. But, what if you want to do a lot of other things? For example, you may want to show a list of posts with their authors with a link to edit them, since it is not directly available in the WordPress admin panel, you may have to use a plugin or you can create a menu item to display that.

You can accomplish this goal by creating a custom menu, which will eventually help you have better control over your website admin area.

How to Create a Custom Menu in WordPress Admin?

When it comes to making tweaks to WordPress functionality, most of us (if not all) prefer following the easier route – use WordPress plugins. Most of the plugins will create the menu. However, you might not be able to find a plugin that can meet any other requirement like display a list of posts, their authors etc. And so, you will have to follow the process of creating the function as well as a menu item associated with it in your back end.

Following is one of the examples that will help you understand how you can create a Custom Menu in your back end. With this example, you will have a custom menu in the back end, and a page linked to it will show the list of users of your WordPress set up.

WordPress create new custom menu item in your wordpress back end

<?php
add_action( 'admin_menu', 'register_my_custom_menu_page' );
 
function register_my_custom_menu_page(){
    add_menu_page( 'custom menu title', 'custom menu', 'manage_options', 'custompage', 'my_custom_menu_page','', 6 ); 
}
 
function my_custom_menu_page()
{
	$users = get_users();
?>
 
    <style type="text/css">
			table.usertable {
				font-family: verdana,arial,sans-serif;
				font-size:11px;
				color:#333333;
				border-width: 1px;
				border-color: #999999;
				border-collapse: collapse;
			}
 
			table.usertable th {
				background:#b5cfd2;
				border-width: 1px;
				padding: 8px;
				border-style: solid;
				border-color: #999999;
			}
 
			table.usertable td {
				background:#dcddc0;
				border-width: 1px;
				padding: 8px;
				border-style: solid;
				border-color: #999999;
			}
	</style>
 
    <h3>Custom Menu to display all users with their roles</h3>
		<table border="1" class="usertable">
				<tr>
						<th>No.</th>
						<th>User Name.</th>
						<th>User Role.</th>
						<th>Action.</th>
				</tr>
 
				<?php 
					$user_count=0;
 
					foreach($users as $user)
					{
						$user_count++;
				?>
				<tr>
						<td><?php echo $user_count; ?></td>	
						<td><?php echo $user->user_login; ?></td>	
						<td><?php echo $user->roles[0]; ?></td>	
						<td><a href="<?php echo get_edit_user_link($user->ID);?>">Edit</a></td>	
				</tr>	
				<?php
					}
				?>
		</table>	
<?php
	}
?>

After adding this code in your theme’s functions.php file, you can see a custom menu in your WordPress website admin panel (as shown in the screenshot below).

WordPress custom menu in your WordPress website admin panel

As you can see in the code above, a few lines of code will generate a menu and further code will assist you to insert whatever you want with the page associated with that menu.

If you’re just a beginner or any WordPress user without any programming knowledge, you will find the above code difficult to understand. So, to help you out let us provide a more detailed view of the code. We have used a simple code to add a menu to our WordPress admin menu sidebar. Let us now have a look on the first line of our code:

add_action( 'admin_menu', 'register_my_custom_menu_page' );

The add_action is a hook in WordPress programming that registers the ‘register_my_custom_menu_page’ function under the admin_menu hook. You can change the function name to something you like.

Note: Without making the add_action() call, an error will be thrown for undefined function when attempting to activate the custom menu.

Now let’s have a look at the register_my_custom_menu_page() function.

function register_my_custom_menu_page()
{
    add_menu_page( 'custom menu title', 'custom menu', 'manage_options', 'custompage', 'my_custom_menu_page','', 6 ); 
}

This function is used for calling a new function ‘add_menu_page’ that adds a menu in a WordPress theme. The function ‘add_menu_page’ contains 7 parameters and each of them have a certain meaning. So, let us have a look at those 7 parameters one by one:

• 1) page title: the first parameter is for the page title or for the browser title. When someone clicks on our custom menu, the text to be displayed in the title tags of the page will be passed here.
• 2) Menu title: the second parameter displays the Menu title which will appear in our site’s admin area.
• 3) Capability: the third parameter determine the capability that is needed, in order to get the menu displayed to a user.
• 4) Menu slug: This parameter is used to manage the menu slug which will appear on the URL of page, when the menu is clicked.
• 5) Function (optional): It displays the content for the menu page. In our case, we have passed the ‘my_custom_menu_page’ function which helps in generating the user list, their role and profile edit link.
• 6) Menu Icon (optional): Icons are the perfect way to communicate your message clearly like the way we do with words. And so, using the right icon for your custom admin menu is important. The sixth parameter is used to manage the menu icon. Here we need to pass an image path for our menu. Since, we are not passing any passing any value here, in that case, WordPress will assign a default icon to our menu.
• 7) Menu Position (optional): Though even the last parameter is optional, but it is important, as it is used to manage the menu position (i.e. where you want your menu to appear, at the bottom or the top of the menu).

Wrapping It Up!

You can make the process of managing your WordPress website backend (admin panel) easier and quicker for yourself as well as your users, by adding a custom menu that gives you better authority over the default website admin menu.

In this post, you will learn about how to add a custom menu to display list of all WordPress users, their roles and link to edit their profiles. However, you can add your own custom menu as well to the menu that will work as per your own requirements.