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.
- Create a CSS file inside the same folder of your plugin.
- Copy and paste the following code into your main php file of your plugin. Remember to change
yourstyle.cssto your own CSS file. - 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.
Nice~ thank you for shared.
Thanks very much for this - real useful stuff.
Hi, thanks for the great article.
But the code given in the section "How To Create WordPress Form Fields" doesn't work.
I checked the admin pages of 2.8.3 and I found that they still use table to structure the form elements and not the ul and li tags as you specified.
Thanks for this - it answers my questions exactly.
The WordPress Codex says get_settings is deprecated. Does this change anything about your example for adding a CSS style?
Hi Sharon,
No it won't change anything, you can use get_option instead of get_settings. It will still work.
I have also replaced the get_settings. :)
Cool post. This really helped me a lot developing the SpamTask admin panel and the chart features. Tried to make another style though, but based on the same principles. Thanks.
Thanks a lot for this great information.
Very useful.Thanks.
Really a very nice and useful post. I google several time for this post and at last I found something which will be so helpful for me.
thanks
really nice topic :)
thank you again
Hi, I have a big question.
My client send me all the code to insert a plugin to the sidebar.
I do not know how to integrate it to the theme.
When I add any widget to the sidebar it shows with a header, a table and a nem, but with this plugin it does not shows but the buttons and images within the plguin, so, I need to show my client´s plugin like all the rest.
¿What is missing in the code?
Thanks.
<?php
/*
Plugin Name: Escolastica login
Plugin URI: http://www.escolastica.com/
Description: Login a escolastica
Author: Alex Cortes
Version: 1
*/
function login_widget() {
echo'
Alumno
Padre
Docente
Administrador
ENTRAR
';
}
function init_login(){
register_sidebar_widget("Login", "login_widget");
}
add_action("plugins_loaded", "init_login");
?>
Thanks for the info. One thing to note about your last point in regards to including a css file. You can actually access the directory a lot easier than you have it. Try this...
$url = plugins_url("myPluginDirectory/admin.css");
or even
$url = plugins_url(basename(dirname(__FILE__))."/admin.css");
Thanks for this very helpful post. I'm in the middle of creating my first widget for WordPress and had the need to do some of my own styling of the widget admin area. So that last piece of info in your post hit the spot.
It's hard to find good tutorials on these kind of things... It was really laid out amazingly well with your images and code snippets.
I'm a theme developer, and I still found it very useful for a couple of things I'm doing with theme options pages.
The only difficulty I had was the part about adding a CSS file to the admin head. In my case I'm not developing a plugin so I want the CSS link to reflect a file within my theme.
So, this is what I ended up doing:
function admin_register_head() {
echo '';
}
add_action('admin_head', 'admin_register_head');
This kind of funky method was because the "get_option" attribute (as you used in your post) doesn't have a template url option that I know of? And the bloginfo() function prints out the URL. I wasn't sure how to actually retrieve the URL to the theme folder and store in a variable.
So, if anyone knows a better way to accomplish this feel free to throw it out there, and if not, you can do it the way I did. It's not pretty, but it works :-)
You can use:
get_bloginfo() will return the url while bloginfo() echo's it immediately.
You can also use stylesheet_directory in place of template_url or if you don't want extra overhead of calling a function there should be a constant defined called TEMPLATE_DIRECTORY.
http://codex.wordpress.org/Template_Tags/bloginfo
Nice once guys!
Quick question. How would I go about placing my plugin link in a specific area in the admin panel?
Basically I have a plugin and add this bit of code to add it to the admin nav panel.
add_action('admin_menu', 'mytheme_add_admin'); ?>
If I wanted to create a standalone link menu, what code would I change?
Hi Keith,
You can use:
add_menu_page('Page title', 'Top-level menu title', 'administrator', 'my-top-level-handle', 'my_magic_function');
For more detail check out: WordPress Adding Administration Menus
;)
Awesome, thanks man :)
Thanks for sharing.. great tutorial
Nice one! I searched for the icons, so thanks for this.
Btw: Why not use wp_enqueue_style for the stylesheet? Much easier, no double loading, etc.
Thanks for the great article. Just wondering, under the heading 'How To Create WordPress Form Fields' you show the label and input feilds being positioned to the left and right inside the li element.
I'm just wondering if this is supposed to be part of the default WordPress admin styling or if you added a style for this yourself? It sounds like the former from what you've written, however I can't get this to work without adding the styles myself.
Hi Toby, the position of the label was floated right. The rest of the styling are default WordPress admin styles.
In addition:
Settings has been saved.
Useful for an "updated" message. A yellow bar on the top.
Sorry for my previous message. Forgot that HTML is not allowed
<div id="message" class="updated">
<p>Settings has been saved.</p>
</div>
Olá, valeu por compartilhar o seu conhecimento, excelente tutorial.
Obrigado!!
"Hello, thanks for sharing your knowledge, excellent tutorial. Thanks!"
This is the translation to English.