Section Tabs and Repeatable Sections
Now we know a way to organize form fields with sections (see Organize a Form with Sections). There are some more useful features with form sections. In the previous tutorial, you created a repeatable field that allows the user to add/remove fields dynamically. Similarly, sections can be repeatable, which allows the user to repeat a set of fields.
When a section is repeated, it becomes vertically long and the user has to scroll down to view the repeated elements. It’s okay if the number of fields is not so large but if you want the area to be compact, we can put a section in a tabbed container so that the user can easily switch tabs. Also, there is a field type called section_title and with it the user can set their own section title.
With a combination of these features, you can create a very powerful dynamic form.
Steps
- Include the library
- Extend the library class
- Define the setUp() method
- Define a section with custom settings
- Define fields that belong to the section
- Instantiate the extended class
Screenshot
Include the library
The library file needs to be loaded.
|
13 |
include( dirname( __FILE__ ) . '/library/apf/admin-page-framework.php' ); |
Extend the library class
This time, we use APF_AdvancedSections for the class name.
|
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class APF_AdvancedSections extends AdminPageFramework { // Define the setup() method to set how many pages, page titles and icons etc. public function setUp() { // Set the root menu $this->setRootMenuPage( 'Settings' ); // specifies to which parent menu to add. // Add the sub menus and the pages $this->addSubMenuItems( array( 'title' => '6. Advanced Sections', // the page and menu title 'page_slug' => 'advanced_sections' // the page slug ) ); |
Define the setUp() method
In the setUp() method, we define the admin pages that are going to be created. For that, we need to decide:
- the root page.
- the sub page title.
- the sub page slug.
The code will look like the following. As you might have guessed, we have to go through this process every time we create a page with Admin Page Framework. So you need to get used to it if you use the framework.
|
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class APF_AdvancedSections extends AdminPageFramework { // Define the setup() method to set how many pages, page titles and icons etc. public function setUp() { // Set the root menu $this->setRootMenuPage( 'Settings' ); // specifies to which parent menu to add. // Add the sub menus and the pages $this->addSubMenuItems( array( 'title' => '6. Advanced Sections', // the page and menu title 'page_slug' => 'advanced_sections' // the page slug ) ); |
Define a section with custom settings
We are going to create a section that is repeatable and displayed in a tabbed box. For that, we need to specify the options in the section definition array with the keys of ‘section_tab_slug’ and ‘repeatable’.
The section_tab_slug key is to used to group multiple sections into a tabbed container. Say there are section A and section B and apply the same section tab slug to them, then they will be grouped. Here we just create one section but it will be repeatable so the number of sections will be multiple. That’s why we use the section_tab_slug setting.
To make a section repeatable, we set the repeatable argument and pass the value of true. That’s it.
|
33 34 35 36 37 38 39 40 41 42 |
$this->addSettingSections( 'advanced_sections', // target page slug array( 'section_id' => 'repeatable_tabbed_section', 'section_tab_slug' => 'repeatable_sections', 'repeatable' => true, 'title' => 'Repeatable Tabbed Section', 'description' => 'This section is a repeatable tabbed section.', ) ); |
Define fields that belong to the section
Next, we add fields to the section we just defined.
Notice that there is the sortable argument which make fields sortable, that is, you can set an order of the fields such as which item goes first and next.
|
45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
$this->addSettingFields( 'repeatable_tabbed_section', // target page slug array( 'field_id' => 'my_section_title', 'type' => 'section_title', ), array( 'field_id' => 'my_color', 'type' => 'color', 'title' => 'Color', 'repeatable' => true, 'sortable' => true, ), array( 'field_id' => 'my_image', 'type' => 'image', 'title' => 'Image', 'repeatable' => true, 'sortable' => true, 'attributes' => array( 'style' => 'max-width: 300px;', ) ) ); |
Instantiate the extended class
Finally, we instantiate the class. Unless it is instantiated, it will do nothing.
|
94 |
new APF_AdvancedSections; |
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 |
<?php /* * Plugin Name: Admin Page Framework Tutorial 06 - Use Advanced Section Settings * Plugin URI: http://en.michaeluno.jp/admin-page-framework * Description: Use section tabs and repeatable sections * 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 */ // Set your path here include( dirname( __FILE__ ) . '/library/apf/admin-page-framework.php' ); // Extend the class class APF_AdvancedSections extends AdminPageFramework { // Define the setup() method to set how many pages, page titles and icons etc. public function setUp() { // Set the root menu $this->setRootMenuPage( 'Settings' ); // specifies to which parent menu to add. // Add the sub menus and the pages $this->addSubMenuItems( array( 'title' => '6. Advanced Sections', // the page and menu title 'page_slug' => 'advanced_sections' // the page slug ) ); // Add form sections $this->addSettingSections( 'advanced_sections', // target page slug array( 'section_id' => 'repeatable_tabbed_section', 'section_tab_slug' => 'repeatable_sections', 'repeatable' => true, 'title' => 'Repeatable Tabbed Section', 'description' => 'This section is a repeatable tabbed section.', ) ); // Add form fields $this->addSettingFields( 'repeatable_tabbed_section', // target page slug array( 'field_id' => 'my_section_title', 'type' => 'section_title', ), array( 'field_id' => 'my_color', 'type' => 'color', 'title' => 'Color', 'repeatable' => true, 'sortable' => true, ), array( 'field_id' => 'my_image', 'type' => 'image', 'title' => 'Image', 'repeatable' => true, 'sortable' => true, 'attributes' => array( 'style' => 'max-width: 300px;', ) ) ); } /** * @callback action do_ + page slug */ public function do_advanced_sections() { submit_button(); /** *Show the saved option value. * The extended class name is used as the option key. This can be changed by passing a custom string to the constructor. */ echo '<h3>Options as an array</h4>'; echo $this->oDebug->getArray( get_option( 'APF_AdvancedSections' ) ); echo '<h3>Retrieve individual field values</h4>'; echo '<pre>APF_AdvancedSections[repeatable_tabbed_section][0][my_section_title]: ' . AdminPageFramework::getOption( 'APF_AdvancedSections', array( 'repeatable_tabbed_section', '0', 'my_section_title' ), 'default title value' ) . '</pre>'; echo '<pre>APF_AdvancedSections[repeatable_tabbed_section][1][my_color]: ' . AdminPageFramework::getOption( 'APF_AdvancedSections', array( 'repeatable_tabbed_section', '0', 'color' ), 'default color value' ) . '</pre>'; } } // Instantiate the class object. new APF_AdvancedSections; |
