How To Design And Style Your WordPress Plugin Admin Panel

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.

WordPress Plugin Admin Panel

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.

WordPress Div Wrap

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.

WordPress Headers and Buttons

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.

WordPress Header Icons

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.

WordPress Admin Panel Form

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.

WordPress Admin Table

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.

WordPress Pagination 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.

Comments

    • Andy,
    • July 28, 2009
    / Reply

    Nice~ thank you for shared.

  1. / Reply

    Thanks very much for this – real useful stuff.

  2. / Reply

    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.

    • Sharon,
    • August 12, 2009
    / Reply

    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?

      • Terrance,
      • August 13, 2009
      / Reply

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

  3. / Reply

    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.

  4. / Reply

    Thanks a lot for this great information.

    • Volkan,
    • August 20, 2009
    / Reply

    Very useful.Thanks.

  5. / Reply

    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.

    1. / Reply

      me too sakib vai :D

    • IsmSal,
    • November 21, 2009
    / Reply

    thanks
    really nice topic :)

    thank you again

  6. / Reply

    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”);
    ?>

  7. / Reply

    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”);

    • Tom,
    • January 20, 2010
    / Reply

    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.

    • Jason,
    • January 22, 2010
    / Reply

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

    1. / Reply

      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

    • Keith,
    • January 23, 2010
    / Reply

    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?

    1. / Reply

      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

      ;)

    • JaRo,
    • March 1, 2010
    / Reply

    Awesome, thanks man :)

  8. / Reply

    Thanks for sharing.. great tutorial

    • Kaiser,
    • May 27, 2010
    / Reply

    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.

    • Toby,
    • May 31, 2010
    / Reply

    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.

    1. / Reply

      Hi Toby, the position of the label was floated right. The rest of the styling are default WordPress admin styles.

        • Joshua Ziering,
        • March 28, 2011
        / Reply

        Hey Terrance,

        I’m floating the labels to the right and its producing weird results. Can we see your exact code for that form?

  9. / Reply

    In addition:

    Settings has been saved.

    Useful for an “updated” message. A yellow bar on the top.

  10. / Reply

    Sorry for my previous message. Forgot that HTML is not allowed

    <div id=”message” class=”updated”>
    <p>Settings has been saved.</p>
    </div>

  11. / Reply

    Olá, valeu por compartilhar o seu conhecimento, excelente tutorial.

    Obrigado!!

    1. / Reply

      “Hello, thanks for sharing your knowledge, excellent tutorial. Thanks!”

      This is the translation to English.

  12. / Reply

    Thanks for the great tips! This is awesome stuff!

    I think one of the best ways to learn is to just use firebug to dig into the existing WordPress options pages and see how they do it! :)

  13. / Reply

    I design my pulgin opt page last week under your excellent tutorial
    Thanks very much, so cute and so usefull.

    • Dasha,
    • October 19, 2010
    / Reply

    Hello,

    I don’t understand the example for changing the admin table view … I want to customize admin table views for couple of my custom post types. Where do I specify a new table structure??

    Would really appreciate any help!
    Thanks.

  14. / Reply

    Nice tutorial..

    Thanks a lot.

    • Anthony Sessa,
    • December 24, 2010
    / Reply

    Really Great article.

  15. / Reply

    thank you very much, just what I needed.. first I wanted to go and search for all the class and ID tags with firebug, and then thought – hey, maybe someone already documented it. will recommend this post to wp devs I know. =)

    • Alan,
    • January 23, 2011
    / Reply

    Just what I needed to clean up my options pages, thank you!

  16. / Reply

    Thank you for this post i really enjoy going back here to check this post when ever i need it.

    • sabarinathan,
    • February 18, 2011
    / Reply

    thanks

  17. / Reply

    Thanks man, Now I have nice looking admin page. I still need some assistance with my pagination but I almost used all of the formats you listed here.

    • bisong,
    • March 15, 2011
    / Reply

    nice tut.. this all i need thank you for sharing

    • Adit,
    • March 28, 2011
    / Reply

    Thank you! very nice article, keep posting!! :P

  18. / Reply

    Thanks very useful post, but i would like to use the search field too and shortable columns in the table, you know how do that?

  19. / Reply

    Hi, good post BUT use wp_enqueue_style() ( http://codex.wordpress.org/Function_Reference/wp_enqueue_style ) to add your own CSS.
    Bye

  20. / Reply

    Thanks for the post, exactly what I was looking for.

  21. / Reply

    Very nice my friend ! Thanks!

  22. / Reply

    it’s cool design. Thanks…

    • Jon,
    • June 25, 2011
    / Reply

    Very useful. Thanks for this.

  23. / Reply

    thanks for the knowledge of friends, now my admin look more attractive.

    • Mike,
    • August 24, 2011
    / Reply

    <form method="POST" action="”>

    this code of yours is unacceptable as it can lead to a xss attack

    1. / Reply

      I don’t see in the code? Is there anything wrong?

  24. / Reply

    Hi,

    Thanks for the post, exactly what I was looking for.

    http://www.psdtohtmlfive.com

    thank you

    • Kuldeep Bansal,
    • December 17, 2011
    / Reply

    This is one of the best articles so far I have read online. No crap, just useful information. Very well presented. Thanks for sharing with us. I have found another nice post related to this post over the internet which also explained very well, for more details of that post visit the following link….

    http://mindstick.com/Articles/99e1cb14-a0d3-40f4-b5f1-4d7ce9105d1a/?WordPress%20Admin%20Panel

    Thanks everyone for yours nice post.

  25. / Reply

    Just a quick update regarding adding your own styles. You should register and enqueue your style sheet rather than injecting into the admin head.

    
    
    		function custom_admin_styles() {
    			wp_register_style( 'my-admin-css', 'url_to_my_css/admin.css', null, '1.0', 'screen' );
    			wp_enqueue_style( 'my_admin-css' );
    		}
    
    add_action( 'admin_print_styles', 'custom_admin_styles' );
    
      • n4g_php,
      • August 1, 2012
      / Reply

      Thanks for the tip, your aproach is better that one sugested on the article.
      Great article by the way.

  26. / Reply

    That’s a great article for WP Admin options developing. It ‘s useful for me.

    Thanks so much !

  27. / Reply

    Thank you for your tips, I’ve used them to great success in a number of plugins and websites.

    A tip for pagination, however. Be sure to surround the “tablenav-pages” div element with another div element of class “tablenav”. It seems “tablenav-pages” alone isn’t enough to style the links. This is on WP 3.3.1.

    • Adam,
    • March 19, 2012
    / Reply

    Hi!

    Thanks for this! Really great and useful!

    I was wondering if you knew of a list of pre-existing CSS attributes for pluign admin panels

    Like how youve got

    Thanks!

  28. / Reply

    This definately deserves a bookmark! Thanks Terrance for such a great tutorial!

  29. / Reply

    This is a very nice site. Good examples of admin side css classes!!!!!!!!

  30. / Reply

    Hi there!

    I was given your blog url when I asked my Tweeps for some help. I need to add an icon to my WordPress plugin.

    I have your blog and many others but not quite sure what to do.

    So far I (think #lol) gathered that:

    1. I need to add a custom .css file with the link to the icon file ( no clou what code to put in there though…)

    2. I need to add:

    function admin_register_head() {
    $siteurl = get_option(‘siteurl’);
    $url = $siteurl . ‘/wp-content/plugins/’ . basename(dirname(__FILE__)) . ‘/yourstyle.css’;
    echo “\n”;

    Could you help me out with the css for 1.?

    And if I got it right?

    Thanks in advance!!

    Cheers,
    Jakolien

  31. / Reply

    Thank you, This is one of the best articles so far I have read online

  32. / Reply

    very nice , thank :)

  33. / Reply

    Thank you very much for such nice tutorial.
    It will help us improve the admin pages of a plugin we are developing now a days.

    Thanks,
    Mohsin

    • Val,
    • December 17, 2012
    / Reply

    Excellent article, straight forward many thanks…

    • Rajendra Banker,
    • February 21, 2013
    / Reply

    Very Useful Tutorial, Thanks.

    • Wichet Amjuang,
    • July 24, 2013
    / Reply

    It really helpful for newbie like me. thanks so much for your effort. Anyway, as I’m new can you guide me how to make a plugin to work like this.

    i had text file contain data inside like this:

    title,details

    aaa,aaaaaaaaaaaaaaaa

    bbbbbb,bbbbbbbbbbbbbbbbbbbbb

    cccc,cccccccccccccc
    .
    .
    .
    zzzz,zzzzzzzzzzzzzzzzzzzzzzzzz

    I would like the plugin the read the content from text file and loop post each line as one post until end of the file.

    thanks for your help and hope will get the guide line from you soon.

    • Dorian,
    • December 21, 2013
    / Reply

    I made a plugin and then created my own style for the admin pages, but those styles are hijacking the entire admin. How do I make my plugin’s styles only get applied to its own admin pages?

      • Michael,
      • February 4, 2014
      / Reply

      Dorian, you could try by putting your page inside a div and give it a unique ID that other admin pages are very unlikely to use such as id=”DoriansPluginWrapper”.

      Then in your plugins CSS make sure instead of writing something like “h2 { color:red }” you should write “#DoriansPluginWrapper h2 { color: red }”. This would mean it would only effect the elements within your wrapper that are matches for your selector.

      Quick Tip: Personally if I’m modifying or adding to 3rd party CSS I tend to use classes and ID’s beginning with my initials. So if your name was Dorian Gray then you could give your standard tables the class name “dg_table”.

    • rtpHarry,
    • September 30, 2014
    / Reply

    Seems like this article is now out of date. The icons for the headers appear to be hidden in WordPress 4 and also I’m not seeing my text area being styled automatically by WordPress, its the default tiny size.

    • Francisco Quintero,
    • March 17, 2015
    / Reply

    Awesome dude!

    I was looking the way to customize the look of my plugin admin page. Found it here :)

    • Munin,
    • September 29, 2015
    / Reply

    Thank you =)

Leave a Reply

Your email address will not be published. Required fields are marked *

Deals

Elegant Themes Coupon Code: 20% discount

While most other WordPress theme sites charge per theme, Elegant Themes is an amazing deal as you pay just once for access to 87 premium WordPress themes and a…

WrapPixel Coupon – 25% Discount

If you’re looking for an HTML or PSD template for your next website, checkout the selection of templates at WrapPixel made for web developers, designers, and agencies. You can…