Breaking down WordPress Admin UI

Home / Tutorials / Core / Breaking down WordPress Admin UI

Breaking down WordPress Admin UI

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 mpl-admin-ui then within that folder a file called mpl-admin-ui.php then add the following snippet to that file.

This little snippet simply creates a new option page for us and the function mpl_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

Dashicon

No icon

 

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

HTML

 GLYPH

Screen Titles

WordPress Admin UI - Screen Title

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

Using PHP we can get the screen title function the function

Admin Tabs

WordPress Admin UI - Static Admin Tabs

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

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 mpl-admin-ui.php file

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

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

WordPress Admin UI - Full Tabs

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

For our little plugin, we are going to use a switch statement for displaying tab content. Additionally, by adding the hook mpl_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!

http://www.smashingmagazine.com/2011/10/20/create-tabs-wordpress-settings-pages/

Back to the Menu: Adding a counter to the menu

WordPress Admin UI - Counter

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 mpl-admin-ui.php update the function mpl_setup_admin_menu to the following

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

Our end result will look like the image below

WordPress Admin UI - WordPress Admin Notices

WordPress Admin Notices

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

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

WordPress Admin UI - Buttons

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

WordPress Admin UI - Tables

Form Fields

WordPress Admin UI - Form Fields

Page Structure

 

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.

Result

WordPress Admin UI - Custom Tab

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 Dashicons. 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.

Recent Posts
Contact Us

We're not around right now. But you can send us an email and we'll get back to you, asap.

Not readable? Change text. captcha txt

Start typing and press Enter to search