WordPress: Adding Admin Pages, Setting Data and Upload Functionality in the Dashboard
I have found that there are four steps to adding admin pages, setting data and upload functionality in the dashboard:
- Add Theme Options Page
- Prime Theme Settings
- Populate Theme Options Page
- Add Upload Code
Add Theme Options Page
This is the easiest step by far. Add the following code to your functions.php file within you <?php and ?> tags.
1 2 3 4 5 6 |
/*Add Theme Options Page*/ add_action('admin_menu', 'custom_theme_options'); function custom_theme_options() { add_theme_page('Theme Options', 'Theme Options', 'edit_theme_options', 'theme-options', 'theme_options'); } |
This will add the function ‘custom_theme_options’ to the admin_menu hook. We then define the ‘custom_theme_options’ with pur peramiters in the following format:
add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function );
We will define the ‘theme_options’ function later.
More info on this section can be found on the WordPress Codex.
Prime the Theme Settings
Next we must prime the theme for the settings it is going to hold. Use the following code as a guideline:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/*Prime Theme Settings*/ function register_theme_settings() { /*Logo*/ register_setting( 'custom_theme_name', 'logo' ); /*Contact*/ register_setting( 'custom_theme_name', 'phone_number' ); register_setting( 'custom_theme_name', 'email' ); /*Tag Images*/ register_setting( 'custom_theme_name', 'service_1_image' ); register_setting( 'custom_theme_name', 'service_1_link' ); register_setting( 'custom_theme_name', 'service_2_image' ); register_setting( 'custom_theme_name', 'service_2_link' ); register_setting( 'custom_theme_name', 'service_3_image' ); register_setting( 'custom_theme_name', 'service_3_link' ); /*Areas*/ register_setting( 'custom_theme_name', 'area_1_title' ); register_setting( 'custom_theme_name', 'area_1_text' ); register_setting( 'custom_theme_name', 'area_2_title' ); register_setting( 'custom_theme_name', 'area_2_text' ); /*Analytics*/ register_setting( 'custom_theme_name', 'analytics' ); } add_action( 'admin_init', 'register_theme_settings' ); |
In this example we are using the ‘custom_theme_name’ as a container to hold our values. Them we add a line for each value we want to hold such as ‘logo’, ‘phone_number’ and ’email’. Finally we register our values with WordPress with the add_action( ‘admin_init’, ‘register_theme_settings’ ) line.
Populate Theme Options Page
Next we have to add the code that will be displayed on the page. First we declare the function name ‘theme_options’ as we set back in step one. Then we start our form with the <form method=”post” action=”options.php”> tag. From here we tell WordPress what settings we want to load and push to with the <?php settings_fields( ‘custom_theme_name’ ); ?> and <?php do_settings_sections( ‘custom_theme_name’ ); ?> tags. We then build our form with standard HTML pulling in our previous theme values with tags like <?php echo get_option(‘phone_number’); ?>. Once your form values are in finish of the form with the <?php submit_button(); ?> in place of your submit button and finish your form with </form> as usual. Use the following code as a reference.
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 |
/*Populate Theme Options Page*/ function theme_options() { ?> <div class="wrap"> <h2>Your Theme Name</h2> <form method="post" action="options.php"> <?php settings_fields( 'custom_theme_name' ); ?> <?php do_settings_sections( 'custom_theme_name' ); ?> <h3>Branding</h3> <label for="logo">Logo</label></br> <?php if(get_option('logo')!=''){ ?><img class="logo_img" src="<?php echo get_option('logo'); ?>" height="100"/></br><?php } ?> <input class="logo" type="text" name="logo" size="60" value="<?php echo get_option('logo'); ?>"> <a href="#" class="header_logo_upload button button-primary">Upload</a></br> <h3>Contact</h3> <label for="phone_number">Phone Number</label></br> <input type="text" name="phone_number" value="<?php echo get_option('phone_number'); ?>" /></br> <label for="email">Email</label></br> <input type="text" name="email" value="<?php echo get_option('email'); ?>" /></br> <h3>Services Area</h3> <label for="service_1_image">Service One Image</label></br> <?php if(get_option('service_1_image')!=''){ ?><img class="service_1_image_img" src="<?php echo get_option('service_1_image'); ?>" height="100"/></br><?php } ?> <input class="service_1_image" type="text" name="service_1_image" size="60" value="<?php echo get_option('service_1_image'); ?>"> <a href="#" class="service_1_image_upload button button-primary">Upload</a></br> <label for="service_1_link">Service One Link</label></br> <input type="text" name="service_1_link" value="<?php echo get_option('service_1_link'); ?>" /></br> <label for="service_2_image">Service Two Image</label></br> <?php if(get_option('service_2_image')!=''){ ?><img class="service_2_image_img" src="<?php echo get_option('service_2_image'); ?>" height="100"/></br><?php } ?> <input class="service_2_image" type="text" name="service_2_image" size="60" value="<?php echo get_option('service_2_image'); ?>"> <a href="#" class="service_2_image_upload button button-primary">Upload</a></br> <label for="service_2_link">Service Two Link</label></br> <input type="text" name="service_2_link" value="<?php echo get_option('service_2_link'); ?>" /></br> <label for="service_3_image">Service Three Image</label></br> <?php if(get_option('service_3_image')!=''){ ?><img class="service_3_image_img" src="<?php echo get_option('service_3_image'); ?>" height="100"/></br><?php } ?> <input class="service_3_image" type="text" name="service_3_image" size="60" value="<?php echo get_option('service_3_image'); ?>"> <a href="#" class="service_3_image_upload button button-primary">Upload</a></br> <label for="service_3_link">Service Three Link</label></br> <input type="text" name="service_3_link" value="<?php echo get_option('service_3_link'); ?>" /></br> <h3>Text Areas</h3> <label for="area_1_title">Area One Title</label></br> <input type="text" name="area_1_title" value="<?php echo get_option('area_1_title'); ?>" /></br> <label for="area_1_text">Area One Text</label></br> <textarea name="area_1_text" rows="4" cols="50"><?php echo get_option('area_1_text'); ?></textarea></br> <label for="area_2_title">Area Two Title</label></br> <input type="text" name="area_2_title" value="<?php echo get_option('area_2_title'); ?>" /></br> <label for="area_2_text">Area Two Text</label></br> <textarea name="area_2_text" rows="4" cols="50"><?php echo get_option('area_2_text'); ?></textarea></br> <h3>Analytics</h3> <label for="analytics">Analytics Code</label></br> <textarea name="analytics" rows="4" cols="50"><?php echo get_option('analytics'); ?></textarea></br> <?php submit_button(); ?> </form> </div> <?php } |
Add Upload Code
Lastly we want to add the upload code so WordPress knows how to handle our image uploads.
First we want to add the code to handle to upload right after we open the theme_options function like this:
1 2 3 4 5 6 7 8 9 10 11 |
/*Populate Theme Options Page*/ function theme_options() { /*Upload Media if Any*/ if(function_exists( 'wp_enqueue_media' )){ wp_enqueue_media(); }else{ wp_enqueue_style('thickbox'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); } |
then add the script code to initiate the fancy WordPress uploader onto the bottom of the function:
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 |
</form> </div> <script> jQuery(document).ready(function($) { /*Logo Upload*/ $('.header_logo_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.logo').val(attachment.url); $('.logo_img').attr('src', attachment.url); }) .open(); }); /*Service 1 Image Upload*/ $('.service_1_image_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.service_1_image').val(attachment.url); $('.service_1_image_img').attr('src', attachment.url); }) .open(); }); /*Service 2 Image Upload*/ $('.service_2_image_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.service_2_image').val(attachment.url); $('.service_2_image_img').attr('src', attachment.url); }) .open(); }); /*Service 3 Image Upload*/ $('.service_3_image_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.service_3_image').val(attachment.url); $('.service_3_image_img').attr('src', attachment.url); }) .open(); }); }); </script> <?php } |
After you save and upload that should be all.
Final Code
Here is a code snip of everything combined:
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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 |
<?php /*functions.php start*/ /*Add Theme Options Page*/ add_action('admin_menu', 'custom_theme_options'); function custom_theme_options() { add_theme_page('Theme Options', 'Theme Options', 'edit_theme_options', 'theme-options', 'theme_options'); } /*Prime Theme Settings*/ function register_theme_settings() { /*Logo*/ register_setting( 'custom_theme_name', 'logo' ); /*Contact*/ register_setting( 'custom_theme_name', 'phone_number' ); register_setting( 'custom_theme_name', 'email' ); /*Tag Images*/ register_setting( 'custom_theme_name', 'service_1_image' ); register_setting( 'custom_theme_name', 'service_1_link' ); register_setting( 'custom_theme_name', 'service_2_image' ); register_setting( 'custom_theme_name', 'service_2_link' ); register_setting( 'custom_theme_name', 'service_3_image' ); register_setting( 'custom_theme_name', 'service_3_link' ); /*Areas*/ register_setting( 'custom_theme_name', 'area_1_title' ); register_setting( 'custom_theme_name', 'area_1_text' ); register_setting( 'custom_theme_name', 'area_2_title' ); register_setting( 'custom_theme_name', 'area_2_text' ); /*Analytics*/ register_setting( 'custom_theme_name', 'analytics' ); } add_action( 'admin_init', 'register_theme_settings' ); /*Populate Theme Options Page*/ function theme_options() { /*Upload Media if Any*/ if(function_exists( 'wp_enqueue_media' )){ wp_enqueue_media(); }else{ wp_enqueue_style('thickbox'); wp_enqueue_script('media-upload'); wp_enqueue_script('thickbox'); } ?> <div class="wrap"> <h2>Your Plugin Name</h2> <form method="post" action="options.php"> <?php settings_fields( 'custom_theme_name' ); ?> <?php do_settings_sections( 'custom_theme_name' ); ?> <h3>Branding</h3> <label for="logo">Logo</label></br> <?php if(get_option('logo')!=''){ ?><img class="logo_img" src="<?php echo get_option('logo'); ?>" height="100"/></br><?php } ?> <input class="logo" type="text" name="logo" size="60" value="<?php echo get_option('logo'); ?>"> <a href="#" class="header_logo_upload button button-primary">Upload</a></br> <h3>Contact</h3> <label for="phone_number">Phone Number</label></br> <input type="text" name="phone_number" value="<?php echo get_option('phone_number'); ?>" /></br> <label for="email">Email</label></br> <input type="text" name="email" value="<?php echo get_option('email'); ?>" /></br> <h3>Services Area</h3> <label for="service_1_image">Service One Image</label></br> <?php if(get_option('service_1_image')!=''){ ?><img class="service_1_image_img" src="<?php echo get_option('service_1_image'); ?>" height="100"/></br><?php } ?> <input class="service_1_image" type="text" name="service_1_image" size="60" value="<?php echo get_option('service_1_image'); ?>"> <a href="#" class="service_1_image_upload button button-primary">Upload</a></br> <label for="service_1_link">Service One Link</label></br> <input type="text" name="service_1_link" value="<?php echo get_option('service_1_link'); ?>" /></br> <label for="service_2_image">Service Two Image</label></br> <?php if(get_option('service_2_image')!=''){ ?><img class="service_2_image_img" src="<?php echo get_option('service_2_image'); ?>" height="100"/></br><?php } ?> <input class="service_2_image" type="text" name="service_2_image" size="60" value="<?php echo get_option('service_2_image'); ?>"> <a href="#" class="service_2_image_upload button button-primary">Upload</a></br> <label for="service_2_link">Service Two Link</label></br> <input type="text" name="service_2_link" value="<?php echo get_option('service_2_link'); ?>" /></br> <label for="service_3_image">Service Three Image</label></br> <?php if(get_option('service_3_image')!=''){ ?><img class="service_3_image_img" src="<?php echo get_option('service_3_image'); ?>" height="100"/></br><?php } ?> <input class="service_3_image" type="text" name="service_3_image" size="60" value="<?php echo get_option('service_3_image'); ?>"> <a href="#" class="service_3_image_upload button button-primary">Upload</a></br> <label for="service_3_link">Service Three Link</label></br> <input type="text" name="service_3_link" value="<?php echo get_option('service_3_link'); ?>" /></br> <h3>Text Areas</h3> <label for="area_1_title">Area One Title</label></br> <input type="text" name="area_1_title" value="<?php echo get_option('area_1_title'); ?>" /></br> <label for="area_1_text">Area One Text</label></br> <textarea name="area_1_text" rows="4" cols="50"><?php echo get_option('area_1_text'); ?></textarea></br> <label for="area_2_title">Area Two Title</label></br> <input type="text" name="area_2_title" value="<?php echo get_option('area_2_title'); ?>" /></br> <label for="area_2_text">Area Two Text</label></br> <textarea name="area_2_text" rows="4" cols="50"><?php echo get_option('area_2_text'); ?></textarea></br> <h3>Analytics</h3> <label for="analytics">Analytics Code</label></br> <textarea name="analytics" rows="4" cols="50"><?php echo get_option('analytics'); ?></textarea></br> <?php submit_button(); ?> </form> </div> <script> jQuery(document).ready(function($) { /*Logo Upload*/ $('.header_logo_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.logo').val(attachment.url); $('.logo_img').attr('src', attachment.url); }) .open(); }); /*Service 1 Image Upload*/ $('.service_1_image_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.service_1_image').val(attachment.url); $('.service_1_image_img').attr('src', attachment.url); }) .open(); }); /*Service 2 Image Upload*/ $('.service_2_image_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.service_2_image').val(attachment.url); $('.service_2_image_img').attr('src', attachment.url); }) .open(); }); /*Service 3 Image Upload*/ $('.service_3_image_upload').click(function(e) { e.preventDefault(); var custom_uploader = wp.media({ title: 'Custom Image', button: { text: 'Upload Image' }, multiple: false // Set this to true to allow multiple files to be selected }) .on('select', function() { var attachment = custom_uploader.state().get('selection').first().toJSON(); $('.service_3_image').val(attachment.url); $('.service_3_image_img').attr('src', attachment.url); }) .open(); }); }); </script> <?php } /*functions.php end*/ ?> |
Recent Comments