I created a settings page for my custom theme on WordPress and created the various metaboxes via Settings API.
To try to keep the page neater I created Nav Tabs, the only problem is that I can only save the metaboxes in the first section.
This is my code form:
<?php
// Check user capabilities
if (!current_user_can('manage_options')) {
return;
}
?>
<div class="wrap">
<?php settings_errors(); ?>
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<form method="post" action="options.php" enctype="multipart/form-data">
<?php
// Gestisce le tab di impostazione del tema
$active_tab = "primary-colors-options";
if (isset($_GET["tab"])) {
if ($_GET["tab"] == "primary-colors-options") {
$active_tab = "primary-colors-options";
settings_fields("heisenberg_sezione_colori_primari");
} else if ($_GET["tab"] == "neutral-colors-options") {
$active_tab = "neutral-colors-options";
settings_fields("heisenberg_sezione_colori_neutrali");
} else if ($_GET["tab"] == "header-options") {
$active_tab = "header-options";
settings_fields("heisenberg_header_options");
} else if ($_GET["tab"] == "footer-options") {
$active_tab = "footer-options";
settings_fields("heisenberg_footer_options");
} else {
$active_tab = "404-options";
settings_fields("heisenberg_404_options");
}
}
?>
<h2 class="nav-tab-wrapper">
<a href="?page=heisenberg-options&tab=primary-colors-options" class="nav-tab <?php if ($active_tab == 'primary-colors-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Colori Primari', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=neutral-colors-options" class="nav-tab <?php if ($active_tab == 'neutral-colors-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Colori Neutrali', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=header-options" class="nav-tab <?php if ($active_tab == 'header-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Header', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=footer-options" class="nav-tab <?php if ($active_tab == 'footer-options') {
echo 'nav-tab-active';
} ?>"><?php _e('Footer', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=404-options" class="nav-tab <?php if ($active_tab == '404-options') {
echo 'nav-tab-active';
} ?>"><?php _e('404', THEME_TEXT_DOMAIN); ?></a>
</h2>
<?php
do_settings_sections('heisenberg-options');
submit_button();
?>
</form>
</div>
This is my code for Settings API:
<?php
/*-------------------------------
* WordPress Settings API
-------------------------------*/
if (!isset($_GET["tab"]) || $_GET["tab"] == "primary-colors-options") {
add_settings_section(
'heisenberg_sezione_colori_primari',
__('Colori Primari', THEME_TEXT_DOMAIN),
'display_heisenberg_general_options_content',
'heisenberg-options'
);
function display_heisenberg_general_options_content()
{
echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
}
add_settings_field(
'colore_primario_1',
__('Colore Primario 1', THEME_TEXT_DOMAIN),
'colore_primario_1_callback',
'heisenberg-options',
'heisenberg_sezione_colori_primari'
);
register_setting(
'heisenberg_sezione_colori_primari',
'colore_primario_1'
);
function colore_primario_1_callback()
{
$colore_primario_1 = get_option('colore_primario_1');
if (isset($colore_primario_1) && $colore_primario_1 != '') {
$colore_primario_1 = esc_attr($colore_primario_1);
} else {
$colore_primario_1 = '#05400A';
}
echo "<input type='text' name='colore_primario_1' id='colore_primario_1' value='" . $colore_primario_1 . "' class='color-picker' data-alpha-enabled='true' />";
}
} elseif ($_GET["tab"] == "neutral-colors-options") {
add_settings_section(
'heisenberg_sezione_colori_neutrali',
__('Colori Neutrali', THEME_TEXT_DOMAIN),
'display_heisenberg_colori_neutrali_options_content',
'heisenberg-options'
);
function display_heisenberg_colori_neutrali_options_content()
{
echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
}
add_settings_field(
'colore_neutrale_1',
__('Colore Neutrale 1', THEME_TEXT_DOMAIN),
'colore_neutrale_1_callback',
'heisenberg-options',
'heisenberg_sezione_colori_neutrali'
);
register_setting(
'heisenberg_sezione_colori_neutrali',
'colore_neutrale_1'
);
function colore_neutrale_1_callback()
{
$colore_neutrale_1 = get_option('colore_neutrale_1');
if (isset($colore_neutrale_1) && $colore_neutrale_1 != '') {
$colore_neutrale_1 = esc_attr($colore_neutrale_1);
} else {
$colore_neutrale_1 = '#000';
}
echo "<input type='text' name='colore_neutrale_1' id='colore_neutrale_1' value='" . $colore_neutrale_1 . "' class='color-picker' data-alpha-enabled='true' />";
}
}
Thank you to those who will help out!
I created a settings page for my custom theme on WordPress and created the various metaboxes via Settings API.
To try to keep the page neater I created Nav Tabs, the only problem is that I can only save the metaboxes in the first section.
This is my code form:
<?php
// Check user capabilities
if (!current_user_can('manage_options')) {
return;
}
?>
<div class="wrap">
<?php settings_errors(); ?>
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<form method="post" action="options.php" enctype="multipart/form-data">
<?php
// Gestisce le tab di impostazione del tema
$active_tab = "primary-colors-options";
if (isset($_GET["tab"])) {
if ($_GET["tab"] == "primary-colors-options") {
$active_tab = "primary-colors-options";
settings_fields("heisenberg_sezione_colori_primari");
} else if ($_GET["tab"] == "neutral-colors-options") {
$active_tab = "neutral-colors-options";
settings_fields("heisenberg_sezione_colori_neutrali");
} else if ($_GET["tab"] == "header-options") {
$active_tab = "header-options";
settings_fields("heisenberg_header_options");
} else if ($_GET["tab"] == "footer-options") {
$active_tab = "footer-options";
settings_fields("heisenberg_footer_options");
} else {
$active_tab = "404-options";
settings_fields("heisenberg_404_options");
}
}
?>
<h2 class="nav-tab-wrapper">
<a href="?page=heisenberg-options&tab=primary-colors-options" class="nav-tab <?php if ($active_tab == 'primary-colors-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Colori Primari', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=neutral-colors-options" class="nav-tab <?php if ($active_tab == 'neutral-colors-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Colori Neutrali', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=header-options" class="nav-tab <?php if ($active_tab == 'header-options') {
echo 'nav-tab-active';
} ?> "><?php _e('Header', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=footer-options" class="nav-tab <?php if ($active_tab == 'footer-options') {
echo 'nav-tab-active';
} ?>"><?php _e('Footer', THEME_TEXT_DOMAIN); ?></a>
<a href="?page=heisenberg-options&tab=404-options" class="nav-tab <?php if ($active_tab == '404-options') {
echo 'nav-tab-active';
} ?>"><?php _e('404', THEME_TEXT_DOMAIN); ?></a>
</h2>
<?php
do_settings_sections('heisenberg-options');
submit_button();
?>
</form>
</div>
This is my code for Settings API:
<?php
/*-------------------------------
* WordPress Settings API
-------------------------------*/
if (!isset($_GET["tab"]) || $_GET["tab"] == "primary-colors-options") {
add_settings_section(
'heisenberg_sezione_colori_primari',
__('Colori Primari', THEME_TEXT_DOMAIN),
'display_heisenberg_general_options_content',
'heisenberg-options'
);
function display_heisenberg_general_options_content()
{
echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
}
add_settings_field(
'colore_primario_1',
__('Colore Primario 1', THEME_TEXT_DOMAIN),
'colore_primario_1_callback',
'heisenberg-options',
'heisenberg_sezione_colori_primari'
);
register_setting(
'heisenberg_sezione_colori_primari',
'colore_primario_1'
);
function colore_primario_1_callback()
{
$colore_primario_1 = get_option('colore_primario_1');
if (isset($colore_primario_1) && $colore_primario_1 != '') {
$colore_primario_1 = esc_attr($colore_primario_1);
} else {
$colore_primario_1 = '#05400A';
}
echo "<input type='text' name='colore_primario_1' id='colore_primario_1' value='" . $colore_primario_1 . "' class='color-picker' data-alpha-enabled='true' />";
}
} elseif ($_GET["tab"] == "neutral-colors-options") {
add_settings_section(
'heisenberg_sezione_colori_neutrali',
__('Colori Neutrali', THEME_TEXT_DOMAIN),
'display_heisenberg_colori_neutrali_options_content',
'heisenberg-options'
);
function display_heisenberg_colori_neutrali_options_content()
{
echo '<p>' . __('Lorem Ipsum.', THEME_TEXT_DOMAIN) . '</p>';
}
add_settings_field(
'colore_neutrale_1',
__('Colore Neutrale 1', THEME_TEXT_DOMAIN),
'colore_neutrale_1_callback',
'heisenberg-options',
'heisenberg_sezione_colori_neutrali'
);
register_setting(
'heisenberg_sezione_colori_neutrali',
'colore_neutrale_1'
);
function colore_neutrale_1_callback()
{
$colore_neutrale_1 = get_option('colore_neutrale_1');
if (isset($colore_neutrale_1) && $colore_neutrale_1 != '') {
$colore_neutrale_1 = esc_attr($colore_neutrale_1);
} else {
$colore_neutrale_1 = '#000';
}
echo "<input type='text' name='colore_neutrale_1' id='colore_neutrale_1' value='" . $colore_neutrale_1 . "' class='color-picker' data-alpha-enabled='true' />";
}
}
Thank you to those who will help out!
I solved it by changing the group name to each section by following this article: https://code.tutsplus.com/tutorials/the-wordpress-settings-api-part-5-tabbed-navigation-for-settings--wp-24971