Custom Modal

If you want to add your design to the popup then it is possible. CHP Adblock Detector implemented Custom Modal Feature on v2.7.

Here is the step to add a custom modal.

Design Folder Structure

You can place your design on anywhere inside the WordPress root folder.

The folder structure of your design must be

.
├── DESIGNNAME
│   ├── index.php
│   ├── settings.php (optional)
│   └── screenshot.png

• index.php: Your design frontend code
• settings.php (optional): Your design custom settings HTML code. If your design doesn’t have any custom settings, You needn’t have this file.
• screenshot.png: Your design preview image

Add Design Information

First, you have to add design information, such as title, design name, design slug, and design path. Use, the below code to list your design on the theme.

/**
 * Add Popup Modal Design Information
 * 
 * @see chpadb/theme
 * @since 3.8
 */
add_filter("chpadb/theme", function($theme){

    $themeKey = "THEMEKEY";

    $theme[$themeKey] = array(
        "title" => "THEMENAME",
        "settings" => "SETTINGS_ARRAY",
        "defaults" => "SETTINGS_DEFAULT_VALUE",
        "path" => "DESIGN_RELATIVE_PATH",
        'url' => "DESIGN_RELATIVE_URL"
    );

    return $theme;
}, 10);

If you have custom settings of design, You have to provide the following information correctly.

SETTINGS_ARRAY

If you have custom settings for your design, You can pass the array of names of settings input. Such as

array("mytheme_color", "mytheme_button_text")

SETTINGS_DEFAULT_VALUE

If you have custom settings for your design, You have to pass the array of default values of settings input. Such as

array("#fff", "Hello")

DESIGN_RELATIVE_PATH or DESIGN_RELATIVE_URL

Pass the relative path to the folder where the design is located. Suppose your design is mytheme and it is location on the folder as D://test/wp-content/themes/templates/mytheme/index.php then

DESIGN_RELATIVE_PATH = D://test/wp-content/themes/templates/

DESIGN_RELATIVE_URL = https://example.com/wp-content/themes/templates/

Add Design Custom Settings

If you have custom settings for your design, Your settings HTML code must have the following standard.

• Each setting (input, checkbox, select, or any form) must have a name attribute otherwise excluded.
• Must have added these classes “chpabd_form_settings include” in form elements

To set the value, You have access to the $settings variable where you will find the value of the setting.

$settings->FORM_ELEMENT_NAME

Make sure you have given form element name in design infromation.

Below is the sample settings code.

<div class="row">
    <div class="col-md-5 mt-3">
        <label class="label"><?php echo __('Color', 'chp-ads-block-detector-pro'); ?></label>
        <input type="text" value="<?php echo $settings->mytheme_color; ?>" class="mt-1 chpabd_form_settings include"
            name="mytheme_color">
    </div>


    <div class="col-md-5 mt-3">
        <label class="label"><?php echo __('Mytheme Button', 'chp-ads-block-detector-pro'); ?></label>
        <input type="text" value="<?php echo $settings->mytheme_button; ?>" class="chpabd_form_settings include"
            name="mytheme_button">
    </div>

</div>