elegantthemes / Divi-Beta

8 stars 0 forks source link

How To Add Custom Tab In Exisiting Divi 5 Module #73

Open UmerCheema-WPD opened 4 months ago

UmerCheema-WPD commented 4 months ago

If we want add custom tab in column settings, we can achieve this in Divi 4 using add_filter('et_builder_main_tabs', 'my_callback_function').

How can we achieve this in Divi 5.0? Is there any alternate hook for this?

Hook

apply_filters( 'et_builder_main_tabs', $tabs )

Code Example


/**
 * Add a new custom tab to the ET Builder main tabs.
 *
 * @param array $tabs The existing tabs.
 *
 * @return array The modified tabs with the new custom tab.
 */
if (!function_exists('add_custom_tab_to_et_builder')) :
    function add_custom_tab_to_et_builder($tabs)
    {
        $tabs['custom_new_tab'] = __('Custom Tab', 'domain');

        return $tabs;
    }
endif;
add_filter('et_builder_main_tabs', 'add_custom_tab_to_et_builder', 1);
/**
 * Add a custom toggle under the new tab in the column module settings.
 *
 * @param array $modules The existing modules.
 * @param string $post_type The post type.
 *
 * @return array The modified modules with the new custom toggle.
 */
if (!function_exists('add_custom_toggle_to_et_pb_column')) :
    function add_custom_toggle_to_et_pb_column($modules, $post_type)
    {
        if (isset($modules['et_pb_column'])) {
            $column = $modules['et_pb_column'];
            $column->settings_modal_toggles['custom_new_tab'] = [
                'toggles' => [
                    'custom_general_toggle' => [
                        'title' => __('Custom Toggle', 'domain'),
                    ],
                ],
            ];
        }

        return $modules;
    }

    add_filter('et_builder_get_child_modules', 'add_custom_toggle_to_et_pb_column', 10, 2);
endif;
/**
 * Add a custom field to the new custom tab in the column module settings.
 *
 * @param array $fields_unprocessed The existing unprocessed fields.
 *
 * @return array The modified fields with the new custom field.
 */
if (!function_exists('add_custom_field_to_et_pb_column')) :
    function add_custom_field_to_et_pb_column($fields_unprocessed)
    {
        $custom_fields['my_field'] = [
            'label' => __('My Field', 'domain'),
            'type' => 'text',
            'description' => __('Description Of Field', 'domain'),
            'default' => '',
            'dynamic_content' => 'text',
            'tab_slug' => 'custom_new_tab',
            'toggle_slug' => 'custom_general_toggle',
        ];

        return wp_parse_args($custom_fields, $fields_unprocessed);
    }

    add_filter('et_pb_all_fields_unprocessed_et_pb_column', 'add_custom_field_to_et_pb_column');
endif;

Screenshot

Add Tab