Create a WordPress style theme for the CMB2 options page.

[krugazul]

Requirements

We need to style the CMB2 options page in the same style as the WordPress Theme Pages. We would also like the individual boxes to act like "tabs" as the appearance page does.

All functionality needs to be contained in 1 class in lsx-business-directory/classes/admin/class-settings-theme.php, as it will need to be ported over to the LSX Health Plan plugin afterwards.

The SCSS can be in a module of its own as well, included in the admin dashboard.

Development

1:) This is only to apply to the settings page, so you need to make sure you test the to make sure the current screen is the options_page.
lsx-business-directory/vendor/CMB2/includes/CMB2.php
do_action( 'cmb2_before_form', $this->cmb_id, $object_id, $object_type, $this );
OR
do_action( "cmb2_before_{$object_type}_form_{$this->cmb_id}", $object_id, $this );

You can also test for these URL params as they are unique edit.php?post_type=business-directory&page=lsx-business-directory-settings

2:) Use the above actions to run through the fields for output, and create a tabbed navigation Div, this will containt the links to trigger the tabs. Using the appearance of the tabbed navigation.

3:) Before the "title" field type output an opening div, which will house the "tab ID", and the opening div for the tab.
Action Location - lsx-business-directory/vendor/CMB2/includes/CMB2_Field.php - 834
do_action( 'cmb2_before_field_row', $this );
OR
do_action( "cmb2_before_{$field_type}_field_row", $this );

4a:) Lastly you will need to close each of the tab content divs. The easiest way to do this is to add a custom CMB2 field, which only outputs a ` 'title_close' which you can test for.

• CMB2 Tutorial - Adding a custom field

4b:) You will need to add the title_close to the end of all the settings, to mark where you want the box to "wrap". See the locations below, where you need to add in the title_close field.

• Single
• Archive
• Search)

5:) You will then need to add in the CSS for the navigation links (tabs headers) and the fields.

6:) You will need to add in some JS to handle the tab switching, this can be added to the admin_head action, as just a <script> output. We do not need an entire JS file just for that.

[jlaguma]

Pull request for this enhancement: #40