WordPress Plugin Admin User Interface Elements

Sanjay PatilWCODEX Software Solutions

Introduction

• To maintain the user interface consistency, while Creating plugin, we have to match WordPress UI as closely as possible

• This helps keep the interface consistent for end users and can make your plugin more professional

• So here I will explain you the different styling available in WordPress for your plugin

Main wrapper

The most important part of your plugin is towrap your plugin in the class wrap dive.g.

<div class=“wrap”><?php echo “Plugin Page”; ?>

</div>

Headings

In WordPress admin style for plugin, the headingstart from <h2> and not from <h1>.The <h1>tagis reserved for the name of your web sitedisplayed on the top of admin panel dashboard So you should always habit to use <h2> tag foryour primary heading.

IconsWordPress have many different icons for each section head. E.g. If you want to add upload icon in your plugin you can do it as follow

<div id=“icon-upload” class=“icon32”></div>

There are other icons are asdashboard, posts, media, links, pages, comments, themes, plugins,users, management, options-general Rather than using this lengthy code WordPress features a functionto generate the icon div called as “screen_icon”Syntax

<?php screen_icon(‘upload); ?>

Messages

When any action occurred in WordPress like post save,update etc. meaningful messages are generated foruser conformation. WordPress features a different stylefor managing these messages

As you can different classes for different action areused with unique id as “message”

<div id=“message” class=“updated”>Settings saved</div><div id=“message” class=“error”>Error in saving setting</div>

Links

• Links inside the wrap class automatically assumes thestandard WordPress admin link style.

• Wrapping any link in standard heading tag enables toadjust the size of the link text

<div class=“wrap”><h2><a href=“#”>Link for Test</a></h2>

</div>

Tables

In WordPress tables can easily be styled withclass “widefat”

<table class=“widefat”><thead>

<th>Name</th><th>Age</th>

</thead><tfoot>

<th>Name</th><th>Age</th>

</tfoot><tbody>

<tr><td>Sanjay</td><td>32</td>

</tr>

</table>

Buttons

In WordPress there are multiple classes are availablefor styling the buttons1. button-primary2. button-secondary3. button-highlightede.g.

<input type="submit" value="secondary" class="button-secondary"><input type="submit" value="primary" class="button-primary"><input type="submit" value="highlighted" class="button-highlighted ">

Pagination

1. Wrap your all pagination links in “tablenav and tablenav-pages” div classes

2. “displaying-num” class styles the records your are viewing

3. “page-numbers” styles the page links4. You can add “current or next” to the link classes to

add some unique style in WordPress format

Pagination Example<div class="wrap"> <div class="tablenav"> <div class="tablenav-pages"> <span class="displaying-num">displaying 1-20 of 70 </span> <span class="page-numbers current">1</span> <a href="#" class="page-numbers">2</a> <a href="#" class="page-numbers">3</a> <a href="#" class="page-numbers">4</a> <a href="#" class="next page-numbers">&raquo;</a> </div> </div></div>

Forms

WordPress has special css class for forms as “formtable”. This class is used for all admin dashboard forms.e.g.

Form Example<div class="wrap"> <form method="post" action=""> <table class="form-table"> <tr valign="top"> <th scope="row"><label for="fname">First Name</label></th> <td><input type="text" name="fname"></td> </tr> <tr valign="top"> <th scope="row"><label for="lname">Last Name</label></th> <td><input type="text" name="lname"></td> </tr> <tr valign="top"> <td> <input type="submit" value="save" class="button-primary"> <input type="submit" value="reset" class="button-secondary"> </td> </tr> </table> </form> </div>

• So these are the different ways to keep the consistent design interface for your plugin in WordPress.

• Keeping your plugin design consistent with theWordPress user interface can make the users morecomfortable to use that plugin.

• As we are using WordPress core style, though it change by the time, you need not worry about it, with those core changes your plugin design will also change, you won’t need to change any line of code

Thank You

Hope this information will help you

For any comment get in touch us atWCODEX Software Solutions

38,Harihar Nagar,Besa,Nagpur:441108http://www.wcodex.co.inEmail:info@wcodex.co.in

Facebook: facebook.com/wcodexsoftwaresTwitter:@wcodexsoftwares