Plugin developers, you’re doing too much with your plugin setting pages — colors, layouts, and tables inconsistent with WordPress, inline CSS, `!important`, just too much. The WordPress admin is a complicated system. If you don’t test for the majority of scenarios — large screens, tablet view, phone view, no Javascript — then create setting pages that are generic as possible. Ugly setting pages with misaligned items and broken layouts (due to updates to the WordPress admin CSS) lead to trust issues on the user’s end.

If you’re a great developer, don’t make people think you’re not by having custom, but ugly plugin setting pages.

Use What’s There

The majority of scenarios have been built. The WordPress UI team doesn’t exist for nothing you know? Take advantage of the WordPress admin form tables, postbox, two-column liquid layout, thickbox, buttons, tables, etc. If that aren’t enough tools for you to put together your plugin setting page:

• Does it need to be that complicated?
• What can you live without?
• Show it to me for suggestions.

Things That Float

Imagine how it will look if the users were to resize browser pushing the floated element to its own line.

Use `box-sizing: border-box;` for any custom item not supported by WordPress admin CSS so the padding of the item gets included in the width. For example:

DON’T
`#example {
float: left;
padding: 10px;
width: 95%;
}`

DO
`#example {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
float: left;
padding: 10px;
width: 100%;
}`

Typography and Sizing

If you’re structuring the page by sub headings, respect the WP admin CSS sizing. Don’t try to change `h3`, `h4`, etc. Users are used to the bigger system. Don’t make them learn a new system just for your plugin. If a user installs 20 plugins, each with its own custom settings page, that’s 20 new structures to learn.

Use percentages and ems instead of pixels. For example, if a word should be a little bit bigger, use `font-size: 120%;`. This works regardless of WordPress admin css or any colors scheme stylesheet provided by plugins.

Use WordPress’s typography selectors:

`.alert
.alt
.alternate
.approve
.activate
.deactivate
.delete
.file-error
.highlight
.message
.spam
.trash
.unapprove`

Ordered and Unordered Lists

By default, WordPress uses decimal for ordered lists and nothing for unordered lists. If you need to number or bullet your lists, style your list based on:

`ul.ul-disc {list-style: disc outside;}
ul.ul-square {list-style: square outside;}
ol.ol-decimal {list-style: decimal outside;}`

Buttons

Several types of buttons are available to form and link buttons:

`.button
.button.button-hero
.button.button-large
.button.button-small
.button-secondary /* for backward compatibility */
.button-primary
.button-primary.button-large`

Don’t forget button groups:

`.button-group .button`

Buttons within button groups will display as inline blocks and have no margins other than a negative side margin so the buttons overlap each other by one pixel creating a line of visually linked buttons.

Page Titles and Tabs

Use `h2` for the main page title. Within the page title, you can have tabs and `.subtitle`. Here’s an example of tabs:

`

Manage Themes
Install Themes

`

But remember, just because tabs are doable doesn’t mean you should rely on them for all plugin navigation. Imagine ten tabs for tablet or mobile view — not user friendly.