Create In-page Tabs

Creating Tabs in a Page

Create In-Page Tabs

If your theme or plugin only uses a single setting page but needs to separate certain contents into different areas, tabs are useful. This tutorial introduces a way to add tabs within a single page.

Steps

  1. Include the library
  2. Extend the library class
  3. Define the setUp() method
  4. In the setUp method, define a sub-page and in-page tabs. 
  5. Instantiate the extended class

Screenshot

Creating in-page tabs with Admin Page Framework

Include the library

The library file needs to be loaded.

Extend the library class

This time, let’s use APF_Tabs for the class name.

Define the setUp() method

In the setUp() method, we create a root page and  a sub page. For that we need to decide:

  1. the root page.
  2. the sub page title.
  3. the sub page slug.

We’ve covered this already in the previous tutorial.

To add in-page tabs, we use the addInPageTabs() method. Pass the belonging page slug to the first parameter and in-page tab definition argument array to the next parameters. In-page tab definition argument arrays require at least two keys: tab_slug and title. For more details refer to the manual.

Disable Page Heading Tabs and Enlarge the In-Page Heading Tabs

The framework supports three kinds of tabs: page heading tabs, in-page tabs, and form section tabs. The page heading tabs are automatically created when a sub-menu item is created and they are linked to the sub-pages/links. In-page tabs reside within a single page. Section tabs are for form sections so don’t worry about section tabs for now. In this tutorial, we are dealing with in-page tabs.

Since we just create a single page, we don’t need the page heading tabs. To disable page heading tabs, the setPageHeadingTabsVisibility() method is used.

Next, by default, in-page tabs use the h3 HTML tag and they are a bit smaller than page heading tabs using h2 tag. To increase the size by setting a custom tag, the setInPageTabTag() method is used.

Instantiate the extended class

Finally, we instantiate the class. Unless it is instantiated, it will do nothing.

Code

Try the code below and post comments if you get a problem.

2 thoughts on “Create In-page Tabs”

  1. I have created a series of forms Using Admin Page Framwork. Each form is in a different Tab.
    I need to create some content (html) within each tab, before, and sometimes after the form entries.
    It is my understanding that a tab containing a form starts out:

    public function load_customize_my_mcc_tab_menu( $oAdminPage ) {
    $this->addSettingFields(
    array( .........

    Etc.

    And a tab containing content seems to start out:

    function content_my_tabs_my_tab_c( $sContent ) {
    return $sContent
    . 'Tab Content Filter'

    Etc.

    I have tried dozens of different way to add content to a oAdminPage function with zero luck.

    How does one accomplish this?

    1. Hi Derek,

      I’ve responded to your post on wordpress.org. Let’s continue on the issue there. Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *