How to Create a Fullscreen Admin Panel Settings Area for Your WordPress Plugin

Creating a fullscreen admin panel area for your plugin is relatively simple, but creating one has some drawbacks and caveats. In this tutorial, I’ll demonstrate how to make a fullscreen admin for your WordPress plugin.

Creating an admin page using a hidden settings screen

Let’s build our demo plugin to demonstrate a fullscreen admin panel. I’ll start with the plugin headers and namespace.

<?php
/**
 * Plugin Name:       Fullscreen Admin Panel.
 * Plugin URI:        https://dlxplugins.com
 * Description:       A demo plugin to create a fullscreen admin panel.
 * Version:           1.0.0
 * Requires at least: 6.0
 * Requires PHP:      7.3
 * Author:            DLX Plugins
 * Author URI:        https://dlxplugins.com
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 *
 * @package DLXPlugins\FullscreenAdmin
 */

namespace DLXPlugins\FullscreenAdmin;Code language: PHP (php)

Next is adding the admin_menu action to initialize our admin menu.

/**
 * Initialize the admin panel.
 */
add_action( 'admin_menu', __NAMESPACE__ . '\add_admin_menu' );

/**
 * Add the admin menu.
 */
function add_admin_menu() {
	add_dashboard_page(
		'',
		'',
		'manage_options',
		'my-admin-panel-slug',
		'',
		null
	);
}Code language: PHP (php)

The admin_menu action is a callback function of add_admin_menu. The add_admin_menu function uses add_dashboard_page to create an empty admin panel placeholder that you can access programmatically. If you’re not familiar with add_dashboard_page, please read my tutorial on adding admin panels in WordPress.

Here are the arguments for add_dashboard_page for reference:

1. Page Title: This will be the title of the admin panel settings.
2. Menu Title: This will be the menu item title.
3. Capability: Determine what level of permissions are needed to access the menu.
4. Menu Slug: A unique slug that should identify your admin menu item.
5. A Callback: A callable callback is needed to output the menu in the admin.
6. A Position: Determine where and in what order your admin panel menu should appear. Setting a position of 99 would place the menu item toward the bottom.

Here’s the function definition:

/**
 * Adds a submenu page to the Dashboard main menu.
 *
 * @param string   $page_title The text to be displayed in the title tags of the page when the menu is selected.
 * @param string   $menu_title The text to be used for the menu.
 * @param string   $capability The capability required for this menu to be displayed to the user.
 * @param string   $menu_slug  The slug name to refer to this menu by (should be unique for this menu).
 * @param callable $callback   Optional. The function to be called to output the content for this page.
 * @param int      $position   Optional. The position in the menu order this item should appear.
 * @return string|false The resulting page's hook_suffix, or false if the user does not have the capability required.
 */
function add_dashboard_page( $page_title, $menu_title, $capability, $menu_slug, $callback = '', $position = null ) {
	return add_submenu_page( 'index.php', $page_title, $menu_title, $capability, $menu_slug, $callback, $position );
}Code language: PHP (php)

Please note that the page title, menu title, and callback are all blank. This is so the admin page doesn’t appear in the admin panel area or menus.

Creating the admin panel output

Once you’ve created the admin panel menu, you need some type of output. We’ll add the current_screen action to run our admin panel output code.

// Add the admin page for full-screen.
add_action( 'current_screen', __NAMESPACE__ . '\maybe_output_admin_page', 10 );

/**
 * Output the dashboard admin page.
 */
function maybe_output_admin_page() {
	// Exit if not in admin.
	if ( ! is_admin() ) {
		return;
	}

	// Make sure we're on the right screen.
	$screen = get_current_screen();
	if ( 'my-admin-panel-slug' !== $screen->id ) {
		return;
	}

	// Get header HTML.
	// Get body.
	// Get footer.
	exit;
}Code language: PHP (php)

Since current_screen can be accessible anywhere, we have to do an admin check to ensure we’re in the admin panel.

// Exit if not in admin.
if ( ! is_admin() ) {
	return;
}Code language: PHP (php)

Next, we make sure the current screen ID matches our slug. We’ll be using get_current_screen to get the current admin screen.

// Make sure we're on the right screen.
$screen = get_current_screen();
if ( 'my-admin-panel-slug' !== $screen->id ) {
	return;
}Code language: PHP (php)

Lastly is the output. This is a totally blank admin panel until it’s coded out. There’s an exit at the end, as we want to stop any further execution of code in our admin panel.

// Get header HTML.
// Get body.
// Get footer.
exit;Code language: PHP (php)

Getting to your admin panel screen

The admin panel structure is as follows:

https://domain.local/wp-admin/admin.php?page=my-admin-panel-slugCode language: AsciiDoc (asciidoc)

The base path is /wp-admin/admin.php. You could get this URL in PHP like this:

$admin_panel_url = admin_url( 'admin.php?page=my-admin-panel-slug' );Code language: PHP (php)

Adding the header elements

For the admin panel output, we’ll need to register any scripts and styles and then print them to the screen manually.

Here’s some sample HTML code you can include in the footer:

/**
 * Output landing page header.
 *
 * Credit: SliceWP Setup Wizard.
 */
function get_admin_page_header() {
	// Output header HTML.
	?>
	<!DOCTYPE html>
	<html <?php language_attributes(); ?>>
	<head>
		<meta name="viewport" content="width=device-width" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Admin Page Title</title>
		<?php
			wp_register_script(
				'my-plugin-admin-js',
				plugins_url( 'assets/js/admin.js', __FILE__ ),
				array(),
				'1.0.0',
				true
			);
			wp_register_style(
				'my-plugin-admin-css',
				plugins_url( 'assets/css/admin.css', __FILE__ ),
				array(),
				'1.0.0'
			);
			wp_print_styles( 'my-plugin-admin-css' );
			wp_print_scripts( 'my-plugin-admin-js' );
			?>
	</head>
	<body>
	<?php
}Code language: PHP (php)

Adding the body elements

Since we’ve already added the <body> tag in the header, we just have to fill the innards

Adding the footer elements

For the footer, we’re just closing tags.

/**
 * Output landing page footer.
 *
 * Credit: SliceWP Setup Wizard.
 */
function get_admin_page_footer() {
	// Output footer HTML.
	?>
	</body>
	</html>
	<?php
}Code language: PHP (php)

Putting it all together

We’ll be modifying function maybe_output_admin_page to include the header, body, and footer.

/**
 * Output the dashboard admin page.
 */
function maybe_output_admin_page() {
	// Exit if not in admin.
	if ( ! is_admin() ) {
		return;
	}

	// Make sure we're on the right screen.
	$screen = get_current_screen();
	if ( 'my-admin-panel-slug' !== $screen->id ) {
		return;
	}
	get_admin_page_header();
	/**
	 * Begin body content.
	 */
	?>
	<main>
		Hello there.
	</main>
	<?php
	get_admin_page_footer();
	exit;
}Code language: PHP (php)

The completed code

Here is the completed code:

<?php
/**
 * Plugin Name:       Fullscreen Admin Panel.
 * Plugin URI:        https://dlxplugins.com
 * Description:       A demo plugin to create a fullscreen admin panel.
 * Version:           1.0.0
 * Requires at least: 6.0
 * Requires PHP:      7.3
 * Author:            DLX Plugins
 * Author URI:        https://dlxplugins.com
 * License:           GPL v2 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 *
 * @package DLXPlugins\FullscreenAdmin
 */

namespace DLXPlugins\FullscreenAdmin;

/**
 * Initialize the admin panel.
 */
add_action( 'admin_menu', __NAMESPACE__ . '\add_admin_menu' );

/**
 * Add the admin menu.
 */
function add_admin_menu() {
	add_dashboard_page(
		'',
		'',
		'manage_options',
		'my-admin-panel-slug',
		'',
		null
	);
}

// Add the admin page for full-screen.
add_action( 'current_screen', __NAMESPACE__ . '\maybe_output_admin_page', 10 );

/**
 * Output the dashboard admin page.
 */
function maybe_output_admin_page() {
	// Exit if not in admin.
	if ( ! is_admin() ) {
		return;
	}

	// Make sure we're on the right screen.
	$screen = get_current_screen();
	if ( 'my-admin-panel-slug' !== $screen->id ) {
		return;
	}
	get_admin_page_header();
	/**
	 * Begin body content.
	 */
	?>
	<main>
		Hello there.
	</main>
	<?php
	get_admin_page_footer();
	exit;
}

/**
 * Output landing page header.
 *
 * Credit: SliceWP Setup Wizard.
 */
function get_admin_page_header() {
	// Output header HTML.
	?>
	<!DOCTYPE html>
	<html <?php language_attributes(); ?>>
	<head>
		<meta name="viewport" content="width=device-width" />
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>My Admin Page Title</title>
		<?php
			wp_register_script(
				'my-plugin-admin-js',
				plugins_url( 'assets/js/admin.js', __FILE__ ),
				array(),
				'1.0.0',
				true
			);
			wp_register_style(
				'my-plugin-admin-css',
				plugins_url( 'assets/css/admin.css', __FILE__ ),
				array(),
				'1.0.0'
			);
			wp_print_styles( 'my-plugin-admin-css' );
			wp_print_scripts( 'my-plugin-admin-js' );
			?>
	</head>
	<body>
	<?php
}

/**
 * Output landing page footer.
 *
 * Credit: SliceWP Setup Wizard.
 */
function get_admin_page_footer() {
	// Output footer HTML.
	?>
	</body>
	</html>
	<?php
}Code language: PHP (php)

Conclusion

In this tutorial, I demonstrated how to make a full-screen admin panel for your plugin. The full code is available on GitHub.