A Quick and Easy Guide To Creating WordPress Admin Pages

https://wpmudev.com/blog/creating-wordpress-admin-pages/

Creating a Top-Level Admin Page

The first step is to create a menu entry with the add_menu_page() function. Here’s a full example, explanation ensues:

add_action( ‘admin_menu’, ‘my_admin_menu’ );
function my_admin_menu() {
add_menu_page( ‘My Top Level Menu Example’, ‘Top Level Menu’, ‘manage_options’, ‘myplugin/myplugin-admin-page.php’, ‘myplguin_admin_page’, ‘dashicons-tickets’, 6 );
}

view rawtop level hosted with ❤ by GitHub

The function takes seven arguments. The first one is the page title, which defines the title tag; it is shown in the tab title, not on screen.

The second argument is the title that shows up in the menu.

Argument three is the capability required to access the menu. This can be used to restrict it to only admins, editors or authors.

Argument four is the menu slug, which is essentially used as the URL of the page.

Argument five is the function, which will handle the content of the page.

The next argument is the icon url. This can accept a number of formats. If a URL to an image is given the image will be used. You can also use Dashicons, which are built into WordPress, or even SVG.

The last argument defines where the menu will be placed. Argument five indicated the posts so I’ve used six to put this menu entry just underneath. Take a look at the Codex to see exactly what number to use for your desired position.

The next step is to create some content. All you need to do is create the function defined in argument five and echo some content. Here’s a very simple example you can start with:

function myplguin_admin_page(){
?>
<div class=”wrap”>
<h2>Welcome To My Plugin</h2>
</div>
<?php
}

view rawsimple page hosted with ❤ by GitHub

Creating a Sub-Level Admin Page

There are quite a few functions you can use to add sub-level pages. The general add_submenu_page() will let you put sub-level entries anywhere, but all built-in top level pages have their own functions:

  • To add a menu item under posts use add_posts_page
  • To add a menu item under pages use add_pages_page
  • To add a menu item under media use add_media_page
  • To add a menu item under links use add_links_page
  • To add a menu item under comments use add_comments_page
  • To add a menu item under appearance use add_theme_page
  • To add a menu item under plugins use add_plugin_page
  • To add a menu item under users use add_users_page
  • To add a menu item under tools use add_management_page
  • To add a menu item under settings use add_options_page

Each of these functions follow the same format: add_comments_page( $page_title, $menu_title, $capability, $menu_slug, $function);. The arguments should be familiar from our top-level example above.

You may want to add a sub-level menu to your own top level, in which case these specific function won’t be of much use to you. You’ll need to use add_submenu_page(). Let’s use this function to add an entry under our top level one created above:

add_action( ‘admin_menu’, ‘my_admin_menu’ );
function my_admin_menu() {
add_menu_page( ‘My Top Level Menu Example’, ‘Top Level Menu’, ‘manage_options’, ‘myplugin/myplugin-admin-page.php’, ‘myplguin_admin_page’, ‘dashicons-tickets’, 6 );
add_submenu_page( ‘myplugin/myplugin-admin-page.php’, ‘My Sub Level Menu Example’, ‘Sub Level Menu’, ‘manage_options’, ‘myplugin/myplugin-admin-sub-page.php’, ‘myplguin_admin_sub_page’ );
}

view rawsub level hosted with ❤ by GitHub

As you can see this function is almost identical to the specific functions above, except for the first argument which specifies the slug of the parent element. In our case, this is myplugin/myplugin-admin-page.php.

Leave a Comment