Those writing plugins for WordPress 2.5 may be wondering how to update their plugin’s options menu to reflect the new style sheet. While writing my recently-released Smart Ads WordPress plugin I discovered a few new CSS class names that will help your plugin integrate into the options menu seamlessly. Here’s how to do it.
Styling the Options Page
The CSS styling names for the options menu has changed slightly since WordPress 2.3 and earlier. A lot of plugins have an options menu in the “Settings” area of the admin console (this occurs when the admin_menu action hook is used). The following code reflects the current CSS names.
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="wrap"> <h2>My Options Page</h2> <form method="post" action=""> <table class="form-table"> <tr valign="top"> <th scope="row">First Column Text:</th> <td>Second Column Text</td> </tr> </table> <div class="submit"><input type="submit" name="update_options" value="<?php _e('Update') ?>" style="font-weight:bold;" /> </div> </form> </div> |
The above code will display as the following in the Settings options tab of the WordPress administrative console:
Page/Post Form Styling
Those who hook into the edit_form_advanced or edit_page_form WordPress actions (the write and edit post/pages form) will notice that the styling there has changed as well. With a few CSS techniques you can have your options look just like the native 2.5 boxes. They will even be collapsible. Your code should reflect the following outline:
Code:
1 2 3 4 5 6 | <div class="postbox"> <h3>My Title</h3> <div class="inside"> <p>You data here</p> </div> </div> |
The above code, when hooked into the edit post/pages form, will appear as shown in the image below:
Put It All Together
So what would this look like in actual plugin form? Below is a plugin made from the above code. When activated the plugin makes an Admin options page and displays the formatted box in the edit pages/posts page.
Code:
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 | <?php /* Plugin Name: Just A Test Plugin URI: http://simply-basic.com/posts/1941137 Description: This plugin does nothing. It is only an example Author: John Kolbert Version: 0.0.1 Author URI: http://simply-basic.com/ */ function test_options_page(){ ?> <div class="wrap"> <h2>My Options Page</h2> <form method="post" action=""> <table class="form-table"> <tr valign="top"> <th scope="row">First Column Text:</th> <td>Second Column Text</td> </tr> </table> <div class="submit"><input type="submit" name="update_options" value="<?php _e('Update') ?>" style="font-weight:bold;" /> </div> </form> </form> </div> <?php } function test_option_menu() { // install the options menu if (function_exists('add_options_page')) { add_options_page(__('Test'), __('Test'), 1, __FILE__, 'test_options_page'); } } function test_write_box() { ?> <div class="postbox"> <h3>My Title</h3> <div class="inside"> <p>You data here</p> </div> </div> <?php } // Install the options page add_action('admin_menu', 'test_option_menu'); add_action('edit_form_advanced', 'test_write_box'); add_action('edit_page_form', 'test_write_box'); ?> |
If you actually want to try the Test Plugin to see that it actually works, you can grab the code here: Test Plugin.
