CMB2 – place inside options page created by ‘add_options_page’

Resolved piotrdeja
(@piotrdeja)

2 years, 6 months ago
How to place my CMB2 fields inside options page created by ‘add_options_page’ (wordpress native function) ? https://scrnli.com/DN9ksKz3kurjP6

Do I need more more advanced PHP (custom PHP class) than usual CMB2 parameter like custom ‘show_on_cb’ ?

Let’s presume ‘show_on_cb’ will do the trick…

First, as I mentioned, I created the options page by native WordPress function ‘add_options_page’ :
```
    function pd_theme_settings_function() {
        add_options_page( 
            'Tytuł', 
            '_Ustawienia_Motywu_', 
            'manage_options', 
            'ustawienia_motywu',
            'theme_settings'
        );
    }
add_action('admin_menu', 'pd_theme_settings_function');
```
…and I want CMB2 fields inside of it…

….so here is my attempt to use ‘cmb2_show_on’ filter :
```
    function show_only_if_screen_id_equals_settings_page_ustawienia_motywu($display) {
        $screen = function_exists( 'get_current_screen' ) ? get_current_screen() : (object) array( 'id' => null );

        // Only show on our screen.
        if ( 'settings_page_ustawienia_motywu' !== $screen->id ) {
            return;
        }

        return $display;
    }
    add_filter( 'cmb2_show_on', 'show_only_if_screen_id_equals_settings_page_ustawienia_motywu', 10, 2 );
```
….and then I used it inside new_cmb2_box like so:
```
    $cmb = new_cmb2_box( array(
        'id'            => 'backlink_offer',  
        'title'         => 'fdsa',
        'object_types' => array( 'options-page', ), // Post type
		'show_on_cb' => 'show_only_if_screen_id_equals_settings_page_ustawienia_motywu',
        'capability'      => 'manage_options',
        'context'       => 'normal',
        'priority'      => 'low',
        'show_names'    => true, // Show field names on the left
    ) );
```
….nope….it does not work

So I tried to utilize ‘Prefix_Add_CMB2_To_Settings_Page’ class form snipets library, namely:
I tried to utilize ‘Prefix_Add_CMB2_To_Settings_Page’ class form snipets library

…changing the $screen parameter to ‘settings_page_ustawienia_motywu’

….and then executing the function

myprefix_cmb2_on_settings();

But still no success…

Any ideas how to make it work ?
- This topic was modified 2 years, 6 months ago by piotrdeja.
- This topic was modified 2 years, 6 months ago by piotrdeja.
- This topic was modified 2 years, 6 months ago by piotrdeja.
- This topic was modified 2 years, 6 months ago by piotrdeja.
- This topic was modified 2 years, 6 months ago by piotrdeja.
- This topic was modified 2 years, 6 months ago by piotrdeja.
- This topic was modified 2 years, 6 months ago by piotrdeja.

Viewing 15 replies - 1 through 15 (of 27 total)

1 2 →

Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

2 years, 6 months ago

Is this add_options_page and whatnot something you set up on your own already? Or is it something that a 3rd party plugin is creating and you just want to add to their page?

Internally, CMB2 makes use of add_submenu_page and add_menu_page which all eventually make use of add_options_page in the end, so even following our general tutorial pages for creating an options page would use that function.

That said, I’m also told that the snippet link you provided in your first reply is the one you want to be using, so some aspect of it must not be lining up just yet.

My initial hunch is that it’s probably not quite matching up in the maybe_hookup_fields() method from the snippet with the screen ID values. However I’d need to see the result of the get_current_screen() return value to help confirm anything.
Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago
I created github repository where I added the whole code:

https://github.com/piotrdejapl/pd_theme_settings

…I know I can use cmb2 ‘new_cmb2_box’ function for creating options page, but I want to stick to ‘add_options_page’ defined by myself .

The following code is the result of the get_current_screen() return value:
```
WP_Screen Object
(
    [action] => 
    [base] => settings_page_ustawienia_motywu
    [columns:WP_Screen:private] => 0
    [id] => settings_page_ustawienia_motywu
    [in_admin:protected] => site
    [is_network] => 
    [is_user] => 
    [parent_base] => options-general
    [parent_file] => options-general.php
    [post_type] => 
    [taxonomy] => 
    [_help_tabs:WP_Screen:private] => Array
        (
        )

    [_help_sidebar:WP_Screen:private] => 
    [_screen_reader_content:WP_Screen:private] => Array
        (
        )

    [_options:WP_Screen:private] => Array
        (
        )

    [_show_screen_options:WP_Screen:private] => 
    [_screen_settings:WP_Screen:private] => 
    [is_block_editor] => 
)
```
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

2 years, 6 months ago

I want to stick to ‘add_options_page’ defined by myself.

Admittedly curious why this part is so important, but I’m not going to worry that much about it, with what’s below.

Screen IDs are matching up.

I poked at it a little bit and found that it actually IS INDEED being appended to the page. If you look at the admin_page_display() method of the snippet class, https://github.com/piotrdejapl/pd_theme_settings/blob/master/libs/admin-view.php#L180-L192, you’ll note that it also has a display: none appended to its markup and some javascript.

That’s the key part there, the javascript is looking for a submit button with an id attribute of submit which the original version of the snippet had available, with the “General Options” page. However, your output doesn’t have a button yet, so it doesn’t do anything with the output markup. Once you have a button, or perhaps just change up the javascript to append it some other way, you’ll probably be in business finally.
Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago
Hi,

Using your instructions I’ve mannaged to make CMB2 appear on my settings page, however there is another problem, namely saving the fields to database after pressing the ‘save changes’ button does not work, I get some warning.

Can you look at it ?

I’ve made an updated version of previously linked plugin (now it contains your advice) here:

https://github.com/piotrdejapl/pd_theme_settings_v2
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

2 years, 6 months ago

What’s the error in question? I may be able to answer based on that alone, or at least try to 😀

JS or PHP error for example?
Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago
After clicking the ‘save changes’ I get redirected to this page containing warning:

https://github.com/piotrdejapl/pd_theme_settings_v2/blob/master/error.png

…other settings pages (general, writing etc.) seem to be configured differently, namely after the <form> they contain some additional inputs -> <input type=”hidden”> one of which contains nonce with value…
…all in all, my form does not save values to the database, I get redirected to that warning page…
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

2 years, 6 months ago

That warning would be more of WP core itself rather than something created by CMB2.

So that’s more a case of getting the rest of your options page set up and handled based on the Settings API as a whole. That said it also circles me back to why you’re wanting to call add_options_page() yourself and append some CMB2 fields to it, instead making use of CMB2 to handle all of that for you which has already been pretty well tested.

For example is there other output you’re wanting to add to the page that wouldn’t be handled by CMB2 itself? As I’m curious if there would be ways around that as well.
Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago
Yeah, the reason why I want to call native ‘add_options_page’ is that I want to add a lot of custom output inside that plugin view + multiple ‘new_cmb2_box’ (different types, with repeaters etc.)
But ok, I will try to abandon using ‘add_options_page’ for now and play with what you suggested, we’ll see what comes out of it… I will try to do this in the upcoming week and post the results here 😉
- This reply was modified 2 years, 6 months ago by piotrdeja.
Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago
Ok, I’m having some problems.

What do I want to accomplish ?

1. Add new options-page with the use of new_cmb2_box -> this works fine
```
add_action( 'cmb2_admin_init', 'register_metabox' );

function register_metabox() {

    $cmb = new_cmb2_box( array(
        'id'           => 'testtesttest',
        'title'         => '_Ustawienia_Motywu_',
        'object_types' => array( 'options-page' ),
        'option_key'      => 'ustawienia_motywu',
        'parent_slug' => 'options-general.php'
    ) );

    }
```
2. To just created options page (1) add one meta box, again, with the use of new_cmb2_box -> this part does not work:
```
add_action( 'cmb2_admin_init', 'register_metabox2' );

function register_metabox2() {

    $cmb2 = new_cmb2_box( array(
        'id'           => 'test2',
        'title'         => 'title',
        'object_types' => array( 'options-page' ),
        'parent_slug' => 'options-general.php?page=ustawienia_motywu',
    ) );

    // Set our CMB2 fields

    $cmb2->add_field( array(
        'name' => __( 'Test Text', 'myprefix' ),
        'desc' => __( 'field description (optional)', 'myprefix' ),
        'id'   => 'test_text',
        'type' => 'text',
        // 'default' => 'Default Text',
    ) );

    $cmb2->add_field( array(
        'name'    => __( 'Test Color Picker', 'myprefix' ),
        'desc'    => __( 'field description (optional)', 'myprefix' ),
        'id'      => 'test_colorpicker',
        'type'    => 'colorpicker',
        'default' => '#bada55',
    ) );

}
```
How to make it work ?
- This reply was modified 2 years, 6 months ago by piotrdeja.
Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

2 years, 6 months ago
Any reason you’re not doing this?
```
add_action( 'cmb2_admin_init', 'register_metabox' );
function register_metabox() {

    $cmb = new_cmb2_box( array(
        'id'           => 'testtesttest',
        'title'         => '_Ustawienia_Motywu_',
        'object_types' => array( 'options-page' ),
        'option_key'      => 'ustawienia_motywu',
        'parent_slug' => 'options-general.php'
    ) );

    $cmb->add_field( array(
        'name' => __( 'Test Text', 'myprefix' ),
        'desc' => __( 'field description (optional)', 'myprefix' ),
        'id'   => 'test_text',
        'type' => 'text',
        // 'default' => 'Default Text',
    ) );

    $cmb->add_field( array(
        'name'    => __( 'Test Color Picker', 'myprefix' ),
        'desc'    => __( 'field description (optional)', 'myprefix' ),
        'id'      => 'test_colorpicker',
        'type'    => 'colorpicker',
        'default' => '#bada55',
    ) );
}
```
you’ve already created the “_Ustawienia_Motywu_” options page, and now you just need to add some fields to it. That second metabox attempt is trying to create an options page as a child of the first one.

Just in case not seen, the wiki has a lot of great information on it as well for general/advanced usage of CMB2, https://github.com/CMB2/CMB2/wiki
Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago
Due to the styling and ordering/separation reasons which is highly reasonable reason I want to make completelly separate metaboxes within an options page – is it possible with CMB2 ?

I know about the solution you proposed – it does not satisfy me. And yes, I also know about the option with making options page at base level with subpages – it does not satisfy me either. I want what precisely I described.

+ I know that it is possible to make separate metaboxes, for instance, when inside:

'object_types' => array( 'page' )
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

2 years, 6 months ago

At the moment I am curious if I’d be better help if I had a visual of what you’re trying to accomplish, assuming you have some sort of mockup or maybe a wireframe.

We can have 1 option page/menu item and have multiple separate metabox configurations added to it with their own fields. We could also have just 1 huge configuration with all of them. We could also set up multiple option pages each with their own configuration in place.

There’s also these available parameters to help with inserting content before/after various parts of the resulting form. https://github.com/CMB2/CMB2/wiki/Field-Parameters along with some other generally useful things.

However, even without CMB2, I haven’t seen much luck or success with nesting of menu items below the first level, meaning the submenu like the “General” options page in “Settings”.
Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago
This is the visual of what I am trying to accomplish/create inside my options (ustawienia_motywu) page:

Link to github picture

…this is the rough simplified estimate of what I want to accomplish, I want separate metaboxes for ‘settings 1’, ‘settings 2’ and ‘settings 3’, each box with their own inputs, texteareas etc.

As you can see IT IS possible within/inside the page, but I dont know how to use CMB2 API to configure the same output for my options page (by ‘options page’ I mean ‘ustawienia_motywu’ options page which I referred to throughout this thread).
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
- This reply was modified 2 years, 6 months ago by piotrdeja.
Plugin Contributor Michael Beckwith
(@tw2113)

The BenchPresser

2 years, 6 months ago

That does indeed help me out a lot actually. Checking on some things and will get back to you as soon as I can.

Thread Starter piotrdeja
(@piotrdeja)

2 years, 6 months ago

Ok, thanks.

Viewing 15 replies - 1 through 15 (of 27 total)

1 2 →

The topic ‘CMB2 – place inside options page created by ‘add_options_page’’ is closed to new replies.