Tips And Tricks To Customize Your WordPress Admin Dashboard

Now that you are WordPress owner for some time, are you tired of that same old administration dashboard? Or are you thinking about giving your WordPress theme and your WordPress website a premium customized appeal? Well you are at the right place because in this tutorial we are going to show you how to customize every element of your WordPress admin dashboard. We are going to change the admin panel menus and sub menus, add custom widgets to the WordPress dashboard page or remove pre-existing one, and basically give a complete new makeover to the WordPress login page.

In this whole tutorial we would be changing the function.php file of the WordPress default theme Twenty Twelve. WordPress has hundreds of inbuilt functions that were created for the sole purpose of increasing the flexibility of the CMS and we would be exploiting these functions only.

Warning: No matter what happens do not touch the WordPress core. Whatever we are going to do in this post can be easily done by tampering with the admin files in wp-admin folder, one of the three main WordPress folders. I would highly oppose using such an approach. It has three major reasons:-

• Whatever you do would be applicable for all the themes on the WordPress not just the current one.
• Tampering with the WordPress core can negatively affect the functioning of necessary plugins and design elements.
• And, don’t get me started on security issues that will arise because of tampering with the core.

Besides why would you want to hack the core when it can be easily done in a simple and secure manner through function.php of the theme.

With that said, let’s start with customizing Dashboard and Admin Panel first.

Removing a Menu From WordPress Admin Panel

There are many cases, especially in professional sites, where a client wants to altogether remove a menu from the Admin panel. For example, owners of a business website don’t want anyone to tamper with the pages of their website, so they want to completely remove the ‘Pages’ menu. It’s a rare practice, but not that rare.

Removing a menu item from WordPress admin panel is very easy. WordPress has an inbuilt function just for this task remove_menu_page($menu_slug). Here $menu_slug is the URL slug of the menu item. For example, suppose if you wish to remove the Page menu item from your panel then just add the following code to function.php file of the WordPress theme.

function wi_remove_menu_pages() {
	remove_menu_page(‘edit.php?post_type=page’);	
}
add_action( 'admin_menu', 'wi_remove_menu_pages' );

And viola!You just vanished the Page menu. In this piece of code you will notice that I have created my own function named wi_remove_menu_pages(),and tagged it with admin_menu hook. Admin_menu is the main hook that deals with admin panel menus and submenus,so we would be using it a lot. Also here we have just hidden the Pages menu Item from the admin menu panel, so if a user enters the direct URL of Pages, he can reach it unhindered. You can of course rename the function any way you like.

Removing Submenu

I admit that very few clients ask for removing the complete Page menu in the admin panel. But quite a number of our clients ask us to remove the New Page submenu. Fortunately, just like main menu items, WordPress has a special function for removing Sub Menu items: remove_submenu_page( $menu_slug, $submenu_slug). Here $menu-slug is the URL slug of the main menu and $submenu_slug is the URL slug of the submenu. So for example if you have to remove the new-page submenu item from the Page Menu you would have to add the following piece of code

function wi_remove_menu_pages() {
	remove_submenu_page( 'edit.php?post_type=page', 'post-new.php?post_type=page' );	
}
add_action( 'admin_menu', 'wi_remove_menu_pages' );

Now for those who haven’t realized it by now, here by URL Slug I mean the last appendage of the URL. For example if the URL of Page menu is “http://localhost/wordpress-testing/wp-admin/edit.php?post_type=page”, the slug would be edit.php?post_type=page.

Renaming the Main Menu Item

Since we are playing with the menus, let’s learn how to change the name of a menu item. Renaming a menu item is little tricky. We have to dig a little in WordPress Core variables and change the values of these variables. We would be using the same admin_menu action hook and executing it in our custom function in function.php.

The main variable that the WordPress uses for menu items is $menu. This is an array function that contains names of all menu items. Each menu item has a specific location in $menu, so all one needs to know to rename a menu item is to change the value of the string by accessing the respective location. At the end of this post I have included a key for locations of all menus and submenus, along with their specific slugs. It would be super useful for all the tricks that I have mentioned in this post.

So let’s suppose if you wish to change the menu name of Pages to My-Pages, here is how you can do it.

function custom_admin_menu_name() {  
	global $menu;  
$menu[20][0] = 'My Pages'; 
}  
add_action( 'admin_menu', 'custom_admin_menu_name' );

Since ‘Pages‘ was at location ‘20’ we used $menu[20][0]. Now you can rename any menu item you want. But you will notice that the sub menu items are still the same. We are going to change them too.

Renaming the Submenus

Submenus can also be changed like the main menu items. WordPress has an array variable that saves the names of all submenus, and if you know the location, you can rename you submenus also. Submenu array however, is a 3 dimensional array with first dimension being the main menu slug that they are part of. Again, to know more about the Submenu names and their location in the array, checkout the key that I have given below.

Now for example if you wish to rename the submenus of My Pages menu item, here’s how you would do it:-

function edit_admin_menu_name() {  
global $menu;  
global $submenu;  
$menu[20][0] = 'My Pages'; // Changing the name of Page
    $submenu['edit.php?post_type=page'][5][0] = 'All My Pages';  
    $submenu['post-new.php?post_type=page''][10][0] = 'Add a New Page';   
}  
add_action( 'admin_menu', 'edit_admin_menu_name’);

As you can see, once you get the hang of it, it’s easy. You can remove or rename every menu item and submenu item, right from ‘Dashboard‘ to ‘Settings‘, the same way.

Changing the Order of the Main Menu Items

The last menu trick, and the lengthiest of them all, is to change the order of Menu items. WordPress has a filter named menu_order that we can use to change the order of our menu. But the filter only works when you activate the custom_menu_order function. So here’s how you could change the order of the menu items

function my_custom_menu_order( $menu_ord ) {
	if ( !menu_ord )
		return true;
	return array( 'index.php', 'edit.php', 'edit.php?post_type=page', 'separator1', 'edit-comments.php' );
}
add_filter( 'custom_menu_order', 'my_custom_menu_order' );
add_filter( 'menu_order', 'my_custom_menu_order' );

The beauty of this method is that you don’t have to include very menu item, just the menu items you wish to appear first on the list. WordPress will automatically cycle the rest of the item below the included ones. So you don’t have to worry about including every item for the list. Now if you want to remove a menu item, use the method I described above. Another thing to note here is the use of value ‘separator1’. This value is used to add a visual separator between the menu items. You can add only one more separator using ‘separator2’ value. There is no separator3 so use the given two wisely. Now let’s take a look at some important styling customization that we can do in WordPress.

Adding a custom CSS sheet for styling Admin dashboard

You can easily add a custom style sheet for your WordPress admin panel by using the admin_head hook.

function admin_css() {
    wp_enqueue_style( 'admin_css', get_template_directory_uri() . '/css/admin.css' );
}
add_action('admin_head', 'admin_css' );

Here /css/admin.css is the location that contains my admin style sheet. You can change it according to your convenience.

Adding a custom style sheet for visual editor

Yes, that’s right, you can change the style of your visual editor also, and surprising it is way too easy. You just have to include the following line in your function.php and done.

add_editor_style('/css/editor.css');

Changing the New Page and New Post Placeholder in title input box

You can also change the placeholder of the Title input box in New Page and New Posts. The default placeholder is “Enter title here”, we are going to change it to “Enter your new title”.

function change_title($title){
     $title = 'Enter your new title';
     return $title;
}
add_filter( 'enter_title_here', 'change_title' );

This function will change the placeholder for both New Page and New Post. Enter_title_here is the default WordPress hook that deals with the title placeholder.

Customize the footer of WordPress Admin Dashboard

The footer of the WordPress Admin Panel shows “Thank you for creating with WordPress” and links back to WordPress.org. It poses no problem and many don’t even notice it, but if you are creating your own professional WordPress theme, it looks much better with a custom footer. So to change the footer of your theme’s admin panel, just add the following code to function.php.

function custom_footer_admin () {
	echo 'Made by WordPressIntegration. If you are facing any problem with the theme, feel free to Contact Us';
}
add_filter('admin_footer_text', 'custom_footer_admin');

Removing Widgets From The WordPress Dashboard

Just as you login to the admin dashboard, it takes you to the  Dashboard Home page. This page contains a number of widgets such as Quick Press, Recent Comments, Recent Drafts, Right Now, etc. These widgets have their uses but some are totally useless or are not required by the client. You can easily hide these widgets using wp_dashboard_setup action hook.

function remove_dashboard_widgets() {
	global $wp_meta_boxes;
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
//Removed recent comments widget
	unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
//Removed incoming links widget

	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
 //Removed Other WordPress News widget
	unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']); 
//Removed WordPress Blog widget
}
add_action('wp_dashboard_setup', 'remove_dashboard_widgets');

Here $wp_meta_boxes is main WordPress variable that deals with dashboard widgets. Checkout this codex to know more about removing Dashboards widgets.

Adding a Custom Dashboard Widget

You can even add your own custom widget in the WordPress admin dashboard. For this you would need two functions. The first one would act as the widget while the other one would load it into the dashboard. We are going to use wp_add_dashboard_widget($widget_id, $widget_name, $callback, $control_callback ) inbuilt function of WordPress and we are going to call it with wp_dashboard_setup action hook.

function my_dashboard_widget_function() {
	//It’s just a simple text but you can use complex code here	
	echo 'This theme is brought to you by <strong><a href = "https://www.wordpressintegration.com/"> WordPressIntegration</a></strong>, the best PSD to WordPress conversion service on the internet.';
}
function adding_my_dashboard_widgets() {
wp_add_dashboard_widget('wp_dashboard_widget', 'Made By WordPressIntegration', 'my_dashboard_widget_function');
}
add_action('wp_dashboard_setup', 'adding_my_dashboard_widgets' );

Some Last Words

As I pointed out earlier, every step that I have demonstrated in this tutorial is done through the function.php of the theme. So if you change your theme, all the changes would revert back to defaults. You may attain a more permanent change by messing with the wp_admin files but I would advise against it.

If you have any other trick that you would like to share or if you are facing a problem in any of the above mentioned tricks, feel free to write a comment below, and I would solve your query. As promised above, here is a key to all the dashboard menus and submenus with their respective slugs.

Menu and Submenu slugs and location key of WordPress Admin Dashboard

References
https://developer.wordpress.org/reference/hooks/menu_order/
http://codex.wordpress.org/Dashboard_Widgets_API
https://developer.wordpress.org/reference/functions/wp_add_dashboard_widget/
https://developer.wordpress.org/reference/functions/remove_meta_box/
https://www.smashingmagazine.com/2012/05/customize-wordpress-admin-easily/