Creating Custom Options Pages in WordPress

joshmobiles82 · August 31, 2010, 10:06am

This topic is totally new to me. I find it so informative. Thanks for the post.

raydenx · August 30, 2010, 3:05am

Thanks for the wonderful info about adding to different sections of the WordPress admin.

I’ve always wondered how to do that.

kohoutek · August 27, 2010, 1:02pm

This is a fantastic write-up and comes at a most convenient time!

Off Topic:

I rated the article but it doesn’t show up. The ratings functionality seems out of order.

frankbi · October 28, 2010, 5:00am

Thank You, Thank You. This was GREAT!

sidsevensix · October 30, 2010, 2:34am

Thank you for the example code.
It cleared alot of things off and gave me a base to work off of.

with the logo upload, I’m renaming the file to logo.jpg and then uploding it.
however everytime I run the script the new file saved in the upload folder increments the file name.

logo1.jpg
logo2.jpg
logo3.jpg… etc…

I would like to simply overwrite the one file…
So logo.jpg is overwritten every time a new upload on the settings page me made…

Thanks again…
hope to hear from you soon…

zachary_sequoia · November 3, 2010, 6:36am

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 · November 3, 2010, 6:39am

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 · November 12, 2010, 7:11pm

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 · February 11, 2011, 5:00am

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 · March 20, 2011, 6:15am

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 · March 31, 2011, 8:50pm

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 · April 4, 2011, 4:34pm

Hi there,

Anybody else having this issue??

Thanks

rguy84 · April 4, 2011, 5:57pm

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.

system · April 7, 2011, 10:27pm

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>

&lt;h2&gt;My Theme Options&lt;/h2&gt;
&lt;p&gt;Take control of your theme, by overriding the default settings with your own specific preferences.&lt;/p&gt;

&lt;form method="post" action="options.php"&gt;
    &lt;?php settings_fields('plugin_options'); ?&gt;
    &lt;?php do_settings_sections('t_o'); ?&gt;
  &lt;p class="submit"&gt;
    &lt;input name="Submit" type="submit" class="button-primary" value="&lt;?php esc_attr_e('Save Changes'); ?&gt;" /&gt;
  &lt;/p&gt;
&lt;/form&gt;

</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 · April 13, 2011, 2:53pm

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.

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

Cheers