User:Wycks/Styling Option Pages

This article is a ROUGH DRAFT. The author is still working on this document, so please do not edit this without the author's permission. The content within this article may not yet be verified or valid. This information is subject to change.

Admin Styling

A guide on how to to create styles that match the look and feel of existing WordPress options pages for plugins and themes.

The main container for your options page.

<div class="wrap">..your options..</div>

Styling titles can be done simply by calling the following tags

<h1><h2><h3>

Default Icons

<div id="icon-edit" class="icon32"></div>
<div id="icon-upload" class="icon32"></div>
<div id="icon-link-manager" class="icon32"></div>
<div id="icon-edit-pages" class="icon32"></div>
<div id="icon-edit-comments" class="icon32"></div>
<div id="icon-themes" class="icon32"></div>
<div id="icon-plugins" class="icon32"></div>
<div id="icon-users" class="icon32"></div>
<div id="icon-tools" class="icon32"></div>
<div id="icon-options-general" class="icon32"></div>

Small descriptive messages, as seen on the settings page ( in italics).

<div class="description">Some short text</div>

Table class called "widefat" that also styles the table header and footer.

<table class="widefat">
<thead>
    <tr>
        <th>Column 1 header title</th>
        <th>Column 2 header title</th>       
        <th>Column 3 header title</th>
    </tr>
</thead>
<tfoot>
    <tr>
    <th>Column 1 footer title</th>
    <th>Column 2 footer title</th>
    <th>Column 3 footer title</th>
    </tr>
</tfoot>
<tbody>
   <tr>
     <td>Your data ...</td>
     <td>Your data ...</td>
     <td>Your data ...</td>
   </tr>
</tbody>
</table>

Input buttons have 2 styles.

Blue buttons

<input type='submit' class='button-primary' id='submitbutton' />
//or using the function
submit_button();

Secondary off-white buttons

<input type='submit' class='button-secondary' id='submitbutton'/>

Button styles also work as a link instead of an input, for example:

<a class='button-primary' href='#'' title='Title'>Link</a>
<a class='button-secondary' href='#'' title='Title'>Link</a>

Or you can set them up as a standard HTML button like so:

<button type='button' class='button-primary'>My Primary Button</button>
<button type='button' class='button-secondary'>My Secondary Button</button>

Pagination , like you see on the default posts screen:

<div class='tablenav-pages'>
    //echo out your pagination 
</div>

Putting it all together

A basic example that sets up an option page header.

<div class="wrap">
<div id="icon-plugins" class="icon32"></div>
<h2>Your Plugin Name</h2>
</div>

Reference: http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-your-wordpress-plugin-admin-panel/

Codex