{"id":3714,"date":"2021-03-06T16:28:04","date_gmt":"2021-03-06T16:28:04","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=3714"},"modified":"2022-02-17T07:13:46","modified_gmt":"2022-02-17T07:13:46","slug":"tabbed-admin-page","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/wordpress\/admin-area\/creating-admin-ui-elements\/tabbed-admin-page","title":{"rendered":"Tabbed admin page"},"content":{"rendered":"\n<p>To separate your admin page into separate tabs you can use the following for your page<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Pre HTML Output<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  \/\/----- SETUP FOR TABBED PAGE CONTENT -----\r\n  $tab = isset($_GET&#91;'tab']) ? intval($_GET&#91;'tab']) : 0;\r\n\t$tab_Selected = array();\r\n\t$tab_Selected = array_fill(0, 5, \"\");\t\t\/\/Fill an array from index 0, # items long, with default value \"\"\r\n\t$tab_Selected&#91;$tab] = \"nav-tab-active\";<\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">HTML Output<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\r\n  $HtmlOutput = '';\r\n  \r\n  \/\/START OF PAGE\r\n  $PageTitle = get_admin_page_title();\r\n  $HtmlOutput .= &lt;&lt;&lt;_END\r\n    &lt;div class=\"wrap\">\r\n      &lt;h1>$PageTitle&lt;\/h1>\r\n    \r\n      &lt;!-- Page Tabs -->\r\n      &lt;nav class=\"nav-tab-wrapper\">\r\n        &lt;a href=\"?page=MY-PAGE-SLUG\" class=\"nav-tab $tab_Selected&#91;0]\" >TAB_NAME_0&lt;\/a>\r\n        &lt;a href=\"?page=MY-PAGE-SLUG&amp;tab=1\" class=\"nav-tab $tab_Selected&#91;1]\" >TAB_NAME_1&lt;\/a>\r\n        &lt;a href=\"?page=MY-PAGE-SLUG&amp;tab=2\" class=\"nav-tab $tab_Selected&#91;2]\" >TAB_NAME_2&lt;\/a>\r\n      &lt;\/nav>\r\n\r\n      &lt;div class=\"tab-content\">\r\n_END;\r\n\r\n  if ($tab == 0)\r\n  {\r\n    \/\/-----------------------------\r\n    \/\/-----------------------------\r\n    \/\/----- TAB 0 -           -----\r\n    \/\/-----------------------------\r\n    \/\/-----------------------------\r\n    $HtmlOutput .= &lt;&lt;&lt;_END\r\n      This is tab 0 content\r\n_END;\r\n  }\r\n  else if ($tab == 1)\r\n  {\r\n    \/\/-----------------------------\r\n    \/\/-----------------------------\r\n    \/\/----- TAB 1 -           -----\r\n    \/\/-----------------------------\r\n    \/\/-----------------------------\r\n    $HtmlOutput .= &lt;&lt;&lt;_END\r\n      This is tab 1 content\r\n_END;\r\n  }\r\n  else if ($tab == 2)\r\n  {\r\n    \/\/-----------------------------\r\n    \/\/-----------------------------\r\n    \/\/----- TAB 2 -           -----\r\n    \/\/-----------------------------\r\n    \/\/-----------------------------\r\n    $HtmlOutput .= &lt;&lt;&lt;_END\r\n      This is tab 2 content\r\n_END;\r\n  }\r\n  \r\n  \/\/END OF PAGE\r\n  $HtmlOutput .= &lt;&lt;&lt;_END\r\n      &lt;\/div>  &lt;!-- &lt;div class=\"tab-content\"> -->\r\n    &lt;\/div>    &lt;!-- &lt;div class=\"wrap\"> -->\r\n_END;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>To separate your admin page into separate tabs you can use the following for your page Pre HTML Output HTML Output<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[292],"tags":[],"class_list":["post-3714","post","type-post","status-publish","format-standard","hentry","category-creating-admin-ui-elements"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3714","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=3714"}],"version-history":[{"count":6,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3714\/revisions"}],"predecessor-version":[{"id":3723,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/3714\/revisions\/3723"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=3714"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=3714"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=3714"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}