How to Make Custom WordPress Admin Pages

  • Originally published on April 12, 2019
  • Hector Farahani is a writer who lives in Iran.
  • Currently being worked on
  • 3 responses

Extending the admin side of WordPress is one of many possible customizations and flexibilities that can be mentioned. We’ll show you how to use WordPress custom admin pages to give users more options in this post. WordPress, the most popular CMS on the planet, is also very popular among developers.

What are Custom Admin Pages in WordPress?

After logging in, the first page you’ll see is the WordPress admin dashboard. You can navigate to other admin pages using the side menu, such as Appearance, Plugins, Settings, Users, and so on.

It could be a plugin’s settings page, your theme’s control panel, a page that displays your site’s status, or even a document page. The custom admin page is a very useful feature that allows the developer to add new options to the admin rights. After activating a theme or plugin that redirects you to a new admin page, you may notice new menu items.

How to Add Custom Admin Pages to WordPress

We’ll need two things to add a custom admin page to WordPress:

  1. An admin menu (function add_menu_page)
  2. Content of the page (custom function)

We can use the following function to add a new admin menu item:

Let’s take a closer look at each item to see what they are.

Select a catchy page title. _(‘My Plugin Options’,’my-plugin-textdomain’) $page_title is the first variable. It is important to note that it should be able to be translated. As an example, use the _ function as follows: When the menu is selected, this text will be displayed in the page’s title tags. For instance, if your custom admin page is a plugin options page, it could be called “My plugin options.”

$menu_title is the second parameter. The text that will appear on the menu.

This capability is required for the user to see this menu. Just make sure it’s set correctly to avoid any security issues. $capability $capability For example, if it contains some site-wide options, manage_option might be the best option.

Look at the WordPress Roles and Capabilities page to see what capability your custom admin page requires.

$menu_slug $menu_slug $menu_slug $menu As shown in the image, this will be used as a parameter in the URL of your custom admin page. The name of the slug that refers to this menu. To be compatible with sanitize_key(), it should be unique for this menu page and contain only lowercase alphanumeric, dashes, and underscores.

$function #5 The function that will be used to display the page’s output content. To show a header in the admin page, we can use the following code as an example:

$icon_url $icon_url $icon_url $icon_ An image, encoded SVG, or dash icons can all be used. This is the URL of the icon that will be used in this menu.

  • To use an image, simply pass the image’s URL.
  • You can pass an encoded SVG file if you want an icon like the WordPress defaults, which has a different color on hover. Simply copy and paste the link that begins with data:image/svg+xml;base64 after you’ve uploaded your SVG. Your SVG file can be converted to base64 encoded data using http://b64.io/.
  • Find a suitable icon on the WordPress Dashicons page and pass the class name as the icon URL argument, such as dashicons-schedule. Existing WordPress icons can be used.
  • You can also use the none value to leave div.wp-menu-image empty, allowing you to add an icon via CSS.

The order of the menu items should be displayed. The following is a list of the number of default admin menus: $position #7

  • 2 – The Control Panel
  • Separator No. 4
  • 5 – Articles
  • ten – the media
  • 15 – Connections
  • Pages – 20
  • 25 – Your thoughts
  • Separator (number 59)
  • Appearance (number 60)
  • Plugins (ninety-five)
  • Users – 70
  • 75 – Instruments
  • 80 – Arrangements
  • Separator (99)

So, if you want your menu to appear after the Dashboard, use 3.

A piece of brief information about each item can be found in the table below.

Arguments for add_menu_page


When you put it all together, you’ll have:

You should be aware that the following functions can be used to add a submenu to an existing or newly added menu:

  • Under the Posts menu, a submenu is added. add_posts_page is a page that allows you to add new posts to your
  • Under the Pages menu, a submenu is added. add_pages_page is a page that allows you to add pages to your website
  • media_page_addition Under the Media menu, a submenu is added.
  • add_comments_page is a page that allows you to add comments to a Under the Comments menu, a submenu is added.
  • Under the Appearance menu, a submenu is added. add_theme_page is a function that adds a page to a
  • Under the Plugins menu, a submenu is added. add_plugin_page is a function that adds a page to a plugin
  • Under the Users menu, a submenu is added. add_users_page is a page that allows you to add new users to your
  • management_page_addition Under the Tools menu, a submenu is added.
  • add_options_page is a page that allows you to add new options to your Under the Settings menu, a submenu is added.

Because they’re all wrappers for the add_submenu_page function, we’ll use them all in the same way:

That’s all there is to it. A custom admin page has been created for us. But what about customizing the content with custom styles and scripts?

Adding Styles and Scripts to Custom Admin Pages in WordPress

Let’s look at how we can apply styles after we’ve added content to the page:

Only the admin-styles.css file will be loaded in the mypluginname page with the above code. You don’t want to change the font size in the dashboard, for example. If you’re wondering why we’re doing this, it’s because loading styles across all admin pages can cause unintended changes on other admin pages.

Then replace it with the code below. If you’re not sure what your $hook name is, use this to figure it out.

Note: If you’re editing a file in the plugin editor, don’t use wp_die. Unless you remove it, you may lose access to the admin page.

You can also use WordPress’s default registered styles, such as this:

You can introduce a style file to WordPress without having to load it by registering it. We don’t specify a URL for the style file in the above code because it has already been registered and WordPress is aware of it. Then you can use a style handler name anywhere in the code to load it. Take a look at the code below:

WordPress comes with a number of JavaScript libraries that you can use. A list of default scripts included and registered by WordPress can also be found here.

Putting It All Together in a Plugin

In this section, we’ve compiled all of the codes into a single file that you can use to add new WordPress custom admin pages as a plugin.

And the end result will be as follows:

We’ll show you how to add custom settings to WordPress Custom Admin Pages, as well as how to process and secure forms, in the next post.

become a member

For the best WordPress tips and insights, subscribe to Artbees Themes Blog.

We defined a custom admin page and explained how to add a new admin page to […] in the previous post about WordPress custom admin pages. […] […] […]

  • remark
  • Click here for more information.

How to Make Custom WordPress Admin Pages […] […] […] […]

  • remark
  • Click here for more information.

It worked perfectly! Hello there! I only have one question: how do I make this new tab appear in the API or in the list of locations in the ACF plugin? Congratulations on your article.

  • remark
  • Click here for more information.

Leave a Comment