WordPress plugin/theme settings screen – turn sections into tabs

We use WordPress settings API to add fields into our plugin’s(or theme’s) setting screen. We add ‘sections’ and ‘fields’. If you add too many of them, the page becomes too long. This is a utility to turn those long settings screen into nicely segregated tabs.

To demonstrate visually – it turns the following:

into

---

How it works

It uses the section titles as tabs and all contents of that section as tab contents.

It also uses cookies to ensure when you submit/reload the page or come back to it after some time, it will automatically highlight the tab you were on last time. That’s pretty neat I think!

How to use

This utility is in the form of a plugin. It is just a single php file.

1. Download the file from this gist.
2. You can either use it as a must-use plugin or a normal plugin.
3. In your code find the line that prints output of settings sections. Something like :

do_settings_sections( ... );

Right below it, add the following code:

if ( function_exists( '\rb_tabify_me' ) ) {
  \rb_tabify_me( 'Your unique plugin name' );
}

It can also print the nav links in a different style. So if you pass a second parameter:

if ( function_exists( '\rb_tabify_me' ) ) {
  \rb_tabify_me( 'Your unique plugin name', 'subnav' );
}

you get the following:

---

That’s all. Qapla’