How to Design and Style Your WordPress Plugin Admin Panel

8/2/2019 How to Design and Style Your WordPress Plugin Admin Panel

1/9

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.
http://www.onextrapixel.com/2009/07/01/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/


2/9

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

1 Rest of the markup inside here


3/9

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

5

67

8

//Primary Button


4/9

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 #2 #3 #4 #5 #6 #7 #8 #9 #10


5/9

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

1

2

3

4

5

6

78

9


6/9

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

1

2

3

4

5

6

7

8

9

10

1112

13

14

15

16

17

18

19

20

21

2223

RegIdNameEmail

RegIdNameEmail


7/9

How To Style Admin Pagination

If you did followHow 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

//echo out your pagination
http://www.onextrapixel.com/2009/06/22/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/http://www.onextrapixel.com/2009/06/22/how-to-add-pagination-into-list-of-records-or-wordpress-plugin/


8/9

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.

1

2

3

4

5

6

functionadmin_register_head() {$siteurl= get_option('siteurl');$url= $siteurl. '/wp-content/plugins/'. basename(dirname(__FILE__)) .

'/yourstyle.css';echo"\n";

}add_action('admin_head', 'admin_register_head');


9/9

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.
http://getfirebug.com/http://getfirebug.com/

Documents

How to Design and Style Your WordPress Plugin Admin Panel