How to wrap html around Settings API add_settings_section()

I’ve just run across this same issue myself on a project I am currently working on.

Basically, what I did was break my settings into groups so they can then be displayed as a separate section(s):

<?php

class MyPluginSettings
{

    /**
     * Constructor.
     *
     * @return void
     * @access public
     */
    public function __construct()
    {
        add_action('admin_menu', array($this, 'myPluginSettingsMenu'));
    }


    /**
     * Register our admin settings menu/page.
     *
     * @return void
     * @access public
     */
    public function myPluginSettingsMenu()
    {
        add_options_page(
            __('My Plugin Settings', TXTDMN),
            __('My Plugin', TXTDMN),
            'manage_options',
            'my-plugin-settings',
            array($this, 'myPluginSettingsPage')
        );

        add_action('admin_init', array($this, 'registerMyPluginSettings'));
    }


    /**
     * Create the admin settings page.
     *
     * @return void
     * @access public
     */
    public function myPluginSettingsPage()
    {

        ?>
        <div class="wrap">
            <h2><?php _e('My Plugin Settings', TXTDMN); ?></h2>
            <hr>
            <p class="howto"><?php _e('<strong class="label">Ahem:</strong> Introductory text/message/warning, etc.', TXTDMN); ?></p>

            <form action="options.php" method="post">

                <?php settings_fields('my-plugin-settings-group'); ?>

                <!-- CUSTOM STYLABLE SECTION #1 -->
                <div class="my-plugin-options section general">
                    <?php do_settings_sections('my-plugin-general-settings'); ?>

                </div>

                <!-- CUSTOM STYLABLE SECTION #2 -->
                <div class="my-plugin-options section special">
                    <?php do_settings_sections('my-plugin-special-settings'); ?>

                </div>

                <!-- CUSTOM STYLABLE SECTION #3 -->
                <div class="my-plugin-options section misc">
                    <?php do_settings_sections('my-plugin-miscellaneous-settings'); ?>

                </div>

            </form>
        </div>
    <?php

    }


    /**
     * Register all of our sections.
     *
     * @return void
     * @access public
     */
    public function registerMyPluginSettings()
    {
        $this->myPluginGeneralSection();
        $this->myPluginSpecialSection();
        $this->myPluginMiscellaneousSection();
    }


    /**
     * My Plugin general options.
     *
     * @return void
     * @access public
     */
    private function myPluginGeneralSection()
    {
        ...
    }


    /**
     * My Plugin special options.
     *
     * @return void
     * @access public
     */
    private function myPluginSpecialSection()
    {
        ...
    }


    /**
     * My Plugin miscellaneous options.
     *
     * @return void
     * @access public
     */
    private function myPluginMiscellaneousSection()
    {
        ...
    }
}

Hope this helps and makes sense to you 🙂

Good luck.