WordPress Options Panel


 / Published in: PHP
 

  1. <?php
  2.  
  3. add_action('admin_menu', 'create_theme_options_page');
  4. add_action('admin_init', 'register_and_build_fields' );
  5.  
  6. function create_theme_options_page() {
  7. add_options_page('Theme Options', 'Theme Options', 'administrator', __FILE__, 'options_page_fn');
  8. }
  9.  
  10.  
  11. function register_and_build_fields(){
  12. register_setting( 'plugin_options', 'plugin_options', 'validate_setting' );
  13.  
  14. add_settings_section('main_section', 'Main Settings', 'section_text_fn', __FILE__);
  15.  
  16. add_settings_field('color_scheme', 'Color Scheme:', 'color_scheme_setting', __FILE__, 'main_section');
  17. add_settings_field('logo', 'Logo:', 'logo_setting', __FILE__, 'main_section'); // LOGO
  18. add_settings_field('banner_heading', 'Banner Heading:', 'banner_heading_setting', __FILE__, 'main_section');
  19. add_settings_field('adverting_information', 'Advertising Info:', 'advertising_information_setting', __FILE__, 'main_section');
  20.  
  21. add_settings_field('ad_one', 'Ad:', 'ad_setting_one', __FILE__, 'main_section'); // Ad1
  22. add_settings_field('ad_two', 'Second Ad:', 'ad_setting_two', __FILE__, 'main_section'); // Ad2
  23.  
  24. }
  25.  
  26.  
  27. function options_page_fn() {
  28. ?>
  29. <div id="theme-options-wrap" class="widefat">
  30. <div class="icon32" id="icon-tools"></div>
  31.  
  32. <h2>My Theme Options</h2>
  33. <p>Take control of your theme, by overriding the default settings with your own specific preferences.</p>
  34.  
  35. <form method="post" action="options.php" enctype="multipart/form-data">
  36. <?php settings_fields('plugin_options'); ?>
  37. <?php do_settings_sections(__FILE__); ?>
  38. <p class="submit">
  39. <input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
  40. </p>
  41. </form>
  42. </div>
  43. <?php
  44. }
  45.  
  46.  
  47. // Banner Heading
  48. function banner_heading_setting() {
  49. $options = get_option('plugin_options');
  50. echo "<input name='plugin_options[banner_heading]' type='text' value='{$options['banner_heading']}' />";
  51. }
  52.  
  53.  
  54. // Color Scheme
  55. function color_scheme_setting() {
  56. $options = get_option('plugin_options');
  57. $items = array("Red", "Green", "Blue");
  58.  
  59. echo "<select name='plugin_options[color_scheme]'>";
  60. foreach( $items as $item ) {
  61. $selected = ( $options['color_scheme'] === $item ) ? 'selected = "selected"' : '';
  62. echo "<option value='$item' $selected>$item</option>";
  63. }
  64. echo "</select>";
  65. }
  66.  
  67.  
  68. // Advertising info
  69. function advertising_information_setting() {
  70. $options = get_option('plugin_options');
  71. echo "<textarea name='plugin_options[advertising_information]' rows='10' cols='60' type='textarea'>{$options['advertising_information']}</textarea>";
  72. }
  73.  
  74.  
  75. // Ad one
  76. function ad_setting_one() {
  77. echo '<input type="file" name="ad_one" />';
  78. }
  79.  
  80.  
  81. // Ad two
  82. function ad_setting_two() {
  83. echo '<input type="file" name="ad_two" />';
  84. }
  85.  
  86.  
  87. // Logo
  88. function logo_setting() {
  89. echo '<input type="file" name="logo" />';
  90. }
  91.  
  92.  
  93. // This function can be used to validate the inputs
  94. function validate_setting($plugin_options) {
  95. $keys = array_keys($_FILES);
  96. $i = 0;
  97.  
  98. foreach( $_FILES as $image ) {
  99. // if a files was upload
  100. if ( $image['size'] ) {
  101. // if it is an image
  102. if ( preg_match('/(jpg|jpeg|png|gif)$/', $image['type']) ) {
  103. $override = array('test_form' => false);
  104. $file = wp_handle_upload($image, $override);
  105.  
  106. $plugin_options[$keys[$i]] = $file['url'];
  107. }
  108. else {
  109. $options = get_option('plugin_options');
  110. $plugin_options[$keys[$i]] = $options[$logo];
  111. wp_die('No image was uploaded.');
  112. }
  113. }
  114.  
  115. // else, retain the image that's already on file.
  116. else {
  117. $options = get_option('plugin_options');
  118. $plugin_options[$keys[$i]] = $options[$keys[$i]];
  119. }
  120. $i++;
  121. }
  122.  
  123. return $plugin_options;
  124. }
  125.  
  126.  
  127. function section_text_fn() {}
  128.  
  129.  
  130. // Add stylesheet (replace with your own)
  131. add_action('admin_head', 'admin_register_head');
  132. function admin_register_head() {
  133. $url = get_bloginfo('template_directory') . '/functions/options_page.css';
  134. echo "<link rel='stylesheet' href='$url' />\n";
  135. }

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: Nettuts on July 25, 2010

Just paste this into your functions.php file, save, and visit your dashboard. A new Theme Options panel will appear at the bottom.

You can then use: $options = getoption('pluginoptions'); echo $options['logo'] to access the properties. Replace "logo" with the name of the option.

Let me know if you have any questions!

Posted By: vagrantradio on August 10, 2010

It's a hell of a good start, thanks!

Posted By: Nettuts on August 10, 2010

Forgot to mention that this options panel can be downloaded here: http://github.com/JeffreyWay/WordPress-Theme-Options-Page

Posted By: flashmac on October 15, 2010

Hi JW, Thanks for this head start. Although, I think you meant this...

Posted By: flashmac on October 15, 2010

OK rubbish, the code didnt print. Without the tags: $options = getoption('pluginoptions'); print_r($options);

Posted By: flashmac on October 15, 2010

Hey.. this is most strange, you were right JW, but the code removes the underscrores. Replace the 'X' with an underscore. OK Im done here. $options = getXoption('pluginXoptions'); print_r($options);

You need to login to post a comment.