Criando Settings Pages Profissionais no WordPress

Fala, pessoal! 👋
Aqui é o Asllan Maciel novamente — e hoje a parada é Settings Page com estilo e organização!

Sabe aquele plugin cheio de add_options_page, campos soltos e sem padrão? Pois é, a gente não faz mais assim.

Neste ponto da nossa jornada, você já criou estrutura em camadas, repositórios, injeção de dependência, logger, WP-CLI… agora chegou a hora de dar ao seu plugin uma interface de configuração decente, modular, com campos reutilizáveis, e fácil de manter.

Bora profissionalizar essa parte também? 🚀

⚙️ Por que criar uma Settings Page do jeito certo?

• ✅ Centraliza as configurações do plugin em um lugar intuitivo
• ✅ Facilita manutenção e evolução da interface
• ✅ Evita duplicação de código (renderização de campos)
• ✅ Integra com nossa arquitetura de serviços e helpers
• ✅ Dá uma boa primeira impressão para quem instala seu plugin

🛠️ Etapa 1 – Criando uma classe SettingsPage

Vamos colocar dentro de src/Admin/SettingsPage.php:

<?php
namespace WpArquiteturaExtrema\Admin;

class SettingsPage
{
    public function register()
    {
        add_action('admin_menu', [$this, 'add_menu']);
        add_action('admin_init', [$this, 'register_settings']);
    }

    public function add_menu()
    {
        add_options_page(
            'Configurações WP24H',
            'WP24H Plugin',
            'manage_options',
            'wp24h-settings',
            [$this, 'render_page']
        );
    }

    public function register_settings()
    {
        register_setting('wp24h_settings_group', 'wp24h_api_key');

        add_settings_section(
            'wp24h_main_section',
            'Credenciais de Acesso',
            null,
            'wp24h-settings'
        );

        add_settings_field(
            'wp24h_api_key',
            'API Key',
            [$this, 'render_field_api_key'],
            'wp24h-settings',
            'wp24h_main_section'
        );
    }

    public function render_field_api_key()
    {
        $value = esc_attr(get_option('wp24h_api_key'));
        echo "<input type='text' name='wp24h_api_key' value='$value' class='regular-text'>";
    }

    public function render_page()
    {
        ?>
        <div class="wrap">
            <h1>Configurações do WP24H Plugin</h1>
            <form method="post" action="options.php">
                <?php
                settings_fields('wp24h_settings_group');
                do_settings_sections('wp24h-settings');
                submit_button();
                ?>
            </form>
        </div>
        <?php
    }
}

🧬 Etapa 2 – Registrando no nosso Init

Abra seu Init.php e adicione:

use WpArquiteturaExtrema\Admin\SettingsPage;

public function register()
{
    add_action('init', [$this, 'init_plugin']);
    add_action('init', [$this, 'register_blocks']);

    if (is_admin()) {
        (new SettingsPage())->register();
    }
}

🧪 Etapa 3 – Teste tudo e valide

1. Ative o plugin
2. Vá em Configurações > WP24H Plugin
3. Salve sua API Key fictícia
4. Use get_option('wp24h_api_key') em qualquer lugar para usar a config

✨ Extras que você pode implementar depois:

• Organização em abas (com tabs em jQuery)
• Sanitização avançada dos campos
• Uso de helpers para renderizar múltiplos campos com estrutura DRY
• Compatibilidade com REST para manipulação externa

💡 Conclusão

Plugins WordPress profissionais têm painéis de configuração profissionais.

Ao separar a lógica em uma classe dedicada, você ganha clareza, organização e facilita demais a manutenção. Nada de admin_menu perdido no arquivo principal.

Me conta o que achou nos comentários!