I am creating wordpress theme on a single options page. I have customized the default do_settings_fields and do_settings_sections functions. my fields are displaying fine but when i am trying to save it, It won't save.
function amna_theme_options_page () {
wp_enqueue_style( 'theme-options-css', get_template_directory_uri() . '/inc/admin/assets/css/theme-options-css.css' );
settings_errors();
?>
<div class="wrap flex-tab">
<form action='' method='post' class="amna-fields">
<?php
amna_do_settings_fields('amna-fields-group', 'theme_amna');
amna_do_settings_sections('theme_amna');
submit_button();
?>
</form>
</div>
<?php }
And these are the functions i have override to display fields
function amna_do_settings_sections($page) {
global $wp_settings_sections, $wp_settings_fields;
if ( !isset($wp_settings_sections) || !isset($wp_settings_sections[$page]) )
return;
foreach( (array) $wp_settings_sections[$page] as $section ) {
echo "<h3>{$section['title']}</h3>\n";
call_user_func($section['callback'], $section);
if ( !isset($wp_settings_fields) ||
!isset($wp_settings_fields[$page]) ||
!isset($wp_settings_fields[$page][$section['id']]) )
continue;
echo '<div class="settings-form-wrapper">';
amna_do_settings_fields($page, $section['id']);
echo '</div>';
}
}
function amna_do_settings_fields($page, $section) {
global $wp_settings_fields;
if ( ! isset( $wp_settings_fields[ $page ][ $section ] ) ) {
return;
}
foreach ( (array) $wp_settings_fields[$page][$section] as $field ) { ?>
<div class="settings-form-row flex-tab">
<?php if ( !empty($field['args']['label_for']) )
echo '<p><label for="' . $field['args']['label_for'] . '">' .
$field['title'] . '</label><br />';
else
call_user_func($field['callback'], $field['args']);
echo '</p>';
echo '</div>';
}
}
I am creating wordpress theme on a single options page. I have customized the default do_settings_fields and do_settings_sections functions. my fields are displaying fine but when i am trying to save it, It won't save.
function amna_theme_options_page () {
wp_enqueue_style( 'theme-options-css', get_template_directory_uri() . '/inc/admin/assets/css/theme-options-css.css' );
settings_errors();
?>
<div class="wrap flex-tab">
<form action='' method='post' class="amna-fields">
<?php
amna_do_settings_fields('amna-fields-group', 'theme_amna');
amna_do_settings_sections('theme_amna');
submit_button();
?>
</form>
</div>
<?php }
And these are the functions i have override to display fields
function amna_do_settings_sections($page) {
global $wp_settings_sections, $wp_settings_fields;
if ( !isset($wp_settings_sections) || !isset($wp_settings_sections[$page]) )
return;
foreach( (array) $wp_settings_sections[$page] as $section ) {
echo "<h3>{$section['title']}</h3>\n";
call_user_func($section['callback'], $section);
if ( !isset($wp_settings_fields) ||
!isset($wp_settings_fields[$page]) ||
!isset($wp_settings_fields[$page][$section['id']]) )
continue;
echo '<div class="settings-form-wrapper">';
amna_do_settings_fields($page, $section['id']);
echo '</div>';
}
}
function amna_do_settings_fields($page, $section) {
global $wp_settings_fields;
if ( ! isset( $wp_settings_fields[ $page ][ $section ] ) ) {
return;
}
foreach ( (array) $wp_settings_fields[$page][$section] as $field ) { ?>
<div class="settings-form-row flex-tab">
<?php if ( !empty($field['args']['label_for']) )
echo '<p><label for="' . $field['args']['label_for'] . '">' .
$field['title'] . '</label><br />';
else
call_user_func($field['callback'], $field['args']);
echo '</p>';
echo '</div>';
}
}
Share
Improve this question
edited Jun 27, 2020 at 18:02
Atif Aqeel
asked Jun 27, 2020 at 17:49
Atif AqeelAtif Aqeel
19312 bronze badges
4
|
2 Answers
Reset to default 2So I could understand why you "customized" (i.e. use your own version of) the do_settings_sections()
and do_settings_fields()
functions — because you want to use div
and not table
, right?
But if it's just about styling, you could actually just use CSS to style the table so that it doesn't look like a table; however, you'll have to try doing that on your own. And WordPress may change the global variables (their name and/or data structure) in the future, so just keep that in mind, i.e. you'll have to make sure that your code is in sync with the original functions in the current WordPress release.
Making your form works properly (e.g. the fields are saved in the correct database option)
As I said in the comments, your form should submit to options.php
(i.e. <form action="options.php" ...>
) and call register_setting()
in your code to register your form or its settings group, and the database option (the second parameter for that function).
And in the amna_theme_options_page()
, there's no need to call the amna_do_settings_fields()
because it's already being called in and should only be called in amna_do_settings_sections()
which renders all the fields for your settings form, whereby each field should belong in a specific section. So instead, call settings_fields()
so that WordPress knows what the options/settings page is and the database option to be updated:
settings_fields( 'amna-fields-group' ); // do this
//amna_do_settings_fields('amna-fields-group', 'theme_amna'); // not this
Another issue I noticed is that in amna_do_settings_fields()
, if the label_for
arg is not empty, then the field is not actually going to be rendered because the call_user_func()
is only being called in the else
part.
So it should be more like so:
echo '<p>';
if ( ! empty( $field['args']['label_for'] ) ) {
echo '<label for="' . esc_attr( $field['args']['label_for'] ) . '">' . $field['title'] . '</label>';
} else {
echo $field['title'];
}
call_user_func( $field['callback'], $field['args'] );
echo '</p>';
Additionally, you should pass the slug of your settings page to settings_errors()
, e.g. settings_errors( 'theme_amna' );
if the slug is theme_amna
. And if you don't do that, then you'd likely see the same settings errors/messages printed twice.
Also, admin stylesheet files (.css
) should be enqueued via the admin_enqueue_scripts
hook. For example, to enqueue only on your settings page:
add_action( 'admin_enqueue_scripts', 'my_plugin_load_styles' );
function my_plugin_load_styles( $hook_suffix ) {
if ( $hook_suffix === get_plugin_page_hook( 'theme_amna', '' ) ) {
wp_enqueue_style( 'theme-options-css',
get_template_directory_uri() . '/inc/admin/assets/css/theme-options-css.css' );
}
}
Working Example
You can find it on GitHub.
It's a full working example which gives you a settings page at Settings → Test.
I am posting answer of my own question because of people reference and did not find solution anywhere.
Basically if you are changing default do_settings_section(); and do_settings_fields(); the submit button will not find where to submit data because default function was override with new one. In Such case you will have to write you submit button function to execute the code and save the fields data into the database.
So instead of submit_button(); i have write my button
<p class="submit"><input type="submit" class="button-primary" value="<?php _e( 'Save changes', 'amna_save_settings' ); ?>" /></p>
Then on save button code
if(($_SERVER['REQUEST_METHOD'] == 'POST') && (isset($_POST['amna_fields']))) {
update_site_option( 'amna_fields', $_POST['amna_fields'] );
}
options.php
and there should be a call toregister_setting()
in your code. – Sally CJ Commented Jun 28, 2020 at 11:23