In some cases when creating wordpress site for a client or yourself, you might need to make custom admin page. For example a client will ask to do a page with simple static text, or with dynamic data from custom database tables, which can only be seen in wordpress admin panel, and might be even seen only by users who have specifig admin role. Another example is page for a plugin with instructions how to use it. Creating these kinds of admin pages is relatively easy. So let’s get started!

Registering Page in functions.php

The first step would be register custom admin page in themes functions.php file. As you might guess, when switching between themes, the same proccess of creating admin page will be needed. The code for registering page:

function register_custom_page(){

	add_menu_page( 
		$page_title, //Title displayed inside of the page
		$pages_menu_title, //Title displayed in admin menu panel
		$capability, //Specifying admin roles
		$page_slug, //A pages url slug
		$function, //Function for specifying file, which will be used for admin page, in this case 'custom_page'
		$icon_url, //Url for custom menu icon
		$position //A position in menu
	); 
	
}
add_action( 'admin_menu', 'register_custom_page' );

function custom_page(){
	
	require('custom.php');
	
}

 As you see, add_menu_page() is the function which will do it. In the comments I explained about each parameter that can be passed to the function. Function custom_page() is to identify which file it will use. More about admin roles which can be specified as $capability variable, visit official wordpress documentation about roles and capabilities.

Setting Up Admin Page File

Now that we have registered our admin page, and specified which file it will use, create in themes root folder custom.php file, and yes, you’re done! You can use your own styles for making admin page, or you can use WordPress default styles for buttons, tables, tabs and so on. A great plugin, where you can see styles that wordpress admin is using, visit here.

Adding Custom CSS or JS

The recomended way for adding CSS or JS files in WordPress would be through enqueuing them to the hook named admin_enqueue_scripts.  So the code would look like this:

CSS

function cutom_css_enqueue() {

    wp_register_style( 'custom_css', get_stylesheet_directory_uri() . '/css/custom.css' );

    wp_enqueue_style( 'custom_css' );

}
add_action( 'admin_enqueue_scripts', 'cutom_css_enqueue' );

 JavaScript

function cutom_js_enqueue() {

    wp_enqueue_script( 'custom_js', get_stylesheet_directory_uri() . '/js/custom.js' );

}
add_action( 'admin_enqueue_scripts', 'cutom_js_enqueue' );

That’s it. Now you can customize it as you like!

Let me know in the comments if you have any suggestions to add to this post or have any troubles.