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!