Creating Tabs in a Page
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
- Include the library
- Extend the library class
- Define the setUp() method
- In the setUp method, define a sub-page and in-page tabs.
- Instantiate the extended class
Screenshot
Include the library
The library file needs to be loaded.
|
13 |
include( dirname( dirname( __FILE__ ) ) . '/admin-page-framework/library/apf/admin-page-framework.php' ); |
Extend the library class
This time, let’s use APF_Tabs for the class name.
|
1 2 3 |
class APF_Tabs extends AdminPageFramework { // our code goes here… } |
Define the setUp() method
In the setUp() method, we create a root page and a sub page. For that we need to decide:
- the root page.
- the sub page title.
- the sub page slug.
We’ve covered this already in the previous tutorial.
|
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
public function setUp() { // Create the root menu $this->setRootMenuPage( '4. Tabs', // specify the name of the page group 'http://lh4.googleusercontent.com/-z7ydw-aPWGc/UwpeB96m5eI/AAAAAAAABjs/Brz6edaUB58/s800/demo04_16x16.png' // menu icon ); // Add the sub menu item $this->addSubMenuItems( array( 'title' => 'My Tabs', // page title 'page_slug' => 'my_tabs', // page slug 'screen_icon' => 'https://lh3.googleusercontent.com/-Z5OeZOGzN3c/UilDgCX9WjI/AAAAAAAABS4/mf7L8GGJRTc/s800/demo04_01_32x32.png' // page screen icon for WP 3.7.x or below ) ); |
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.
|
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
$this->addInPageTabs( 'my_tabs', // set the target page slug so that the 'page_slug' key can be omitted from the next continuing in-page tab arrays. array( 'tab_slug' => 'my_tab_a', // avoid hyphen(dash), dots, and white spaces 'title' => __( 'Tab A', 'admin-page-framework-tutorial' ), ), array( 'tab_slug' => 'my_tab_b', 'title' => __( 'Tab B', 'admin-page-framework-tutorial' ), ), array( 'tab_slug' => 'my_tab_c', 'title' => __( 'Tab C', 'admin-page-framework-tutorial' ), ) ); |
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.
|
54 |
$this->setPageHeadingTabsVisibility( false ); // disables the page heading tabs by passing false. |
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.
|
55 |
$this->setInPageTabTag( 'h2' ); // sets the tag used for in-page tabs |
Instantiate the extended class
Finally, we instantiate the class. Unless it is instantiated, it will do nothing.
|
96 |
new APF_Tabs; |
Code
Try the code below and post comments if you get a problem.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
<?php /* Plugin Name: Admin Page Framework Tutorial 04 - Create In-page Tabs Plugin URI: http://en.michaeluno.jp/admin-page-framework Description: Creates in-page tabs with Admin Page Framework v3 Author: Michael Uno Author URI: http://michaeluno.jp Version: 1.0.1 Requirements: PHP 5.2.4 or above, WordPress 3.4 or above. Admin Page Framework 3.0.0 or above */ // Include the library file. Set your file path here. include( dirname( dirname( __FILE__ ) ) . '/admin-page-framework/library/apf/admin-page-framework.php' ); // Extend the class class APF_Tabs extends AdminPageFramework { // Define the setUp() method to set how many pages, page titles and icons etc. public function setUp() { // Create the root menu $this->setRootMenuPage( '4. Tabs', // specify the name of the page group 'http://lh4.googleusercontent.com/-z7ydw-aPWGc/UwpeB96m5eI/AAAAAAAABjs/Brz6edaUB58/s800/demo04_16x16.png' // menu icon ); // Add the sub menu item $this->addSubMenuItems( array( 'title' => 'My Tabs', // page title 'page_slug' => 'my_tabs', // page slug 'screen_icon' => 'https://lh3.googleusercontent.com/-Z5OeZOGzN3c/UilDgCX9WjI/AAAAAAAABS4/mf7L8GGJRTc/s800/demo04_01_32x32.png' // page screen icon for WP 3.7.x or below ) ); // Add in-page tabs $this->addInPageTabs( 'my_tabs', // set the target page slug so that the 'page_slug' key can be omitted from the next continuing in-page tab arrays. array( 'tab_slug' => 'my_tab_a', // avoid hyphen(dash), dots, and white spaces 'title' => __( 'Tab A', 'admin-page-framework-tutorial' ), ), array( 'tab_slug' => 'my_tab_b', 'title' => __( 'Tab B', 'admin-page-framework-tutorial' ), ), array( 'tab_slug' => 'my_tab_c', 'title' => __( 'Tab C', 'admin-page-framework-tutorial' ), ) ); $this->setPageHeadingTabsVisibility( false ); // disables the page heading tabs by passing false. $this->setInPageTabTag( 'h2' ); // sets the tag used for in-page tabs } /** * One of the predefined callback method. * * @remark content_{page slug} */ public function content_my_tabs( $sContent ) { return $sContent . '<h3>Page Content Filter</h3>' . '<p>This is inserted by the the page <em>content_</em> filter, set in the <b><i>\'content_ + page slug\'</i></b> method.</p>'; } /** * One of the predefined callback method. * * @remark content_{page slug}_{tab slug} */ public function content_my_tabs_my_tab_b( $sContent ) { return $sContent . '<h3>Tab Content Filter</h3>' . '<p>This is the second tab! This is inserted by the <b><i>\'content_ + page slug + _ + tab slug\'</i></b> method.</p>'; } /** * One of the predefined callback method. * * @remark content_{page slug}_{tab slug} */ function content_my_tabs_my_tab_c( $sContent ) { return $sContent . '<h3>Tab Content Filter</h3>' . '<p>This is the third tab!.</p>'; } } // Instantiate the class object. new APF_Tabs; // That's it!! See, it's very short and easy, huh? |
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?
Hi Derek,
I’ve responded to your post on wordpress.org. Let’s continue on the issue there. Thank you!