WordPress custom theme options

01.Sep.2010 by Dejan Jacimovic

As I was surfing the net I have stumbled upon Jeffrey Way’s theme options page. Basic and simple option page that let’s you download the code in order to start making your own options page on your custom theme. If you are into WordPress – one day you will need it – so better don’t forget this link.

This snippet shows copy of Jeffrey Way’s admin menu for WordPress theme options taken from GitHub. It will work if you simply copy it in your theme functions.php file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<?php
add_action('admin_menu', 'create_theme_options_page');
add_action('admin_init', 'register_and_build_fields');
 
function create_theme_options_page() {
   add_options_page('Theme Options', 'Theme Options', 'administrator', __FILE__, 'options_page_fn');
}
 
function register_and_build_fields() {
   register_setting('plugin_options', 'plugin_options', 'validate_setting');
 
   add_settings_section('main_section', 'Main Settings', 'section_cb', __FILE__);
 
   add_settings_field('color_scheme', 'Color Scheme:', 'color_scheme_setting', __FILE__, 'main_section');
   add_settings_field('logo', 'Logo:', 'logo_setting', __FILE__, 'main_section'); // LOGO
   add_settings_field('banner_heading', 'Banner Heading:', 'banner_heading_setting', __FILE__, 'main_section');
   add_settings_field('adverting_information', 'Advertising Info:', 'advertising_information_setting', __FILE__, 'main_section');
 
   add_settings_field('ad_one', 'Ad:', 'ad_setting_one', __FILE__, 'main_section'); // Ad1
   add_settings_field('ad_two', 'Second Ad:', 'ad_setting_two', __FILE__, 'main_section'); // Ad2
}
 
function options_page_fn() {
?>
   <div id="theme-options-wrap" class="widefat">
      <div class="icon32" id="icon-tools"></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" enctype="multipart/form-data">
         <?php settings_fields('plugin_options'); ?>
         <?php do_settings_sections(__FILE__); ?>
         <p class="submit">
            <input name="Submit" type="submit" class="button-primary" value="<?php esc_attr_e('Save Changes'); ?>" />
         </p>
   </form>
</div>
<?php
}
 
// Banner Heading
function banner_heading_setting() {
   $options = get_option('plugin_options');
   echo "<input name='plugin_options[banner_heading]' type='text' value='{$options['banner_heading']}' />";
}
 
// Color Scheme
function color_scheme_setting() {
   $options = get_option('plugin_options');
   $items = array("Red", "Green", "Blue");
 
   echo "<select name='plugin_options[color_scheme]'>";
   foreach ($items as $item) {
      $selected = ( $options['color_scheme'] === $item ) ? 'selected = "selected"' : '';
      echo "<option value='$item' $selected>$item</option>";
   }
   echo "</select>";
}
 
// Advertising info
function advertising_information_setting() {
   $options = get_option('plugin_options');
   echo "<textarea name='plugin_options[advertising_information]' rows='10' cols='60' type='textarea'>{$options['advertising_information']}</textarea>";
}
 
// Ad one
function ad_setting_one() {
   echo '<input type="file" name="ad_one" />';
}
 
// Ad two
function ad_setting_two() {
   echo '<input type="file" name="ad_two" />';
}
 
// Logo
function logo_setting() {
   echo '<input type="file" name="logo" />';
}
 
function validate_setting($plugin_options) {
   $keys = array_keys($_FILES);
   $i = 0;
 
   foreach ($_FILES as $image) {
      // if a files was upload
      if ($image['size']) {
         // if it is an image
         if (preg_match('/(jpg|jpeg|png|gif)$/', $image['type'])) {
            $override = array('test_form' => false);
            $file = wp_handle_upload($image, $override);
 
            $plugin_options[$keys[$i]] = $file['url'];
         } else {
            $options = get_option('plugin_options');
            $plugin_options[$keys[$i]] = $options[$logo];
            wp_die('No image was uploaded.');
         }
      }
 
      // else, retain the image that's already on file.
      else {
         $options = get_option('plugin_options');
         $plugin_options[$keys[$i]] = $options[$keys[$i]];
      }
      $i++;
   }
 
   return $plugin_options;
}
 
function section_cb() {}
 
// Add stylesheet
add_action('admin_head', 'admin_register_head');
 
function admin_register_head() {
   $url = get_bloginfo('template_directory') . '/functions/options_page.css';
   echo "<link rel='stylesheet' href='$url' />n";
}
?>

In order to style theme, use Jefery Way’s CSS settings for this WordPress custom theme options:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

#theme-options-wrap {
	width: 700px;
	padding: 3em;
	background: white;
	background: -webkit-gradient(linear, left top, left bottom, from(#f4f2f2), color-stop(.2, white), color-stop(.8, #f4f2f2), to(white));
	border-top: 1px solid white;
}
 
#theme-options-wrap #icon-tools {
	position: relative;
	top: -10px;
}
#theme-options-wrap input, #theme-options-wrap textarea {
	padding: .7em;
}

After you apply both script and style – your custom theme options will look like options on the picture below. Have a lots of fun customizing it!

Back

Articles you also might like