I’ve followed the tutorial found here: Creating Custom Options Pages in WordPress » SitePoint to add a page for adding a logo and changing out the theme’s stylesheet. It works just fine with one small issue - there’s no visible status update when you save - the yellow box that says “Settings Saved.” Without that, there’s really no way to know that you were successful in making changes.
I’ve watched the video tutorial, but couldn’t see anything different in what he did. Is it possible that recent updates to Wordpress require something else in the code?
<?php
// This file adds a "Theme Options" page under "Appearance" and allows the user to select a stylesheet
add_action('admin_menu', 'create_theme_options_page');
function create_theme_options_page() {
add_theme_page('Theme Options', 'Theme Options', 'administrator', __FILE__, 'build_options_page');
}
function build_options_page() {
?>
<div id="theme-options-wrap">
<div class="icon32" id="icon-tools"><br /></div>
<h2>Theme Options</h2>
<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><!-- theme options wrap -->
<?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', ' ', 'section_cb', __FILE__);
add_settings_field('logo','Logo Upload','logo_setting',__FILE__,'main_section');
add_settings_field('color_scheme', 'Color Scheme', 'color_scheme_setting', __FILE__, 'main_section');
}
function color_scheme_setting(){
$options = get_option('plugin_options');
$items = array('default', 'light');
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>";
echo "<p>Depending on your background color or image, you may wish to invert the text colors on your website.</p>";
}
// logo
function logo_setting(){
echo "<input type='file' name='logo' />";
echo "<p>Your logo should be no larger than 250px wide and 125px high.</p>";
}
function section_cb() {}
function validate_setting($plugin_options) {
$keys = array_keys($_FILES);
$i = 0;
foreach( $_FILES as $image ) {
// if a file was uploaded
if ( $image['size'] ) {
// is it an image?
if ( preg_match('/(jpg|jpeg|png|gif)$/i', $image['type']) ) {
$override = array('test_form' => false);
$file = wp_handle_upload($image, $override);
$plugin_options[$keys[$i]] = $file['url'];
}
else {
wp_die('No image was uploaded');
}
}
else {
$options = get_option('plugin_options');
$plugin_options[$keys[$i]] = $options[$keys[$i]];
}
$i++;
}
return $plugin_options;
}
Thanks for looking this over.
Mmmmm, seems like everything is ok in there…
I suspect it is due to a recent Wordpress update.
You need an if statement to check and see if the options are saved and if they are you need to tell it to display the message. That if would look like so: <?php if( isset($_GET['settings-updated']) ) { ?><div id="message" class="updated"><p><strong><?php _e('Settings saved. Visit your site to see the changes.') ?></strong></p></div><?php } ?>.
Assuming you want the message to display above the title, the final code would look like so:
<?php
// This file adds a "Theme Options" page under "Appearance" and allows the user to select a stylesheet
add_action('admin_menu', 'create_theme_options_page');
function create_theme_options_page() {
add_theme_page('Theme Options', 'Theme Options', 'administrator', __FILE__, 'build_options_page');
}
function build_options_page() {
?>
<div id="theme-options-wrap">
<?php if( isset($_GET['settings-updated']) ) { ?>
<div id="message" class="updated">
<p><strong><?php _e('Settings saved. Visit your site to see the changes.') ?></strong></p>
</div>
<?php } ?>
<div class="icon32" id="icon-tools"><br /></div>
<h2>Theme Options</h2>
<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><!-- theme options wrap -->
<?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', ' ', 'section_cb', __FILE__);
add_settings_field('logo','Logo Upload','logo_setting',__FILE__,'main_section');
add_settings_field('color_scheme', 'Color Scheme', 'color_scheme_setting', __FILE__, 'main_section');
}
function color_scheme_setting(){
$options = get_option('plugin_options');
$items = array('default', 'light');
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>";
echo "<p>Depending on your background color or image, you may wish to invert the text colors on your website.</p>";
}
// logo
function logo_setting(){
echo "<input type='file' name='logo' />";
echo "<p>Your logo should be no larger than 250px wide and 125px high.</p>";
}
function section_cb() {}
function validate_setting($plugin_options) {
$keys = array_keys($_FILES);
$i = 0;
foreach( $_FILES as $image ) {
// if a file was uploaded
if ( $image['size'] ) {
// is it an image?
if ( preg_match('/(jpg|jpeg|png|gif)$/i', $image['type']) ) {
$override = array('test_form' => false);
$file = wp_handle_upload($image, $override);
$plugin_options[$keys[$i]] = $file['url'];
}
else {
wp_die('No image was uploaded');
}
}
else {
$options = get_option('plugin_options');
$plugin_options[$keys[$i]] = $options[$keys[$i]];
}
$i++;
}
return $plugin_options;
}
That is perfect, thank you.
As a follow up - would it be difficult to display the image uploaded right there on the page? I’m able to add it easily into the theme, but that method
<img src="<?php echo $options['logo']; ?>" />
doesn’t work here. I can live without it, but if it’s something simple I’m overlooking, I’d appreciate the help.
Thanks again.