{"id":163,"date":"2025-11-05T12:14:48","date_gmt":"2025-11-05T12:14:48","guid":{"rendered":"https:\/\/jaedpro.com\/wp-react-panel\/?post_type=docs&#038;p=163"},"modified":"2025-11-05T12:28:25","modified_gmt":"2025-11-05T12:28:25","password":"","slug":"configurations","status":"publish","type":"docs","link":"https:\/\/jaedpro.com\/wp-react-panel\/docs\/configurations\/","title":{"rendered":"Configurations"},"content":{"rendered":"\n<p class=\"has-black-color has-text-color has-link-color wp-elements-e3f88ec8be86ef0f3adc8b8b75f5a6ed\">This framework provides you some extra controls with a parameter <code>configs<\/code>. When you define the page data below you will find that parameter. <\/p>\n\n\n\n<div class=\"betterdocs-code-snippet-wrapper theme-light betterdocs-code-snippet-088199d1\"\n     id=\"betterdocs-code-snippet-088199d1\"\n     data-language=\"php\"\n     data-copy-button=\"true\">\n\n            <div class=\"betterdocs-code-snippet-header betterdocs-file-preview-header\">\n        <div class=\"betterdocs-file-preview-left\">\n                            <div class=\"betterdocs-traffic-lights\">\n                    <span class=\"traffic-light traffic-light-red\"><\/span>\n                    <span class=\"traffic-light traffic-light-yellow\"><\/span>\n                    <span class=\"traffic-light traffic-light-green\"><\/span>\n                <\/div>\n            \n            <div class=\"betterdocs-file-info\">\n                \n                                    <div class=\"betterdocs-file-name\">\n                        <span class=\"file-name-text\">sample-plugin.php<\/span>\n                    <\/div>\n                            <\/div>\n        <\/div>\n\n        <div class=\"betterdocs-file-preview-right\">\n                            <div class=\"betterdocs-code-snippet-copy-container\">\n                    <button class=\"betterdocs-code-snippet-copy-button\"\n                            type=\"button\"\n                            data-clipboard-target=\"#betterdocs-code-snippet-088199d1 .betterdocs-code-snippet-code code\"\n                            aria-label=\"Copy code to clipboard\">\n                        <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z\" fill=\"currentColor\"\/>\n                        <\/svg>\n                    <\/button>\n                                    <\/div>\n                    <\/div>\n        <\/div>\n    \n    <div class=\"betterdocs-code-snippet-content\">\n        \n        <pre class=\"betterdocs-code-snippet-code language-php\"><code>$page_data     = array(\n\t&#039;page_title&#039; =&gt; &#039;My Settings Page&#039;,\n\t&#039;menu_title&#039; =&gt; &#039;My Settings&#039;,\n\t&#039;capability&#039; =&gt; &#039;manage_options&#039;,\n\t&#039;menu_slug&#039;  =&gt; &#039;my-settings&#039;,\n\t&#039;icon&#039;       =&gt; &#039;dashicons-admin-generic&#039;,\n\t&#039;position&#039;   =&gt; 20,\n\t&#039;configs&#039;    =&gt; array(\n\t\t&#039;show_tabs&#039;       =&gt; false,\n\t\t&#039;wrapper_classes&#039; =&gt; &#039;my-plugin-wrapper&#039;,\n\t\t&#039;page_width&#039;      =&gt; &#039;medium&#039;, \/\/ mini ~ 2xl | small ~ 4xl | medium ~ 5xl | large ~ 6xl | extra ~ 8xl\n\t),\n);<\/code><\/pre>\n    <\/div>\n<\/div>\n\n<script type=\"text\/javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ Initialize copy functionality for this specific snippet\n    const snippet = document.getElementById('betterdocs-code-snippet-088199d1');\n    if (snippet && window.BetterDocsCodeSnippet) {\n        window.BetterDocsCodeSnippet.initCopyButton(snippet);\n    }\n});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\">Config: <strong>show_tabs<\/strong><\/h3>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color wp-elements-e1b58fd38b82dd3cbd18cf6da11313c5\">Controls whether the settings panel should display section tabs. Useful when you have multiple settings groups and want a clean, tab-based navigation.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Type<\/td><td>boolean<\/td><\/tr><tr><td>Default<\/td><td>false<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p class=\"has-black-color has-text-color has-link-color wp-elements-a353aeef423fbc7266b0baf28f2268fb\"><strong>Possible Values:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>true \u2014 Display tabs for each settings section<\/li>\n\n\n\n<li>false \u2014 Hide tabs and render all sections in one continuous page<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Config:\u00a0wrapper_classes<\/strong><\/h3>\n\n\n\n<p>Adds custom CSS classes to the main wrapper container. Use this to style and customise layout spacing or theme consistency with the admin UI.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Type<\/td><td>string<\/td><\/tr><tr><td>Default<\/td><td>no default<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Possible Values:<\/strong> <em>(example usage)<\/em><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>&#8220;my-plugin-wrapper&#8221;<\/li>\n\n\n\n<li>&#8220;wp-ui-theme dark p-6&#8221;<\/li>\n\n\n\n<li>Custom Tailwind \/ CSS utility classes<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Config:\u00a0page_width<\/strong><\/h3>\n\n\n\n<p>Specifies the container max-width for the settings page. Ideal for controlling UI readability based on content density.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td>Type<\/td><td>string<\/td><\/tr><tr><td>Default<\/td><td>medium<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Possible Values<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th><strong>Value<\/strong><\/th><th><strong>Meaning \/ Max Width<\/strong><\/th><\/tr><\/thead><tbody><tr><td>mini<\/td><td>2xl width (very narrow)<\/td><\/tr><tr><td>small<\/td><td>4xl width<\/td><\/tr><tr><td>medium<\/td><td>5xl width <em>(default)<\/em><\/td><\/tr><tr><td>large<\/td><td>6xl width<\/td><\/tr><tr><td>extra<\/td><td>8xl width (very wide)<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This framework provides you some extra controls with a parameter configs. When you define the page data below you will find that parameter. Config: show_tabs Controls whether the settings panel should display section tabs. Useful when you have multiple settings groups and want a clean, tab-based navigation. Type boolean Default false Possible Values: Config:\u00a0wrapper_classes Adds [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"doc_category":[3],"doc_tag":[],"class_list":["post-163","docs","type-docs","status-publish","hentry","doc_category-quick-start"],"blocksy_meta":[],"year_month":"2026-05","word_count":154,"total_views":0,"reactions":{"happy":0,"normal":0,"sad":0},"author_info":{"name":"Jaed Mosharraf","author_nicename":"jaedm97","author_url":"https:\/\/jaedpro.com\/wp-react-panel\/author\/jaedm97\/"},"doc_category_info":[{"term_name":"Quick Start","term_url":"https:\/\/jaedpro.com\/wp-react-panel\/docs-category\/quick-start\/"}],"doc_tag_info":[],"_links":{"self":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs\/163","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":17,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs\/163\/revisions"}],"predecessor-version":[{"id":182,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/docs\/163\/revisions\/182"}],"wp:attachment":[{"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/doc_category?post=163"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/jaedpro.com\/wp-react-panel\/wp-json\/wp\/v2\/doc_tag?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}