How To Create WordPress Custom Admin Page Without Plugin: A Quick and Easy Guide

[WordPress](https://honarsystems.com/category/wordpress/) is one of the most popular CMSs for developers, which has many customization and flexibility features, including the expansion of the WordPress admin area. **WordPress Custom Admin Page** is an option to create a custom admin page for your own plugin or your theme.

Visit our [**WordPress Plugin Development**](https://honarsystems.com/wordpress-plugin-development/) **Tutorial**

Sometimes your plugin needs a menu in the admin panel for itself to display some reports or settings page. To do this we use Admin Pages. Creating an admin menu and admin page is not hard. Follow this tutorial to learn how to create a custom admin page and menu in WordPress CMS.

In this short tutorial, we’ll take a look at the full guide on how to add a custom admin page and its menu to the Dashboard of WordPress from scratch without any plugin. In this tutorial to better understand and implement Custom Admin Page, you should have prepared the following items.

* Local development environment or WordPress website
* Installed WordPress and ready to be used for installing a plugin

And be familiar with the following items

* Familiar with WordPress plugin development
* [PHP](https://honarsystems.com/category/php/) development
* [HTML](https://honarsystems.com/category/html/)
* [CSS](https://honarsystems.com/category/css/)
* [Interact WordPress database](https://honarsystems.com/wordpress-development-database/)
* [Data Sanitization and Validation in WordPress](https://honarsystems.com/wordpress-development-sanitization/)

If you are not familiar with the above items, do not worry, we will explain them all as simply as possible.

## What are WordPress Custom Admin Pages?

After logging in to the admin panel you can see the menu on the left side and RTL websites on the right side. This menu contains some basic menus like Appearance, Plugins, Settings, Users, etc.

After activating a theme or plugin, the number of menus may increase, the new menu may include the plugin settings page, theme control panel, or any other page. Custom Admin Page is a feature that allows WordPress developers to expand the WordPress admin area to suit their needs.

There are two types of menu entries: Top-level and sub-level. If users need to interact with your plugin daily you can use a top-level entry. If your admin page is just for settings, a sub-level entry in the “Settings” top-level menu is more appropriate.

### 1- The Parts of an Admin Pages

* A menu entry – top-level or sub-level
* The page content
* Processing logic for forms – if needed

### 2- Top-Level and Sub-Level Menus

Top-level Admin Pages menus are menus you can see in the sidebar of the admin panel like “Media”, “Comments” etc. Sub-level menus can find them in the Top-level menus inside, like “Settings -> Reading”. “Reading” is a sub-level menu of the “Settings” while “Settings” is a top-level menu.

## How to Add WordPress custom Admin Pages and Menus

The first step is creating an admin page. We can do that via add\_menu\_page
or add\_submenu\_page
. We also can use shortcuts of them like add\_dashboard\_page
or add\_options\_page
.

As we told, to add a custom admin page in WordPress, we need two things:

* An admin menu (**add\_menu\_page** function)
* Page Content

### 1- How to create a Top Level Admin Page and Menu

The first step is to create a menu entry. To add the admin menu we use the add\_menu\_page function that we introduce to WordPress, the menu, and then the call back function to manage the admin page content.

Following code describe menu to WordPress.

add_menu_page(
string $page_title,
string $menu_title,
string $capability,
string $menu_slug,
callable $function = ”,
string $icon_url = ”,
int $position = null
)

The function takes seven arguments.

* **page\_title (Required)** The text is to be displayed in the title tags of the page when the menu is selected.
* menu\_title (Required) is the title that shows up in the menu.
* capability (Required) The capability required for this menu to be displayed to the user. For example, if it contains some general options for the site, manage\_option could be the best choice. This can be used to restrict it to only admins, editors or authors. Just set it carefully to avoid any possible security issues.
* **menu\_slug (Required)** The slug name that refers to this menu. It should be unique for this menu page. This will be used as a parameter in the URL of your custom admin page.
* **function (Optional)** The function to be called to show the output content for this page.
* **icon\_url (Optional)** The URL of the icon to be used for this menu. You can use an image, encoded SVG, or dash icons.
* In order to use an image, simply pass the URL of the image.
* Using existing [WordPress icons](https://developer.wordpress.org/resource/dashicons/).
* You can use **none** value to leave **div.wp-menu-image**
empty, so an icon can be added via CSS.
* You can use the SVG file. Convert SVG file to base64 and add with **data:image/svg+xml;base64code**.
* **position (Optional)** The position in the menu order should appear. Here is the list of numbers of default admin menus:
* 2 – Dashboard
* 4 – Separator
* 5 – Posts
* 10 – Media
* 15 – Links
* 20 – Pages
* 25 – Comments
* 59 – Separator
* 60 – Appearance
* 65 – Plugins
* 70 – Users
* 75 – Tools
* 80 – Settings
* 99 – Separator

Open the **functions.php** file of your theme or add it to your plugin. To do this we create a function **hs\_admin\_menu** to define the menu.

function hs_admin_menu() {
add_menu_page(
__( ‘Page Title’, ‘my-textdomain’ ),
__( ‘Menu Title’, ‘my-textdomain’ ),
‘manage_options’,
‘sample-page’,
‘my_admin_page_contents’,
‘dashicons-schedule’,
3
);
}
add_action( ‘admin_menu’, ‘hs_admin_menu’ );

The next step is to create some content. All you need to do is create the function defined in argument five and display some content. To add the function to WordPress, we use an action named **admin\_menu**.

function hs_admin_page_contents() {
?>
<h1>
<?php esc_html_e(
‘Welcome to my custom admin page.’,
‘my-plugin-textdomain’
); ?>
</h1>
<?php
}

As you see, the page title, menu title, menu icon, and end of the URL are items that are introduced.

### 2- How to Add Sub Menu and Sub Level Page

We added a top-level menu to the admin panel. We may want to add a sub-level menu to our own top level. Now we are going to add a submenu to that menu.

The submenu structure will be like the following.

add_submenu_page(
string $parent_slug,
string $page_title,
string $menu_title,
string $capability,
string $menu_slug,
callable $function = ”
);

Put the following sub-menu code inside the **hs\_admin\_menu** function next to **add\_admin\_menu**.

add_submenu_page( ‘sample-page’,
__( ‘Page Title – Honar Systems’, ‘my-textdomain’ ),
__( ‘Sub Menu Title’, ‘my-textdomain’ ),
‘manage_options’,
‘sample-page-sub-menu’,
‘my_sub_menu_admin_page_contents’);

And again, like the menu page, add the function below to display sub-menu page content.

function hs_sub_menu_admin_page_contents(){
?>
<h1>
<?php esc_html_e( ‘Welcome to my custom sub menu admin page.’, ‘my-plugin-textdomain’ ); ?>
</h1>
<?php
}

If you are developing a custom plugin you can use your plugin address as a parent “slug” like the below code.

add_submenu_page(
‘myplugin/myplugin-admin-page.php’,
__(‘Page Title – Honar Systems’, ‘my-textdomain’),
__(‘Sub Menu Title’, ‘my-textdomain’),
‘manage_options’,
‘myplugin/myplugin-admin-sub-page.php’,
‘my_sub_menu_admin_page_contents’
);

You should know that it is possible to add a submenu to existing menus. WordPress basic top-level menus have their own functions to add sub-level menus.

* **add\_posts\_page** Adds a submenu under the Posts menu
* add\_pages\_page Adds a submenu under the Pages menu
* add\_media\_page Adds a submenu under the Media menu
* add\_comments\_page Adds a submenu under Comments menu
* add\_theme\_page Adds a submenu under the Appearance menu
* add\_plugin\_page Adds a submenu under the Plugins menu
* add\_users\_page Adds a submenu under the Users menu
* **add\_management\_page** Adds a submenu under Tools menu
* **add\_options\_page** Adds a submenu under Settings menu

For example, adding a submenu to the Comments top-level menu.

add_comments_page(
$page_title,
$menu_title,
$capability,
$menu_slug,
$function);

If you don’t need the top-level menu, we recommend you add it to the sub-menu. Too many plugins add top-level entries, which end up polluting the admin heavily.

More: [https://honarsystems.com/wordpress-custom-admin-page/](https://honarsystems.com/wordpress-custom-admin-page/)

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer