Free Up WordPress Real Estate: Creating Your Own Tabbed Admin Interface

When creating admin pages for plugins or themes we frequently need to cram a lot of information into a small space.

UI elements such as accordions, tabs, wizards and other methods allow us to ease up on the information overload and give users some much-needed breathing space.

In today’s article, I’m going to show you two methods for adding tabs to your admin pages: a JavaScript solution and a non-JavaScript fallback. I thought it would be nice to build on our plugin welcome screen example. If you don’t know how to create one, take a look now – it’s super easy!

The Welcome Page

Here’s a quick recap from the previous article: We created a plugin and added some code to the main plugin file, which registered our welcome page with WordPress.

Here’s the full code we used:

Welcome screen
An example of a plugin welcome screen we posted about recently.

Once activated the user is redirected to the welcome page, which looks very stark at the moment, something like the image on the right.

With a little HTML, you can style the welcome screen anyway you like and include images, GIFs and even video demonstrating how your plugin works.

Static Tabs

Static tabs are easy. All you need to do is register your pages in the same way as before and create HTML navigation to them. Let’s register the page first:

The code above should be placed within the existing welcome_screen_pages() function. The last parameter is the name of the function which handles the output, let’s create that now and add some dummy content:

At this stage you can actually visit the new page by going to http://yourwebsite.com/wp-admin/index.php?page=welcome-screen-credits

We shouldn’t forget to remove the page from view in the dashboard menu, it really isn’t needed. This can be done by removing the submenu page in the admin_head hook, just like we did with our original page.

Here’s the content of the whole function and the hook:

The next step is to create a navigation element in each page. Let’s start with our original welcome screen, the content of which is handled by welcome_screen_content().

We won’t need to worry much about the formatting, WordPress has us covered. Wrap your links in the nav-tab-wrapper element and give the links the nav-tab class and nav-tab-active class for the active ones and that’s it.

The content of the credits page is very similar. The only thing I changed is the active class assignment. It is now assigned to the second link, not the first:

Credit screen tabs
Tabs are a great way to squeeze more content into a restricted space.

Once this is done, you should be able to click between the tabs with the correct one being highlighted on each page.

You can then fill each tabbed area with your own text and any other elements, such as images and video.

Javascript Powered Tabs

If using Javascript we’ll want to show users the content of each page in-place, switching between them on-click. We could register these pages separately and abstract out the content into a different set of functions but I think it’s easiest if we register a single page and add all our content to it.

To get this done here’s what I did: I removed the second call to add_dashboard_page() in the welcome_screen_pages() function and I removed the second remove_submenu_page() function from welcome_screen_remove_menus(). I also removed the welcome_screen_credits_content() altogether, removing all traces of our second page.

Creating The HTML

Now, let’s put all our content onto the same page within welcome_screen_content(). I’ll create <section> elements which will hold the contents of each separate page:

Styling Our Page

At the moment all sections are shown and everything is a bit tightly packed. Let’s enqueue a stylesheet and solve this problem with some CSS. I’ll also take care to style the page in a way that looks good even if the pages are all shown one underneath the other – if the user has JS disabled.

JS and No JS welcome screen
JavaScript and non-JavaScript welcome screens.

The image above shows how our page looks with Javascript enabled (left side) and with Javascript disabled (right side). A vast majority of browsers have JS turned on and recently browsers don’t allow you to switch it off (as easily as before). That said, supporting viewers without Javascript takes so little effort, why not? First of all, let’s enqueue that CSS file:

Note how I used the $hook variable to only load our CSS file on the welcome screen. This is recommended for speed and the sanity of other programmers. Next up, the CSS that makes it look all nice and shiny:

WordPress adds the js and no-js class to the body which allows us to make style modifications easily, based on the technology available.

Adding Javascript

Finally, we add a bit of Javascript to the mix to make everything work on-click. First we need to register our script, just like we did with the style. Add the following to the existing welcome_screen_assets() function’s content, within the if statement.

Now to make the magic happen – writing the Javascript which handles the page change. We’ll detect clicks on the tabs and show the correct section. If you’re new to Javascript you may be surprised to see how little Javascript there is here. Here’s the full code, explanation ensues.

We detect clicks on .nav-tab-wrapper a elements. When a link is clicked we hide all our sections. We then show the selected section which is easy, it should be the section with the same index as the menu item we clicked. Finally, we return false to make sure the link isn’t loaded in the browser.

Conclusion

As you can see, adding some Javascript into the mix isn’t that hard. With only 4-5 lines of Javascript we managed to add a pretty solid feature. If you’d like to test this out without writing code, download the example plugin, you can activate it in WordPress and see how things work.

You can of course use larger packages like jQuery UI or even Foundation and Bootstrap to handle your tabs although this is overkill in our case. If you are adding a large number of features with Javascript everywhere take a look at the default scripts registered in WordPress, perhaps WordPress provides everything you need.

Have you set up tabbed pages for your plugin? Let us know in the comments below.