{"id":3446,"date":"2020-12-27T15:08:43","date_gmt":"2020-12-27T15:08:43","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=3446"},"modified":"2022-02-17T07:13:47","modified_gmt":"2022-02-17T07:13:47","slug":"create-an-admin-page","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/wordpress\/admin-area\/creating-admin-ui-elements\/create-an-admin-page","title":{"rendered":"Create an admin page"},"content":{"rendered":"\n<p>To add a custom admin page in WordPress you need 2 things:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Add your items to the admin menu, using the add_menu_page() or add_submenu_page() functions.<\/li><li>Page content (a standard custom function that echo&#8217;s your html)<\/li><\/ul>\n\n\n\n<h4 class=\"wp-block-heading\">Example code<\/h4>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\nnamespace MyPluginNamespaceName;\n\n\n\/\/***************************************************************\n\/\/***************************************************************\n\/\/********** ADD OUR PLUGIN PAGES TO THE WP ADMIN MENU **********\n\/\/***************************************************************\n\/\/***************************************************************\n\n\/\/ADD LINKS TO MY ADMIN PAGES IN THE MAIN SIDEBAR MENU\nadd_action( 'admin_menu', '\\MyPluginNamespaceName\\add_my_plugin_admin_menu_items' );\nfunction add_my_plugin_admin_menu_items()\n{\n  \/\/---- ADD PAGES TO THE ROOT ADMIN MENU -----\n  add_menu_page('My Plugin Admin Page 1',     \/\/Page Title\n                'My Plugin Admin Page 1',     \/\/Menu item text\n                'manage_options',             \/\/User capability level ('manage_options' = WP settings menu access),  see: https:\/\/wordpress.org\/support\/article\/roles-and-capabilities\/\n                'my-plugin-admin-page-1',     \/\/Menu item slug (used as URL argument)\n                '\\MyPluginNamespaceName\\my_plugin_admin_page_1_html',  \/\/Function name\n                'dashicons-admin-generic',      \/\/Icon to use (URL, or select from: https:\/\/developer.wordpress.org\/resource\/dashicons\/#admin-generic )\n                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\/\n  \n  \/\/&lt;&lt;&lt;&lt;&lt;ADD OTHER MENU ITEMS HERE\n  \n  \/\/---- ADD PAGES AS SUB MENU ITEMS -----\n  \/\/$parent_slug - can be your own created menu item, or one of the standard wp menu items slugs:\n  \/\/  Dashboard: 'index.php'\n  \/\/  Posts: 'edit.php'\n  \/\/  Media: 'upload.php'\n  \/\/  Pages: 'edit.php?post_type=page'\n  \/\/  Comments: 'edit-comments.php'\n  \/\/  Custom Post Types: 'edit.php?post_type=your_post_type'\n  \/\/  Appearance: 'themes.php'\n  \/\/  Plugins: 'plugins.php'\n  \/\/  Users: 'users.php'\n  \/\/  Tools: 'tools.php'\n  \/\/  Settings: 'options-general.php'\n  \/\/  Network Settings: 'settings.php'\n  \/*\n  add_submenu_page('options-general.php',       \/\/$parent_slug, the menu item within which to add this new sub menu item   (see above)\n                  'My Plugin Admin Page 1',     \/\/Page title\n                  'My Plugin Admin Page 1',     \/\/Menu item text\n                  'manage_options',             \/\/User capability level ('manage_options' = WP settings menu access),  see: https:\/\/wordpress.org\/support\/article\/roles-and-capabilities\/\n                  'my-plugin-admin-page-1',     \/\/Menu item slug (used as URL argument)\n                  '\\MyPluginNamespaceName\\my_plugin_admin_page_1_html',  \/\/Function name\n                  Null );                       \/\/$position - Position in the 'Menu Structure',\n  *\/\n  \n  \/\/&lt;&lt;&lt;&lt;&lt;ADD OTHER MENU ITEMS HERE\n}\n\n\n\/\/*********************************************************************************\n\/\/*********************************************************************************\n\/\/********** ADD OUR PLUGIN CSS AND JS FILES TO INCLUDE IN WP ADMIN MENU **********\n\/\/*********************************************************************************\n\/\/*********************************************************************************\n\/*\nadd_action( 'admin_enqueue_scripts', '\\MyPluginNamespaceName\\register_my_plugin_admin_scripts' );\nfunction register_my_plugin_admin_scripts()\n{\n  wp_register_style( 'my-plugin', plugins_url( 'ddd\/css\/plugin.css' ) );\n  wp_register_script( 'my-plugin', plugins_url( 'ddd\/js\/plugin.js' ) );\n\n}\n\nadd_action( 'admin_enqueue_scripts', '\\MyPluginNamespaceName\\load_my_plugin_admin_scripts' );\nfunction load_my_plugin_admin_scripts($hook)\n{\n  \/\/Load only on ?page=sample-page\n  if( $hook != 'toplevel_page_sample-page' )\n    return;\n\n  \/\/Load style &amp; scripts.\n  wp_enqueue_style('my-plugin');\n  wp_enqueue_script('my-plugin');\n}\n*\/\n\n\/\/**********************************************\n\/\/**********************************************\n\/\/********** ADMIN PAGE - **********\n\/\/**********************************************\n\/\/**********************************************\nfunction my_plugin_admin_page_1_html ()\n{\n  \/*\n  if (!current_user_can('administrator'))\n    die();\n  *\/\n\n  \/\/-----------------------\n  \/\/----- HTML OUTPUT -----\n  \/\/-----------------------\n  $HtmlOutput = '';\n  \n  \n  $HtmlOutput .= &lt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s your html) Example code<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[292],"tags":[],"class_list":["post-3446","post","type-post","status-publish","format-standard","hentry","category-creating-admin-ui-elements"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3446","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=3446"}],"version-history":[{"count":11,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3446\/revisions"}],"predecessor-version":[{"id":3508,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3446\/revisions\/3508"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=3446"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=3446"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=3446"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}