Settings Sections

Creating new section in settings is pretty easy. By default we’ve 4 tabs in settings. So here are the filter hooks and how you can use them.

Creating a new section in the settings tabs is straightforward. By default, there are four tabs in the settings: General, Appearance, Content, and Integrations. Each tab provides filter hooks that allow you to add custom sections before or after the tab’s content.

Below is a guide on how to use these hooks, with an example for the General tab.

Available Filter Hooks for Each Tab #

1. General Tab
   • settings_general_tab_before_section_start: Add content before the General tab starts.
   • settings_general_tab_before_section_end: Add content before the General tab ends.
   • settings_general_tab_after_section_end: Add content after the General tab ends.
2. Appearance Tab
   • settings_appearance_tab_before_section_start: Add content before the Appearance tab starts.
   • settings_appearance_tab_before_section_end: Add content before the Appearance tab ends.
   • settings_appearance_tab_after_section_end: Add content after the Appearance tab ends.
3. Content Tab
   • settings_content_tab_before_section_start: Add content before the Content tab starts.
   • settings_content_tab_before_section_end: Add content before the Content tab ends.
   • settings_content_tab_after_section_end: Add content after the Content tab ends.
4. Integrations Tab
   • settings_integrations_tab_before_section_start: Add content before the Integrations tab starts.
   • settings_integrations_tab_before_section_end: Add content before the Integrations tab ends.
   • settings_integrations_tab_after_section_end: Add content after the Integrations tab ends.

Example: Adding a New Section to the General Tab #

To add a new section after the General tab’s content, you can use the settings_general_tab_after_section_end filter hook. Below is an example implementation:

<?php

namespace Modules\UserAvatar\Services;

class SettingHooks
{
    public function register(): void
    {
        ld_add_filter('settings_general_tab_after_section_end', [$this, 'addNewSettingsSection'], 10, 1);
    }

    public function addNewSettingsSection($html = ''): string
    {
        ob_start();
        ?>
        <div class="px-5 py-4 sm:px-6 mt-2 sm:py-5 border rounded-md bg-gray-50 dark:bg-gray-800">
            <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
                Another Settings
            </h3>
        </div>

        <?php
        $html .= ob_get_clean();

        return $html;
    }
}

Call it from service provider

(new SettingHooks)->register();

Output would be something like this – Another Settings section

Explanation of the Example #

1. Hook Registration:
   • The ld_add_filter function registers the settings_general_tab_after_section_end hook.
   • The callback method addNewSettingsSection is executed when the hook is triggered.
2. Callback Method:
   • The addNewSettingsSection method receives the current HTML content of the tab as a parameter.
   • It appends a new section to the HTML using ob_start() and ob_get_clean() to capture the output buffer.
3. HTML Structure:
   • The new section is wrapped in a <div> with styling classes to match the existing settings UI.

Example 2: Using blade file #

You can use blade file instead doing in controller

<?php

namespace Modules\UserAvatar\Services;

class SettingHooks
{
    public function register(): void
    {
        ld_add_filter('settings_general_tab_after_section_end', [$this, 'addNewSettingsSection'], 10, 1);
    }

    public function addNewSettingsSection($html = ''): string
    {
        return $html . view('useravatar::settings-another-section')->render();
    }
}

And then from the view file –

<div class="mt-2 rounded-2xl border border-gray-200 dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">
            {{ __('Another Settings') }}
        </h3>
    </div>
    <div class="space-y-6 border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
        <div class="flex">
            <div class="md:basis-1/2 relative">
                <label class="mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400">
                    {{ __('Another input field') }}
                </label>
                <input type="text" name="another_input_field" placeholder="{{ __('Enter Another input field') }}"
                    value="{{ config('settings.another_input_field') ?? '' }}"
                    class="dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border border-gray-300 bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:border-gray-700 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30"
                />
            </div>
        </div>
    </div>
</div>

Output added another section:

How It Works #

When the settings page is rendered, the settings_general_tab_after_section_end hook is triggered. The addNewSettingsSection method is called, and the new section is appended to the General tab’s content.

Notes #

• Replace Another Settings with your desired section title and content.
• Use the appropriate filter hook for the tab you want to modify (e.g., settings_appearance_tab_after_section_end for the Appearance tab).
• Ensure your custom logic does not conflict with existing sections or styles.

This approach allows you to extend the settings tabs dynamically without modifying the core code.