WordPress custom theme options

In: WordPress on 01.09.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.


My Theme Options

Take control of your theme, by overriding the default settings with your own specific preferences.

"; } // Color Scheme function color_scheme_setting() { $options = get_option('plugin_options'); $items = array("Red", "Green", "Blue"); echo ""; } // Advertising info function advertising_information_setting() { $options = get_option('plugin_options'); echo ""; } // Ad one function ad_setting_one() { echo ''; } // Ad two function ad_setting_two() { echo ''; } // Logo function logo_setting() { echo ''; } 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 "n"; } ?>
In order to style theme, use Jefery Way's CSS settings for this WordPress custom theme options:
#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!