Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I am writing a plugin and I'm currently implementing my admin menu using the wordpress settins API. As always with API's, it facilitates programming to a certain degree, but it seems like I have an issue:

I need to wrap custom html around those sections. For example I want to wrap my form elements around a fieldset or I want to position logical units into two columns using CSS(float: right, float:left). In order to do so, I need to pack these sections into a container.

This is the API function that echo's the sections.

function do_settings_sections( $page ) {
        global $wp_settings_sections, $wp_settings_fields;

        if ( ! isset( $wp_settings_sections[$page] ) )
                return;

        foreach ( (array) $wp_settings_sections[$page] as $section ) {
                if ( $section['title'] )
                        echo "<h3>{$section['title']}</h3>\n";

                if ( $section['callback'] )
                        call_user_func( $section['callback'], $section );

                if ( ! isset( $wp_settings_fields ) || !isset( $wp_settings_fields[$page] ) || !isset( $wp_settings_fields[$page][$section['id']] ) )
                        continue;
                //MY WRAPPING NEEDS TO START HERE
                echo '<table class="form-table">';
                do_settings_fields( $page, $section['id'] );
                echo '</table>';
                //AND END HERE!
        }
}

As far as I read the source correctly, there's no way to wrap custom html around it (only before, with the add_settings_section( $id, $title, $callback, $page ) $callback parameter).

So how would you solve this problem? Should I just inject the appropriate containers into the the global $wp_settings_sections (With the ordinary hook I will write the div and then in the last field of each setting I can close the container with /div. But this is a very very ugly workaround and it find it repellent to say the least!

Should I abandon the idea of using the great settings API?

share|improve this question
    
"In order to do so, I need to pack these sections into a container" -> Are you sure about that? I find that there is actually almost never a real reason to add extra needless containers, but designers have so much gotten in the habit of doing it now that they fail to realize that CSS3 is not CSS2. You have a table with a class already right there. Why do you need a wrapping container on it? You can reference the table element directly, give it all sorts of properties. –  Otto Dec 8 '13 at 16:39
    
Nice point of view! I will definitely consider it...Maybe it helps that I am not a designer at all :/ –  Nikolai Tschacher Dec 9 '13 at 13:04

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer
    
This looks good. There still remains the minor issue, that I am creating my menu dynamically, but I guess to abstract the settings API is just a design/architecture error (although I managed to create a somehow strange solution) and one should hardcode the whole markup that wraps around the sections...But thanks! –  Nikolai Tschacher Dec 9 '13 at 13:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.