How To Design And Style Your WordPress Plugin Admin Panel

The great thing about WordPress is that it’s highly customizable and flexible. Within a WordPress plugin, almost all of the fields could be change to your desire results. When you are building a WordPress Plugin, chances are there is a need for you to create some admin pages for the users to customize the setting they want.

WordPress admin default has their own CSS style and you can make use of it for your WordPress Plugin Admin Panel if you require one. If you require additional styling for your admin panel, you can also link in an external CSS stylesheet within your plugin.

Below, we’ll show you some default WordPress CSS styling and how to link in an external CSS stylesheet.

Basic WordPress Admin Panel

To get started, first you will need to have the markup for the right container, so that your WordPress Plugin admin page will sit nicely at the right side. The rest of the markup will go within the wrap class.

Example

<div class='wrap'>Rest of the markup inside here</div>

WordPress Headers And Buttons

If your WordPress Plugin has an admin panel, there’s bound to have the need for header and buttons. Header are quite straightforward, as for button design, by declaring a primary-button or secondary-button class you can change the design for the button and the anchor link.

Example

//Primary Button
<input class=’button-primary’ type=‘submit’ name=‘Save’ value=’<?php _e(‘Save Options’); ?>’ id=’submitbutton’ />

// Secondary Button
<input type='submit' value='<?php _e('Search Attendees'); ?>' class='button-secondary' />

//Link Button
<a class=button-secondary’ href=’#’ title=’All Attendees’>All Attendees</a>

How To Have An Icon For The Header

Having a plain header can be boring, you might want to refer to the list of available WordPress Header Icons below when you are creating a h2 tag for your plugin.

Example

#1 <div id="icon-edit" class="icon32"></div>
#2 <div id="icon-upload" class="icon32"></div>
#3 <div id="icon-link-manager" class="icon32"></div>
#4 <div id="icon-edit-pages" class="icon32"></div>
#5 <div id="icon-edit-comments" class="icon32"></div>
#6 <div id="icon-themes" class="icon32"></div>
#7 <div id="icon-plugins" class="icon32"></div>
#8 <div id="icon-users" class="icon32"></div>
#9 <div id="icon-tools" class="icon32"></div>
#10 <div id="icon-options-general" class="icon32"></div>

How To Create WordPress Form Fields

Again, you will need some form element like textfield, checkbox or dropdown box, for users to change the settings for your plugin after they have installed.

All the styles for the input, select or textarea form elements are already in place, write your HTML markup and everything will be nicely in place.

Example

<form method="POST" action="<?php echo $_SERVER['REQUEST_URI']; ?>">
	<ul>
		<li><label for="fname">Family Name (Sir Name)<span> *</span>: </label>
		<input id="fname" maxlength="45" size="10" name="fname" value="" /></li>	
			
		<li><label for="lname">Last Name<span> *</span>: </label>
		<input id="lname" maxlength="45" size="10" name="lname" value="" /></li>
    </ul>
</form

How To Create a WordPress Admin Table View

WordPress has a nice table CSS style you can use if you want to display a list of records in the admin panel.

Example

<table class="widefat">
<thead>
	<tr>
		<th>RegId</th>
		<th>Name</th>		
		<th>Email</th>
	</tr>
</thead>
<tfoot>
    <tr>
	<th>RegId</th>
	<th>Name</th>
	<th>Email</th>
    </tr>
</tfoot>
<tbody>
   <tr>
     <td><?php echo $regid; ?></td>
     <td><?php echo $name; ?></td>
     <td><?php echo $email; ?></td>
   </tr>
</tbody>
</table>

How To Style Admin Pagination

If you did follow How To Add Pagination Into List Of Records Or WordPress Plugin and did a pagination for your WordPress Plugin. Then it will be nicer if you can style it with the default WordPress Pagination CSS style.

Example

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

How To Add In New CSS Style

If the default WordPress Admin CSS is not what you are looking for, you can add in your own CSS.

1. Create a CSS file inside the same folder of your plugin.
2. Copy and paste the following code into your main php file of your plugin. Remember to change yourstyle.css to your own CSS file.
3. Lastly, hook the function to the admin_head.

function admin_register_head() {
	$siteurl = get_option('siteurl');
	$url = $siteurl . '/wp-content/plugins/' . basename(dirname(__FILE__)) . '/yourstyle.css';
	echo "<link rel='stylesheet' type='text/css' href='$url' />\n";
}
add_action('admin_head', 'admin_register_head');

Conclusion

If some of the WordPress Admin default CSS you need and is not covered above, you can always try using Firebug to see the CSS style on other WordPress Admin page or you can create your own CSS for your Plugin.

Have any questions for me? I’d love to hear and learn from you! Leave a comment below.