Ashley Cameron Design

Ashley Cameron Design

Custom Options Panel

This post was last updated: Sep 3, 2020
SnippetsWordPress

About a 1 minute read

"Every great design begins with an even better story."

Lorinda Mamo, designer


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
<?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_text_fn', __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" />'; }

// This function can be used to validate the inputs
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 { // else, retain the image that's already on file.
            $options = get_option('plugin_options');
            $plugin_options[$keys[$i]] = $options[$keys[$i]];
        }
        $i++;
    }
    return $plugin_options;
}
   
function section_text_fn() {}

// Add stylesheet (replace with your own)
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";
} ?>