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.
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:
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 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
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
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:
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.
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.
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
no-js class to the body which allows us to make style modifications easily, based on the technology available.
welcome_screen_assets() function’s content, within the if statement.
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.
Have you set up tabbed pages for your plugin? Let us know in the comments below.