{"id":2177,"date":"2022-05-28T09:33:56","date_gmt":"2022-05-28T09:33:56","guid":{"rendered":"https:\/\/chpadblock.com\/?post_type=docs&#038;p=2177"},"modified":"2022-07-14T19:26:43","modified_gmt":"2022-07-14T19:26:43","slug":"custom-modal","status":"publish","type":"docs","link":"https:\/\/chpadblock.com\/docs\/documentation\/custom-modal\/","title":{"rendered":"Custom Modal"},"content":{"rendered":"\n<p>If you want to add your design to the popup then it is possible. CHP Adblock Detector implemented Custom Modal Feature on v2.7.<\/p>\n\n\n\n<p>Here is the step to add a custom modal.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Design Folder Structure<\/h3>\n\n\n\n<p>You can place your design on anywhere inside the WordPress root folder. <\/p>\n\n\n\n<p>The folder structure of your design must be<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.\r\n\u251c\u2500\u2500 DESIGNNAME\n\u2502   \u251c\u2500\u2500 index.php\n\u2502   \u251c\u2500\u2500 settings.php (optional)\n\u2502   \u2514\u2500\u2500 screenshot.png<\/code><\/pre>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>index.php:<\/strong> Your design frontend code<\/li><li><strong>settings.php (optional):<\/strong> Your design custom settings HTML code. If your design doesn&#8217;t have any custom settings, You needn&#8217;t have this file.<\/li><li><strong>screenshot.png:<\/strong> Your design preview image<\/li><\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Add Design Information<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\r\n * Add Popup Modal Design Information\r\n * \r\n * @see chpadb\/theme\r\n * @since 3.8\r\n *\/\r\nadd_filter(\"chpadb\/theme\", function($theme){\r\n\r\n    $themeKey = \"THEMEKEY\";\r\n\r\n    $theme&#91;$themeKey] = array(\r\n        \"title\" => \"THEMENAME\",\r\n        \"settings\" => \"SETTINGS_ARRAY\",\r\n        \"defaults\" => \"SETTINGS_DEFAULT_VALUE\",\r\n        \"path\" => \"DESIGN_RELATIVE_PATH\",\r\n        'url' => \"DESIGN_RELATIVE_URL\"\r\n    );\r\n\r\n    return $theme;\r\n}, 10);<\/code><\/pre>\n\n\n\n<p>If you have custom settings of design, You have to provide the following information correctly.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">SETTINGS_ARRAY<\/h4>\n\n\n\n<p>If you have custom settings for your design, You can pass the <em>array of names<\/em> of settings input. Such as<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>array(\"mytheme_color\", \"mytheme_button_text\")<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">SETTINGS_DEFAULT_VALUE<\/h4>\n\n\n\n<p>If you have custom settings for your design, You have to pass the <em>array of default<\/em> values of settings input. Such as<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>array(\"#fff\", \"Hello\")<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">DESIGN_RELATIVE_PATH or DESIGN_RELATIVE_URL<\/h4>\n\n\n\n<p>Pass the relative path to the folder where the design is located. Suppose your design is <em><strong>mytheme<\/strong><\/em> and it is location on the folder as <strong><em>D:\/\/test\/wp-content\/themes\/templates\/mytheme\/index.php<\/em><\/strong> then <\/p>\n\n\n\n<p>DESIGN_RELATIVE_PATH = D:\/\/test\/wp-content\/themes\/templates\/<\/p>\n\n\n\n<p>DESIGN_RELATIVE_URL = https:\/\/example.com\/wp-content\/themes\/templates\/<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Add Design Custom Settings<\/h3>\n\n\n\n<p>If you have custom settings for your design, Your settings HTML code must have the following standard. <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Each setting (input, checkbox, select, or any form) must have a <strong><em>name attribute<\/em><\/strong> otherwise excluded.<\/li><li>Must have added these classes &#8220;<strong>chpabd_form_settings include<\/strong>&#8221; in form elements<\/li><\/ul>\n\n\n\n<p>To set the value, You have access to the <strong><em>$settings<\/em><\/strong> variable where you will find the value of the setting.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$settings->FORM_ELEMENT_NAME<\/code><\/pre>\n\n\n\n<p><strong><span style=\"text-decoration: underline;\"><em><a href=\"https:\/\/chpadblock.com\/docs\/custom-modal\/#1-toc-title\">Make sure you have given form element name in design infromation.<\/a><\/em><\/span><\/strong><\/p>\n\n\n\n<p>Below is the sample settings code.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"row\">\r\n    &lt;div class=\"col-md-5 mt-3\">\r\n        &lt;label class=\"label\">&lt;?php echo __('Color', 'chp-ads-block-detector-pro'); ?>&lt;\/label>\r\n        &lt;input type=\"text\" value=\"&lt;?php echo $settings->mytheme_color; ?>\" class=\"mt-1 chpabd_form_settings include\"\r\n            name=\"mytheme_color\">\r\n    &lt;\/div>\r\n\r\n\r\n    &lt;div class=\"col-md-5 mt-3\">\r\n        &lt;label class=\"label\">&lt;?php echo __('Mytheme Button', 'chp-ads-block-detector-pro'); ?>&lt;\/label>\r\n        &lt;input type=\"text\" value=\"&lt;?php echo $settings->mytheme_button; ?>\" class=\"chpabd_form_settings include\"\r\n            name=\"mytheme_button\">\r\n    &lt;\/div>\r\n\r\n&lt;\/div><\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"doc_category":[19],"doc_tag":[],"knowledge_base":[26],"class_list":["post-2177","docs","type-docs","status-publish","hentry","doc_category-developer","knowledge_base-documentation"],"acf":[],"_links":{"self":[{"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/docs\/2177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/comments?post=2177"}],"version-history":[{"count":8,"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/docs\/2177\/revisions"}],"predecessor-version":[{"id":2304,"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/docs\/2177\/revisions\/2304"}],"wp:attachment":[{"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/media?parent=2177"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/doc_category?post=2177"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/doc_tag?post=2177"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/chpadblock.com\/api\/wp\/v2\/knowledge_base?post=2177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}