Creating Custom Options Pages in WordPress

[zachary_sequoia]

I've been having a hard time getting this to work. The page shows up under stettings, the page loads fine and the form works... and I can enter a value... but when I hit submit the page refreshes to a blank white screen. The url at this point is:

http://www.(MYDOMAIN)/wp-admin/options.php

If I manually delete the /options.php it reloads the admin page and I can once again get to our new options page and the value has indeed been saved (at least it is showing up in the field.

Any thoughts? A validation issue?

[zachary_sequoia]

And since I couldn't find a link to the code as a single file, I couldn't really check mine against it... so here is what I've pasted if it helps:

<?php 

add_action('admin_menu', 'create_theme_options_page');

function create_theme_options_page() {
  add_options_page('Theme Options', 'Theme Options', 'administrator', basename(__FILE__), 'build_options_page');
}

function build_options_page() {
?>
  <div id="theme-options-wrap">
    <div class="icon32" id="icon-tools"> <br /> </div>

    <h2>My Theme Options</h2>
    <p>Take control of your theme, by overriding the default settings with your own specific preferences.</p>

    <form method="post" action="options.php">
	<?php settings_fields('plugin_options'); ?>
  	<?php do_settings_sections(basename(__FILE__)); ?>

      <p class="submit">
        <input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
      </p>
    </form>
  </div>
<?php }


add_action('admin_init', 'register_and_build_fields');
function register_and_build_fields() { 
  register_setting('plugin_options', 'plugin_options', 'validate_setting');
  add_settings_section('main_section', 'Main Settings', 'section_cb', basename(__FILE__));
  add_settings_field('banner_heading', 'Banner Heading:', 'banner_heading_setting', basename(__FILE__), 'main_section');
}


function validate_setting($plugin_options) {
  return $plugin_options;
}

function section_cb() {}

// Banner Heading
function banner_heading_setting() {
  $options = get_option('plugin_options');
  echo "<input name='plugin_options[banner_heading]' type='text' value='{$options['banner_heading']}' />";
}


?>

[tiagomorena]

Hi, Great tutorial. It worked fine, but I was hopping to use it as a featured image uploader for an editor to use, and it´s only working for administrators. I added a capability of 'manage_options' to editor role and added the panel to settings and to dashboard menu as well. It works fine with admin users, but gives 'a not enough permissions to change' message with editors. The nouce is different for editors and admins. Do you know any way I can make this work for me?

Best Regards,
Tiago

[whatinspiresu]

would you happen to have a downloadable file of this code?

Ive followed this tutorial, then tried typing along with you in the video tutorial. I dont understand how Im typing the exact same thing and still getting errors.

[GrillSgt]

Zachary,

Try changing

<form method="post" action="options.php">

to

<?php admin_url('admin.php') ?>

I did that and it fixed the problem I was having with options.php However, my problem is that nothing is saved to the database. Any ideas?

[paddy000]

Great tutorial.

However, how do you remove the custom logo?

Maybe a user of the theme changes their mind and doesn't want a logo, is there anyway to create a remove logo option?

Thanks a lot!

[paddy000]

Awesome tutorial.

However, once you've uploaded a custom logo?, how do you remove it?

How would I create a remove logo option? Thanks!

Hi there,

Anybody else having this issue??

Thanks

[rguy84]

You would need to add a button that says clear or something then modify the code block in example 18 to something like:

     if ( preg_match('/(jpg|jpeg|png|gif)$/', $image['type']) ) {
       $override = array('test_form' => false);
       // save the file, and store an array, containing its location in $file
       $file = wp_handle_upload( $image, $override );
       if (isset($_POST['removeLogo']){
         $plugin_options[$keys[$i]]= '';
       }
       $plugin_options[$keys[$i]] = $file['url'];
 
     } else {

NOTE: I didn't test this so I don't know the results.

[webdelux]

Any help is much appreciated, I am stuck. Cant figure out why my code isnt working... I am adding several fields into the custom options page. They are showing up in the page. The input and textareas seem to work but the options.php page does not show the saved data. The options page is showing no errors and I get a success message upon clicking save.

<?php

add_action('admin_menu', 'create_theme_options_page');

function create_theme_options_page() {
add_options_page('Theme Options', 'Theme Options', 'administrator','t_o', 'build_options_page');
}

function build_options_page() {
?>
<div id="theme-options-wrap">
<div class="icon32" id="icon-tools"> <br /> </div>

<h2>My Theme Options</h2>
<p>Take control of your theme, by overriding the default settings with your own specific preferences.</p>

<form method="post" action="options.php">
<?php settings_fields('plugin_options'); ?>
<?php do_settings_sections('t_o'); ?>
<p class="submit">
<input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
</p>
</form>
</div>
<?php
}
add_action('admin_init', 'register_and_build_fields');
function register_and_build_fields() {
register_setting('plugin_options', 'plugin_options', 'validate_setting');

add_settings_section('img_1_section', 'Image 1', 'section_cb','t_o');
add_settings_field('img_1', 'Image 1:', 'img_1_setting','t_o', 'img_1_section');
add_settings_field('img_1_text', 'Image 1 Text:', 'img_1_text','t_o', 'img_1_section');

add_settings_section('img_2_section', 'Image 2', 'section_cb','t_o');
add_settings_field('img_2', 'Image 2:', 'img_2_setting','t_o', 'img_2_section');
add_settings_field('img_2_text', 'Image 2 Text:', 'img_2_text','t_o', 'img_2_section');

add_settings_section('img_3_section', 'Image 3', 'section_cb','t_o');
add_settings_field('img_3', 'Image 3:', 'img_3_setting','t_o', 'img_3_section');
add_settings_field('img_3_text', 'Image 3 Text:', 'img_3_text','t_o', 'img_3_section');

add_settings_section('img_4_section', 'Image 4', 'section_cb','t_o');
add_settings_field('img_4', 'Image 4:', 'img_4_setting','t_o', 'img_4_section');
add_settings_field('img_4_text', 'Image 4 Text:', 'img_4_text','t_o', 'img_4_section');

add_settings_section('img_5_section', 'Image 5', 'section_cb','t_o');
add_settings_field('img_5', 'Image 5:', 'img_5_setting','t_o', 'img_5_section');
add_settings_field('img_1_text', 'Image 5 Text:', 'img_5_text','t_o', 'img_5_section');

add_settings_section('img_6_section', 'Image 6', 'section_cb','t_o');
add_settings_field('img_6', 'Image 6:', 'img_6_setting','t_o', 'img_6_section');
add_settings_field('img_6_text', 'Image 6 Text:', 'img_6_text','t_o', 'img_6_section');

add_settings_section('img_7_section', 'Image 7', 'section_cb','t_o');
add_settings_field('img_7', 'Image 7:', 'img_7_setting','t_o', 'img_7_section');
add_settings_field('img_7_text', 'Image 7 Text:', 'img_7_text','t_o', 'img_7_section');

add_settings_section('img_8_section', 'Image 8', 'section_cb','t_o');
add_settings_field('img_8', 'Image 8:', 'img_8_setting','t_o', 'img_8_section');
add_settings_field('img_8_text', 'Image 8 Text:', 'img_8_text','t_o', 'img_8_section');

add_settings_section('img_9_section', 'Image 9', 'section_cb','t_o');
add_settings_field('img_9', 'Image 9:', 'img_9_setting','t_o', 'img_9_section');
add_settings_field('img_9_text', 'Image 9 Text:', 'img_9_text','t_o', 'img_9_section');

add_settings_section('img_10_section', 'Image 10', 'section_cb','t_o');
add_settings_field('img_10', 'Image 10:', 'img_1_setting','t_o', 'img_10_section');
add_settings_field('img_10_text', 'Image 10 Text:', 'img_10_text','t_o', 'img_10_section');

add_settings_section('img_11_section', 'Image 11', 'section_cb','t_o');
add_settings_field('img_11', 'Image 11:', 'img_11_setting','t_o', 'img_11_section');
add_settings_field('img_11_text', 'Image 11 Text:', 'img_11_text','t_o', 'img_11_section');

add_settings_section('img_12_section', 'Image 12', 'section_cb','t_o');
add_settings_field('img_12', 'Image 12:', 'img_12_setting','t_o', 'img_12_section');
add_settings_field('img_12_text', 'Image 12 Text:', 'img_12_text','t_o', 'img_12_section');

add_settings_section('img_13_section', 'Image 13', 'section_cb','t_o');
add_settings_field('img_13', 'Image 13:', 'img_13_setting','t_o', 'img_13_section');
add_settings_field('img_13_text', 'Image 13 Text:', 'img_13_text','t_o', 'img_13_section');

add_settings_section('img_14_section', 'Image 14', 'section_cb','t_o');
add_settings_field('img_14', 'Image 14:', 'img_14_setting','t_o', 'img_14_section');
add_settings_field('img_14_text', 'Image 14 Text:', 'img_14_text','t_o', 'img_14_section');

add_settings_section('img_15_section', 'Image 15', 'section_cb','t_o');
add_settings_field('img_15', 'Image 15:', 'img_15_setting','t_o', 'img_15_section');
add_settings_field('img_15_text', 'Image 15 Text:', 'img_15_text','t_o', 'img_15_section');

}

// Image 1
function img_1_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_1]' type='text' value='{$options['img_1']}' />";
}

// Image 1 Text
function img_1_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_1_text]' type='text' value='{$options['img_1_text']}'></textarea>";
}

// Image 2
function img_2_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_2]' type='text' value='{$options['img_2']}' />";
}

// Image 2 Text
function img_2_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_2_text]' type='text' value='{$options['img_2_text']}'></textarea>";
}

// Image 3
function img_3_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_3]' type='text' value='{$options['img_3']}' />";
}

// Image 3 Text
function img_3_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_3_text]' type='text' value='{$options['img_3_text']}'></textarea>";
}

// Image 4
function img_4_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_4]' type='text' value='{$options['img_4']}' />";
}

// Image 4 Text
function img_4_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_4_text]' type='text' value='{$options['img_4_text']}'></textarea>";
}

// Image 5
function img_5_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_5]' type='text' value='{$options['img_5']}' />";
}


// Image 5 Text
function img_5_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_5_text]' type='text' value='{$options['img_5_text']}'></textarea>";
}

// Image 6
function img_6_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_6]' type='text' value='{$options['img_6']}' />";
}

// Image 6 Text
function img_6_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_6_text]' type='text' value='{$options['img_6_text']}'></textarea>";
}

// Image 7
function img_7_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_7]' type='text' value='{$options['img_7']}' />";
}

// Image 7 Text
function img_7_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_7_text]' type='text' value='{$options['img_7_text']}'></textarea>";
}

// Image 8
function img_8_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_8]' type='text' value='{$options['img_8']}' />";
}

// Image 8 Text
function img_8_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_8_text]' type='text' value='{$options['img_8_text']}'></textarea>";
}

// Image 9
function img_9_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_9]' type='text' value='{$options['img_9']}' />";
}

// Image 9 Text
function img_9_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_9_text]' type='text' value='{$options['img_9_text']}'></textarea>";
}

// Image 10
function img_10_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_10]' type='text' value='{$options['img_10']}' />";
}

// Image 10 Text
function img_10_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_10_text]' type='text' value='{$options['img_10_text']}'></textarea>";
}

// Image 11
function img_11_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_11]' type='text' value='{$options['img_11']}' />";
}

// Image 11 Text
function img_11_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_11_text]' type='text' value='{$options['img_11_text']}'></textarea>";
}

// Image 12
function img_12_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_12]' type='text' value='{$options['img_12']}' />";
}

// Image 12 Text
function img_12_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_12_text]' type='text' value='{$options['img_12_text']}'></textarea>";
}

// Image 13
function img_13_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_13]' type='text' value='{$options['img_13']}' />";
}

// Image 13 Text
function img_13_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_13_text]' type='text' value='{$options['img_13_text']}'></textarea>";
}

// Image 14
function img_14_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_14]' type='text' value='{$options['img_14']}' />";
}

// Image 14 Text
function img_14_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_14_text]' type='text' value='{$options['img_14_text']}'></textarea>";
}

// Image 15
function img_15_setting() {
$options = get_option('plugin_options');
echo "<input name='plugin_options[img_15]' type='text' value='{$options['img_15']}' />";
}

// Image 15 Text
function img_15_text() {
$options = get_option('plugin_options');
echo "<textarea name='plugin_options[img_15_text]' type='text' value='{$options['img_15_text']}'></textarea>";
}



function section_cb() {}

function validate_setting($plugin_options) {
return $plugin_options;
}

[paddy000]

You would need to add a button that says clear or something then modify the code block in example 18 to something like:

     if ( preg_match('/(jpg|jpeg|png|gif)$/', $image['type']) ) {
       $override = array('test_form' => false);
       // save the file, and store an array, containing its location in $file
       $file = wp_handle_upload( $image, $override );
       if (isset($_POST['removeLogo']){
         $plugin_options[$keys[$i]]= '';
       }
       $plugin_options[$keys[$i]] = $file['url'];
 
     } else {

NOTE: I didn't test this so I don't know the results.

Thanks for taking the time to answer, although I have no idea how I'd go about adding a remove logo button!

Cheers