Page Group
When you open the dashboard in the admin area, you see the menu in the side bar. There are built-in top-level menu items such as Dashboard, Posts, Media Pages and so on and sub-menu pages belong to them. We’ve covered how to add a sub-menu page to one of the existing top-level pages. With Admin Page Framework, you can create your own set of pages including a top-level page and sub-menu pages as a page group.
Steps
- Include the library
- Extend the library class
- Define the setUp() method
- In the setUp method, define the sub-pages.
- Instantiate the extended class
Screenshot
Include the library
The library file needs to be loaded. Set your correct path.
|
12 |
include( dirname( __FILE__ ) . '/library/apf/admin-page-framework.php' ); |
Extend the library class
This time, let’s use APF_CreatePageGroup for the class name.
|
1 2 3 |
class APF_CreatePageGroup extends AdminPageFramework { // our code goes here… } |
Define the setUp() method
In the setUp() method, we define the admin pages to be created. 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.
In order to create a custom root page, we need to pass a string that is not listed below.
- Dashboard
- Posts
- Media
- Links
- Pages
- Comments
- Appearance
- Plugins
- Users
- Tools
- Settings
- Network Admin
This time, we are going to set “3. My Page Group” as the root page title and for that it needs to be passed to the first parameter of the setRootMenuPage() method . As it’s not the built-in menu item, the framework automatically creates a new root menu page. The slug for the created root menu page will be the extended class name and stored internally.
To set the menu icon placed in the sidebar menu, pass the url or the path of the icon to the second parameter. The icon size should be 16 by 16 in pixel.
|
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 |
public function setUp() { // Create the root menu $this->setRootMenuPage( '3. My Page Group', // specify the name of the page group 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s16/demo03_01_32x32.png' // use 16 by 16 image for the menu icon. ); // Add the sub menus and the pages. // The third parameter accepts screen icon url that appears at the top of the page. $this->addSubMenuItems( array( 'title' => 'First Page', // page title 'page_slug' => 'my_first_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => 'Second Page', // page title 'page_slug' => 'my_second_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => 'Third Page', // page title 'page_slug' => 'my_third_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => __( 'Documentation', 'admin-page-framework-demo' ), 'href' => 'http://admin-page-framework.michaeluno.jp/en/v3/', 'show_page_heading_tab' => false, ) ); // You can add more pages as many as you want! } |
To add sub menu pages, we use the addSubMenuItems() method. We pass a sub-menu item definition array. It accepts sub-pages and external links. For sub-pages, give the title and page_slug arguments and for external links, give the title and the href argument. The screen_icon argument is optional and it is for WordPress v3.7.x or below. v3.8 or above does not support screen icons displayed along with the page title any more. If your plugin or theme should support older versions of WordPress, set a screen icon for each page.
|
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 |
public function setUp() { // Create the root menu $this->setRootMenuPage( '3. My Page Group', // specify the name of the page group 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s16/demo03_01_32x32.png' // use 16 by 16 image for the menu icon. ); // Add the sub menus and the pages. // The third parameter accepts screen icon url that appears at the top of the page. $this->addSubMenuItems( array( 'title' => 'First Page', // page title 'page_slug' => 'my_first_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => 'Second Page', // page title 'page_slug' => 'my_second_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => 'Third Page', // page title 'page_slug' => 'my_third_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => __( 'Documentation', 'admin-page-framework-demo' ), 'href' => 'http://admin-page-framework.michaeluno.jp/en/v3/', 'show_page_heading_tab' => false, ) ); // You can add more pages as many as you want! } |
Use Pre-defined Filters
So far, for callback methods, we just used do_ + page slug action hook. Let’s try another one: content_ + page slug. This is a filter, not an action hook. On contrary to action hooks, filters need to return the filtered value. In the below example code, notice that the function name is content_ + page slug and a string value is returned with appended modified text. This inserts the appended text into the page whose slug is my_first_page.
|
78 79 80 |
public function content_my_first_page( $sContent ) { return $sContent . '<h3>Filter Hook Method</h3><p>This is the first page from the filter! ( content_ + pageslug )</p>'; } |
Like so, we can add more callback methods as necessary.
Instantiate the extended class
Finally, we instantiate the class. Unless it is instantiated, it will do nothing.
|
92 |
new APF_CreatePageGroup; |
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 03 - Create a Page Group Plugin URI: http://en.michaeluno.jp/admin-page-framework Description: Creates a page group 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. or above. Admin Page Framework 3.0.0 or above */ include( dirname( __FILE__ ) . '/library/apf/admin-page-framework.php' ); // Extend the class class APF_CreatePageGroup 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( '3. My Page Group', // specify the name of the page group 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s16/demo03_01_32x32.png' // use 16 by 16 image for the menu icon. ); // Add the sub menus and the pages. // The third parameter accepts screen icon url that appears at the top of the page. $this->addSubMenuItems( array( 'title' => 'First Page', // page title 'page_slug' => 'my_first_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => 'Second Page', // page title 'page_slug' => 'my_second_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => 'Third Page', // page title 'page_slug' => 'my_third_page', // page slug 'screen_icon' => 'https://lh5.googleusercontent.com/-vr0hu0pHcYo/UilDa_OwGYI/AAAAAAAABRg/29eid1MIBW0/s800/demo03_01_32x32.png' // page screen icon for WP 3.7.x or below ), array( 'title' => __( 'Documentation', 'admin-page-framework-demo' ), 'href' => 'http://admin-page-framework.michaeluno.jp/en/v3/', 'show_page_heading_tab' => false, ) ); // You can add more pages as many as you want! } // Action hook methods: 'do_' + page slug. public function do_my_first_page() { ?> <h3>Action Hook Method</h3> <p>This is the first page from the action hook!</p> <?php } public function do_my_second_page() { ?> <h3>Action Hook Method</h3> <p>This is the second page from the action hook!</p> <?php } public function do_my_third_page() { ?> <h3>Action Hook Method</h3> <p>This is the third page from the action hook!</p> <?php } /** * Let's try using methods for filters. For filters, the method must return the output. * The method name is content_ + page slug, similar to the above methods for action hooks. */ public function content_my_first_page( $sContent ) { return $sContent . '<h3>Filter Hook Method</h3><p>This is the first page from the filter! ( content_ + pageslug )</p>'; } public function content_my_second_page( $sContent ) { return $sContent . '<h3>Filter Hook Method</h3><p>This is the second page from the filter! ( content_ + pageslug )</p>'; } public function content_my_third_page( $sContent ) { return $sContent . '<h3>Filter Hook Method</h3><p>This is the third page from the filter! ( content_ + pageslug )</p>'; } // There are more available filters and actions! Please refer to Demo 06 - Hooks. } // Instantiate the class object. new APF_CreatePageGroup; // That's it!! See, it's very short and easy, huh? |
Hey, thanks for making this page! I wanted to let you know that the first script box is only sized to show one line of text (at least on my Windows 10 Chrome browser). It makes it hard to read/copy the code.