1. No category

How To Design And Style Your WordPress Plugin Admin Panel | Onext...
1 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
(http://stats.buysellads.com/click.go?z=1243230&b=2234595&g=&s=&sw=1680&sh=1050&br=firefox,12,win&
r=0.891615957568997&link=https://teamtreehouse.com/subscribe/plans/?cid=432)
Advertise with us (http://buysellads.com/buy/detail/15363/)
How To Design And Style Your WordPress Plugin Admin
Panel (http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-your-wordpress-plugin-admin-panel/)
July 1st, 2009 by Terrance (http://www.onextrapixel.com/author/terrance/) | WordPress (http://www.onextrapixel.com/category
/wordpress/) | 56 Comments (http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-your-wordpress-plugin-adminpanel/#comments)
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.
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
2 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
Example
1
<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
1
2
3
4
//Primary Button
<input class=’button-primary’ type=‘submit’ name=‘Save’ value=’<?php _e(‘Save Options’); ?>’
// Secondary Button
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
3 von 13
5
6
7
8
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
<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
2
3
4
5
6
7
8
9
10
#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.
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
4 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
Example
1
2
3
4
5
6
7
8
9
<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.
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
5 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
Example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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 (http://www.onextrapixel.com/2009/06
/22/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
1
2
3
<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.
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
6 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
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.
1
2
3
4
5
6
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
(http://getfirebug.com/) 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.
Previous (http://www.onextrapixel.com/2009/06/30/13-photos-and-illustrations-to-pay-a-tribute-to-the-king-of-pop-michael-jackson/)
Random (http://www.onextrapixel.com/random/)
Next (http://www.onextrapixel.com/2009/07/03/10-principles-of-navigation-design-and-why-quality-navigation-is-so-critical/)
Advertise with us (http://buysellads.com/buy/detail/15363/)
Author
(http://www.onextrapixel.com)
Terrance (http://www.onextrapixel.com/author/terrance/)
Terrance is a versatile web developer and one of the chief editor of OXP. He enjoys creating functional websites and
is particularly engrossed in all the tiny details mixed together to construct great user experiences. He always believe
that every web user deserves the best!
48 articles published to date.
Visit my Website (http://www.onextrapixel.com)
Follow me on Twitter (http://twitter.com/onextrapixel)
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
7 von 13
1.
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
Andy (http://www.magicandy28.com)
July 28, 2009 at 10:20 am
Nice~ thank you for shared.
2.
Simon Fairbairn (http://www.simonfairbairn.com)
July 30, 2009 at 11:12 pm
Thanks very much for this - real useful stuff.
Sudar (http://sudarmuthu.com)
August 6, 2009 at 2:00 pm
3.
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.
4.
Sharon
August 12, 2009 at 5:11 am
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 at 12:17 am
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. :)
Rune Jensen (http://www.rune-jensen.com/)
August 13, 2009 at 6:59 pm
5.
Cool post. This really helped me a lot developing the SpamTask (http://wordpress.org/extend/plugins
/spamtask/) admin panel and the chart features. Tried to make another style though, but based on
the same principles. Thanks.
6.
Juarez P. A. Filho (http://juarezpaf.com)
August 18, 2009 at 5:52 am
Thanks a lot for this great information.
7.
Volkan
August 20, 2009 at 7:35 pm
Very useful.Thanks.
8.
Nazmus Sakib (http://think.binarylimit.com)
August 28, 2009 at 12:57 pm
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.
shohag_aust (http://www.esoftarena.com)
April 7, 2011 at 7:48 pm
me too sakib vai :D
9.
IsmSal
November 21, 2009 at 6:36 am
thanks
really nice topic :)
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
8 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
thank you again
10.
Pablo Federico (http://www.nuevocontinentebajio.edu.mx)
December 11, 2009 at 11:01 pm
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/ (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");
?>
11.
Jesse Knowles (http://www.jesseknowles.com)
December 12, 2009 at 2:54 am
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");
12.
Tom (http://www.toptentagesgeld.de/)
January 20, 2010 at 7:05 am
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.
13.
Jason (http://www.jasonbobich.com)
January 22, 2010 at 10:11 am
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.
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
9 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
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 :-)
R'phael Spindel (http://www.webspin.biz)
January 28, 2010 at 3:14 am
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 (http://codex.wordpress.org/Template_Tags/bloginfo)
14.
Keith
January 23, 2010 at 10:46 am
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?
Terrance (http://www.onextrapixel.com)
January 24, 2010 at 10:18 am
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 (http://codex.wordpress.org
/Adding_Administration_Menus)
;)
15.
JaRo (http://www.wybierzsie.pl)
March 1, 2010 at 7:34 pm
Awesome, thanks man :)
16.
NavaPavan (http://www.navapavan.com/)
March 16, 2010 at 7:22 pm
Thanks for sharing.. great tutorial
17.
Kaiser
May 27, 2010 at 6:36 pm
Nice one! I searched for the icons, so thanks for this.
Btw: Why not use wp_enqueue_style for the stylesheet? Much easier,
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
10 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
no double loading, etc.
18.
Toby (http://toby.gundry.com.au)
May 31, 2010 at 10:35 pm
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.
Terrance (http://www.onextrapixel.com)
May 31, 2010 at 11:00 pm
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 at 11:19 pm
Hey Terrance,
I'm floating the labels to the right and its producing weird results. Can we see your
exact code for that form?
19.
Gokhan OZTURK (http://www.pclabs.com.tr)
July 18, 2010 at 11:24 am
In addition:
Settings has been saved.
Useful for an "updated" message. A yellow bar on the top.
20.
Gokhan OZTURK (http://www.pclabs.com.tr)
July 18, 2010 at 11:26 am
Sorry for my previous message. Forgot that HTML is not allowed
<div id="message" class="updated">
<p>Settings has been saved.</p>
</div>
21.
Fabiel Rodrigues (http://www.fabielrodrigues.com.br)
July 29, 2010 at 8:22 pm
Olá, valeu por compartilhar o seu conhecimento, excelente tutorial.
Obrigado!!
Aidan (http://www.inspiremonkey.com)
July 29, 2010 at 9:01 pm
"Hello, thanks for sharing your knowledge, excellent tutorial. Thanks!"
This is the translation to English.
22.
Kian Ann (http://www.blogopreneur.com)
September 9, 2010 at 10:24 pm
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! :)
23.
li guoliang (http://liguoliang.com)
October 10, 2010 at 10:34 am
I design my pulgin opt page last week under your excellent tutorial
Thanks very much, so cute and so usefull.
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
11 von 13
24.
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
Dasha (http://dashaluna.com)
October 19, 2010 at 9:18 pm
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.
25.
Arslan (http://www.arslania.com)
October 31, 2010 at 10:54 am
Nice tutorial..
Thanks a lot.
26.
Anthony Sessa
December 24, 2010 at 10:42 am
Really Great article.
27.
pootzko (http://www.cmikavac.net)
December 27, 2010 at 12:25 am
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. =)
28.
Alan (http://gamervoices.com/)
January 23, 2011 at 7:47 pm
Just what I needed to clean up my options pages, thank you!
29.
wordpress elite (http://wpleet.com)
February 6, 2011 at 8:35 am
Thank you for this post i really enjoy going back here to check this post when ever i
need it.
30.
sabarinathan
February 18, 2011 at 6:26 pm
thanks
31.
medical assistant (http://www.medicalassistantnow.com)
February 24, 2011 at 12:33 pm
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.
32.
bisong
March 15, 2011 at 1:23 pm
nice tut.. this all i need thank you for sharing
33.
Adit
March 28, 2011 at 11:08 am
Thank you! very nice article, keep posting!! :P
34.
Persimón (http://www.persimonkaki.com)
April 6, 2011 at 2:54 am
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?
35.
BoiteaWeb (http://www.boiteaweb.fr/)
May 13, 2011 at 10:34 pm
Hi, good post BUT use wp_enqueue_style() ( http://codex.wordpress.org/Function_Reference
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
12 von 13
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
/wp_enqueue_style (http://codex.wordpress.org/Function_Reference/wp_enqueue_style) ) to add your own
CSS.
Bye
36.
Allan (http://bdqworks.com)
May 19, 2011 at 2:49 am
Thanks for the post, exactly what I was looking for.
37.
Daniel Naves (http://naves.me)
June 6, 2011 at 10:57 pm
Very nice my friend ! Thanks!
38.
Bilgispot (http://bilgispot.blogspot.com)
June 6, 2011 at 11:34 pm
it's cool design. Thanks...
39.
Jon (http://www.omnilogic.net/)
June 25, 2011 at 1:10 am
Very useful. Thanks for this.
40.
sinden (http://taobaogogogo.net)
July 1, 2011 at 12:10 am
thanks for the knowledge of friends, now
my admin look more attractive.
Mike (http://www.phpcontext.com)
August 24, 2011 at 5:26 am
41.
<form method="POST" action="">
this code of yours is unacceptable as it can lead to a xss attack
Jenni (http://www.intenseblog.com)
August 28, 2011 at 11:42 am
I don't see in the code? Is there anything wrong?
42.
Sam Donga (http://www.psdtohtmlfive.com)
August 27, 2011 at 6:30 pm
Hi,
Thanks for the post, exactly what I was looking for.
http://www.psdtohtmlfive.com (http://www.psdtohtmlfive.com)
thank you
43.
Kuldeep Bansal
December 17, 2011 at 6:06 pm
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
(http://mindstick.com/Articles/99e1cb14-a0d3-40f4-b5f1-4d7ce9105d1a/?WordPress%20Admin%20Panel)
Thanks everyone for yours nice post.
44.
MojoWill (http://www.mojowill.com)
January 18, 2012 at 7:50 pm
Just a quick update regarding adding your own styles. You should register and enqueue your style
sheet rather than injecting into the admin head.
1
function custom_admin_styles() {
29.04.2012 22:37
How To Design And Style Your WordPress Plugin Admin Panel | Onext...
2
3
4
5
6
http://www.onextrapixel.com/2009/07/01/how-to-design-and-style-you...
wp_register_style( 'my-admin-css', 'url_to_my_css/admin.css', null, '1.0', 'scr
wp_enqueue_style( 'my_admin-css' );
}
add_action( 'admin_print_styles', 'custom_admin_styles' );
45.
Việt Coding (http://vietcoding.com)
March 1, 2012 at 12:01 am
That's a great article for WP Admin options developing. It 's useful for me.
Thanks so much !
46.
Wes G (http://www.wesg.ca)
March 16, 2012 at 2:11 am
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.
47.
Adam (http://www.tech-knowledge.com.au)
March 19, 2012 at 6:37 pm
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!
48.
Jorge Torres (http://www.jotorres.com)
April 5, 2012 at 8:07 am
This definately deserves a bookmark! Thanks Terrance for such a great tutorial!
Please note that comments are moderated - and rel="nofollow" is in use. Please no link dropping,
no keywords or domains as names. Kindly do not spam, and do not advertise!
13 von 13
29.04.2012 22:37