How do I create a section (form) for the WordPress plugin setting page (admin panel)?

Question

I am using the Herbert Plugin Framework and am creating a plugin.

Here is the code I am using:

panels.php

$panel->add([
    'type' => 'panel',
    'as'   => 'mainPanel',
    'title' => 'Plugin',
    'rename' => 'General',
    'slug' => 'plugin-admin-settings',
    'icon' => 'dashicons-chart-area',
    'uses' => __NAMESPACE__ . '\Controllers\PluginController@createAdminPage'
]);

Now PluginController

 <?php
    namespace Plugin\Controllers;

    use Herbert\Framework\Models\Option;
    use Herbert\Framework\RedirectResponse;
    use Herbert\Framework\Http;
    use \Google_Client;
    use \Google_Service_Analytics;
    use Plugin\Helper;

    class PluginController {

        public static function createAdminPage()
        {
            $this->option = get_option('pluginAuthenticationSetting');

            //if (!isset($this->option['authenticationCode'])):
            //if (get_option('pluginAuthenticationSetting') == FALSE):

                return view('@Plugin/auth.twig', [
                  'title'   => 'Analytics Reports',
                  'content' => SELF::settings()
                ]);
            //endif;
        }

        public static function settings()
        {
            settings_fields('pluginAuthenticationSetting');
            do_settings_sections('pluginAuthenticationSetting');
            submit_button();
        }

        public static function pageInit()
        {
            wp_register_script(
                'plugin',
                Helper::assetUrl('/jquery/plugin.js'),
                array( 'jquery' )
            );

            wp_localize_script(
               'plugin',
               'ajax_object',
               array( 'ajax_url' => admin_url( 'admin-ajax.php' ),
               'we_value' => 1234 )
            );

            register_setting(
               'pluginAuthenticationSetting',
               'plugin_authorization_setting',
               array( __CLASS__, 'sanitize' )
            );

            add_settings_section(
               'authenticationSection',
               'Authentication Section',
               array( __CLASS__, 'printAuthenticationSection' ),
               'pluginAuthenticationSetting'
            );

            add_settings_field(
               'authenticationCode',
                'Authentication Code',
               array( __CLASS__, 'authenticationCodeCallback' ),
               'apluginAuthenticationSetting',
               'authenticationSection'
            );
        }

        public function sanitization( $input )
        {
            $new_input = array();

            if (isset( $input['authenticationCode']))
                $new_input['authenticationCode'] = sanitize_text_field($input['authenticationCode']);

            return $new_input;
        }

        public static function printAuthenticationSection()
        {
            print 'Enter Your Authentication Code Below:';
        }

        public static function authenticationCodeCallback()
        {

            printf( '<input type="text" id="authentication" name="analyticaAuthenticationSetting[authenticationCode]" value="%s" />', isset( $this->option['authenticationCode'] ) ? esc_attr( $this->option['authenticationCode'] ) : '');
        }
    }

Now pageInit() needs the admin_init hook. If I create a constructor and try like add_action('admin_init', array(__CLASS__, 'pageInit')); , it is not working. If I use it in panel creation and call createAdminPage taht is also not working. How it can be done?

It generates no error, and only the submit button is displayed.

Answer 1

We need to focus on where we want to send data.

Answer: To the administration side of WordPress, that is, we need to use a panel to do the job. When we send data to client side , we use a route .

Here is the code.

Creating a panel

$panel->add([
    'type' => 'panel',
    'as'   => 'mainPanel',
    'title' => 'Analytica',
    'rename' => 'General',
    'slug' => 'analytica-admin-settings',
    'icon' => 'dashicons-chart-area',
    'uses' => __NAMESPACE__ . '\Controllers\AnalyticaController@index',
    'post' => [
        // Sending data to save using post.
        'save' => __NAMESPACE__ . '\Controllers\AnalyticaController@save',
        ]
]);

Controller to display the page and save the data in the database

<?php namespace Analytica\Controllers;

    use Herbert\Framework\Models\Option;
    use Herbert\Framework\RedirectResponse;
    use Herbert\Framework\Http;
    use Herbert\Framework\Enqueue;
    use Herbert\Framework\Notifier;
    use \Google_Client;
    use Analytica\Helper;

    class AnalyticaController {
        public function index(){
            // Display the form
        }

        public function save(){
            // Validate and save the data
        }
    }

You need to focus on use Herbert\\Framework\\Models\\Option; . That means there is an model called Option that represents the wp_options table.

Now, what are the functions we use here?

We can use the Laravel Eloquent and Schema here. Now you may understand it; we can do a lot of things here. It is like just we are having some pre-built models and we are working on the same Laravel.

Note: Forget about hooks for some time. We can still suit a theme, but for most of the cases we do not need a theme.