In this post, learn the basics of the WordPress Admin UI and how to integrate your plugin or theme interface into it. At the end of the post, you will learn how to create WordPress like notices, tabs, meta boxes, admin tables and much more.

Set up our playground: Creating an Admin Page

In order for us to play around in the WordPress admin, we need to make our own space. So for the purpose of this tutorial we are going to create an admin page where we will be playing with the different WordPress Admin UI goodies. With that said, let’s create a quick plugin.

First create a folder called pp-admin-ui then within that folder a file called pp-admin-ui.php then add the following snippet to that file.

<?php
/*
Plugin Name: PP WordPress Admin UI Demo
Plugin URI: https://propatel.com
Description: A quick visual look of the UI behind the WordPress Admin
Author: ProPatel
Version: 1.0.0
Author URI: https://propatel.com
*/
 
//Playground
add_action('admin_menu', 'pp_setup_admin_menu');
 
function pp_setup_admin_menu() {
	add_menu_page('Admin UI', 'Admin UI', 'manage_options', 'admin-ui', 'pp_admin_page_setup');
}
 
function pp_admin_page_setup(){
	require_once( plugin_dir_path( __FILE__ ) .'template/admin.php');	
}

This little snippet simply creates a new option page for us and the function pp_admin_page_setup loads a file called admin.php where we will be entering all our UI work, so let’s create the file. Within the our plugin folder create a sub folder called template and create the file admin.php. Once complete, you folder structure should look the following.

Now we have a quick plugin, let’s activate it and we will now have a new menu item called Admin UI

Changing the menu icon

As you may have noticed our Menu link used a gear icon, the gear icon is the default icon shown when no paramater has been chosen. The first thing we are going to tackle is changing this icon to something more appropriate for our needs. We do this by modifying the 5th paramater of the admin_menu_page function. We have the following options

Image

add_menu_page('Admin UI', 'Admin UI', 'manage_options', 'admin-ui', 'pp_admin_page_setup',  plugin_dir_url( __FILE__ ).'/assets/menu-icon.png');

Dashicon

add_menu_page('Admin UI', 'Admin UI', 'manage_options', 'admin-ui', 'pp_admin_page_setup',  'dashicons-admin-appearance');

No icon

add_menu_page('Admin UI', 'Admin UI', 'manage_options', 'admin-ui', 'pp_admin_page_setup',  'none');

more Admin UI link for Admin Menu Page

More on Icons

In the previous section, you would have noticed that we changed our menu using a Dashicon which brings us to the next topic “Where to find dashicons”. Fortunately, it’s not hard to find or implement dashicons. They are are available under the WordPress developer resources

Dashicons are enqeued in the WordPress admin by default so you can make use of them immediately. You can use them in your interface in three ways.

CSS

content: "\f481";

html for Glyph

<span class="dashicons dashicons-clipboard"></span>

Screen Titles

In this section we are going to add a screen title for the page. The first thing to note is that the title is first wrapped in a div with the class of wrap and the placed in an h2 tag. We’ll first create it out with html alone, add the following to the admin.php file.

<div class="wrap">
	<h2>Admin UI</h2>
</div>

Using PHP we can get the screen title function the function.

<div class="wrap">
	<h2><?php echo get_admin_page_title(); ?></h2>
</div>

Add Tabs in WordPress Admin

A simple way to add tabs to the WordPress Admin UI is by simply adding the following to the admin.php directly after the screen title.

<h3 class="nav-tab-wrapper">
    	<a href="#" class="nav-tab">Tab 1</a>
        <a href="#" class="nav-tab">Tab 2</a>
        <a href="#" class="nav-tab">Tab 3</a>
</h3>

This tab works but what if we wanted to make the tab more dynamic and allow other plugins to add new tabs? Well, that’s simple. Let’s create a function that has an array of tabs and use WordPress apply_filters to make it extendable, we’ll add this to the pp-admin-ui.php file.

function pp_admin_tabs(){
	$tabs = array(
		'notices' 	=> 'Notices',
		'meta_boxes' 	=> 'Meta Boxes',
		'buttons'	=> 'Buttons',
		'tables'	=> 'Tables',
		'form_fields' 	=> 'Form Fields',
		'page_structure' => 'Page Structure'
	);
	return apply_filters('pp_admin_tabs', $tabs);	
}

Now inside admin.php, we will replace our static html with a dynamic script. Update the admin.php file with the following.

<?php 
$tabs = pp_admin_tabs();
$current = sanitize_text_field($_GET['tab']);
?>
<div class="wrap">
	<h2><?php echo get_admin_page_title(); ?></h2>
    <h3 class="nav-tab-wrapper">
    	<?php if(!empty($tabs)){
					foreach($tabs as $key => $value){
					$class = ( $key == $current ) ? ' nav-tab-active' : '';	
		?>
        	<a href="?page=admin-ui&tab=<?php echo $key; ?>" class="nav-tab<?php echo $class; ?>"><?php echo $value; ?></a>
		<?php
					}
			}
		?>
    </h3>
</div>

Notice that we linked each tab to the current page and then we added an additional parameter for the URL. We are not going to make use of that by making the content of our playground respond to the selected tab.

In admin.php, directly after the tabs add the following.

<div class="pp-admin-content">
    	<?php 
			switch($current){
				case 'notices':
				break;
				case 'meta_boxes':
				break;
				case 'buttons':
				break;
				case 'tables':
				break;
				case 'form_fields':
				break;	
				case 'page_structure':
				break;
			}
		?>
        <?php do_action('pp_admin_ui_extend', $current); ?>
</div>

For our little plugin, we are going to use a switch statement for displaying tab content. Additionally, by adding the hook pp_admin_ui_extend we will be able to add additional tab content from another plugin without touching our core plugin. So, now that we finally have our playground setup, let’s get started!.

Adding Admin Menu Counter WordPress

Now that we have created some dynamic tabs, let’s let everyone know how many tabs are available in the page by adding a counter on the menu item. In the file pp-admin-ui.php update the function pp_setup_admin_menu to the following.

function pp_setup_admin_menu() {
	$tabs_count = pp_admin_tabs();
	$tabs_count = count($tabs_count);
	$tabs_count_html = '<span class="update-plugins count-'.$tabs_count.'"><span class="theme-count">'.$tabs_count.'</span></span>';
	add_menu_page('Admin UI', 'Admin UI ' .$tabs_count_html, 'manage_options', 'admin-ui', 'pp_admin_page_setup',  'none');
}

The new snippet added makes a request to the tabs and we use count to get the total amount of tabs. Next we use the count in a span tags then appended it to our menu title.

Admin Notices

If you have ever saved any settings in the WordPress Admin, you will notice that in most cases there is some sort of notice message that is displayed. The message usually states whether the previous action was saved or failed while some notices for other purposes such as warnings. Let’s break this down and create our own notices.

So, notices are just simple html that changes based on the class, for example let’s update our switch statement with the following.

case 'notices':
?>
	Look below the screen title for the notice
	<div class="updated">
		<p><?php _e( 'Updated!', 'my-text-domain' ); ?></p>
	</div>
	<div class="error">
		<p><?php _e( 'Error!', 'my-text-domain' ); ?></p>
	</div>
<?php

Our end result will look like the image below.

Meta Boxes

Meta Boxes are all over the Admin UI, believe it or not but the very WordPress Dashboard Widgets are also Meta Boxes. These Meta Boxes can be seen on the dashboard, edit screens and now in our playground. Let’s break down the html behind it.

case 'meta_boxes':
?>
<div class="metabox-holder">	
	<div class="postbox">
		<h3 class="hndle"><span>Meta Box Tile</span></h3>
		<div class="inside">
			Content Inside Metabox
		</div>
	</div>
</div>
<?php
break;

The snippet above will create a Meta Box look a like for us but if we are going to add a Meta Box to post screen then we will use add_meta_box

Buttons

In this section we are going to take a look at how button styled links are created. Somethings to remember are to use the class button and to use button-primary to get the colored buttons.

case 'buttons':
?>
<a href="#" class="button button-large">Normal Button</a>
<a href="#" class="button button-large disabled">Normal Button Disabled</a>
<a href="#" class="button button-primary button-large">Primary Button</a>
<a href="#" class="button button-primary button-large disabled">Primary Button Disabled</a>
<p class="pressthis">
	<a href="#" class=""><span>Press This Button</span></a>
</p>
<?php
break;

Tables

WordPress has a class called WP List Table which is used to generate tables such as the Plugins, Post Type and Sites tables. However, for the purpose of this tutorial I am going to demonstrate how to create a table from scratch without the class. Add the following to the admin.php file.

case 'tables':
?>
<table class="wp-list-table widefat fixed posts">
	<thead>
		<tr>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
			<th><?php _e('Column Name', 'pp-admin-ui'); ?></th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
		</tr>
		<tr>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
			<td><?php _e('Column Data', 'pp-admin-ui'); ?></td>
		</tr>
	</tbody>
</table>

Form Fields

case 'form_fields':
?>
	<p>
	Regular Input Field<br>
	<input name="site_name" type="text" id="site_name" class="regular-text" value="My Blog">
	</p>
	<p>
	Input Field with large text<br>
	<input name="illegal_names" type="text" id="illegal_names" class="large-text" value="www web root admin main invite administrator files blog" size="45">
	</p>
	<p>
	Primary Button/Submit<br>
	<input type="submit" name="submit" id="submit" class="button button-primary" value="Update Profile">
	</p>
	<p>
	Default Button/Submit<br>
	<input type="submit" name="submit" id="submit" class="button" value="Update Profile">
	</p>
	<p>
	Long Input Field<br>
	<div id="titlediv">
		<input type="text" name="post_title" size="30" value="" id="title">
	</div>
	</p>
<?php
break;

Page Structure

case 'page_structure':
?>
	<table class="form-table">
		<tr>
			<th scope="row"><label for="input_name">Form Field goes here</label></th>
			<td><input name="input_name" type="text" id="input_name" value="Input" class="regular-text"></td>
		</tr>
	</table>
<?php

Extending our WordPress Admin UI Plugin

As mentioned before, our WordPress Admin UI plugin will be extendable. So, quickly I will demonstrate how we will be able to extend this.

add_filter('pp_admin_tabs', 'pp_admin_tabs_extend', 12, 1);
function pp_admin_tabs_extend($tabs){
	$tabs['custom_tab'] = 'Custom Tab';
	return $tabs;
}
 
add_action('pp_admin_ui_extend', 'pp_admin_ui_extend_html', 12, 1);
function pp_admin_ui_extend_html($tab){
	if($tab == 'custom_tab'){
		?>
        	Custom Tab Content
        <?php	
	}
}

Result:

We began this journey, trying to better understand the WordPress Admin UI and in the end, we have covered several topics. The topics we covered are Creating an Admin Menu Page, Extending Admin Menu Page, Customizing Admin Menu Icons and Using Dash icons. However, the fun does not end there, in the upcoming tutorials we are going to extend what we’ve learn here and implement them in full functioning applications.