Simply-Basic.com » Blog Archive » Styling Your Plugin for WordPress 2.5

Styling Your Plugin for WordPress 2.5

Published on April 12, 2008 No Comment

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:

<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:

<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:

<?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.

Useful Articles

This article was written by John Kolbert on April 12, 2008 and filed as Tutorial/How-To, WordPress. Get the latest articles by subscribing to the RSS feed. This article, including images and attachments, is property of John Kolbert and is not to be republished or translated without prior written permission.