To add a custom admin page in WordPress you need 2 things:

  • Add your items to the admin menu, using the add_menu_page() or add_submenu_page() functions.
  • Page content (a standard custom function that echo’s your html)

Example code

<?php
namespace MyPluginNamespaceName;


//***************************************************************
//***************************************************************
//********** ADD OUR PLUGIN PAGES TO THE WP ADMIN MENU **********
//***************************************************************
//***************************************************************

//ADD LINKS TO MY ADMIN PAGES IN THE MAIN SIDEBAR MENU
add_action( 'admin_menu', '\MyPluginNamespaceName\add_my_plugin_admin_menu_items' );
function add_my_plugin_admin_menu_items()
{
  //---- ADD PAGES TO THE ROOT ADMIN MENU -----
  add_menu_page('My Plugin Admin Page 1',     //Page Title
                'My Plugin Admin Page 1',     //Menu item text
                'manage_options',             //User capability level ('manage_options' = WP settings menu access),  see: https://wordpress.org/support/article/roles-and-capabilities/
                'my-plugin-admin-page-1',     //Menu item slug (used as URL argument)
                '\MyPluginNamespaceName\my_plugin_admin_page_1_html',  //Function name
                'dashicons-admin-generic',      //Icon to use (URL, or select from: https://developer.wordpress.org/resource/dashicons/#admin-generic )
                3 );        //$position - Position in the 'Menu Structure', for instance 3 would place it ater Dashboard which is fixed at 2 , see: https://developer.wordpress.org/reference/functions/add_menu_page/
  
  //<<<<<ADD OTHER MENU ITEMS HERE
  
  //---- ADD PAGES AS SUB MENU ITEMS -----
  //$parent_slug - can be your own created menu item, or one of the standard wp menu items slugs:
  //  Dashboard: 'index.php'
  //  Posts: 'edit.php'
  //  Media: 'upload.php'
  //  Pages: 'edit.php?post_type=page'
  //  Comments: 'edit-comments.php'
  //  Custom Post Types: 'edit.php?post_type=your_post_type'
  //  Appearance: 'themes.php'
  //  Plugins: 'plugins.php'
  //  Users: 'users.php'
  //  Tools: 'tools.php'
  //  Settings: 'options-general.php'
  //  Network Settings: 'settings.php'
  /*
  add_submenu_page('options-general.php',       //$parent_slug, the menu item within which to add this new sub menu item   (see above)
                  'My Plugin Admin Page 1',     //Page title
                  'My Plugin Admin Page 1',     //Menu item text
                  'manage_options',             //User capability level ('manage_options' = WP settings menu access),  see: https://wordpress.org/support/article/roles-and-capabilities/
                  'my-plugin-admin-page-1',     //Menu item slug (used as URL argument)
                  '\MyPluginNamespaceName\my_plugin_admin_page_1_html',  //Function name
                  Null );                       //$position - Position in the 'Menu Structure',
  */
  
  //<<<<<ADD OTHER MENU ITEMS HERE
}


//*********************************************************************************
//*********************************************************************************
//********** ADD OUR PLUGIN CSS AND JS FILES TO INCLUDE IN WP ADMIN MENU **********
//*********************************************************************************
//*********************************************************************************
/*
add_action( 'admin_enqueue_scripts', '\MyPluginNamespaceName\register_my_plugin_admin_scripts' );
function register_my_plugin_admin_scripts()
{
  wp_register_style( 'my-plugin', plugins_url( 'ddd/css/plugin.css' ) );
  wp_register_script( 'my-plugin', plugins_url( 'ddd/js/plugin.js' ) );

}

add_action( 'admin_enqueue_scripts', '\MyPluginNamespaceName\load_my_plugin_admin_scripts' );
function load_my_plugin_admin_scripts($hook)
{
  //Load only on ?page=sample-page
  if( $hook != 'toplevel_page_sample-page' )
    return;

  //Load style & scripts.
  wp_enqueue_style('my-plugin');
  wp_enqueue_script('my-plugin');
}
*/

//**********************************************
//**********************************************
//********** ADMIN PAGE - **********
//**********************************************
//**********************************************
function my_plugin_admin_page_1_html ()
{
  /*
  if (!current_user_can('administrator'))
    die();
  */

  //-----------------------
  //----- HTML OUTPUT -----
  //-----------------------
  $HtmlOutput = '';
  
  
  $HtmlOutput .= <
Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *