PHPackages                             bueltge/wordpress-admin-style - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. bueltge/wordpress-admin-style

ActiveWordpress-plugin[Utility & Helpers](/categories/utility)

bueltge/wordpress-admin-style
=============================

Shows the WordPress admin styles on one page to help you to develop WordPress compliant

1.6.1(2y ago)98316.4k117[1 issues](https://github.com/bueltge/wordpress-admin-style/issues)1GPL-2.0-or-laterPHPPHP >5.2.4CI failing

Since Mar 25Pushed 5mo ago55 watchersCompare

[ Source](https://github.com/bueltge/wordpress-admin-style)[ Packagist](https://packagist.org/packages/bueltge/wordpress-admin-style)[ Docs](https://github.com/bueltge/wordpress-admin-style)[ Fund](https://bueltge.de/impressum/#hinweis)[ GitHub Sponsors](https://github.com/bueltge)[ RSS](/packages/bueltge-wordpress-admin-style/feed)WikiDiscussions master Synced 1w ago

READMEChangelog (10)Dependencies (4)Versions (17)Used By (1)

WordPress Admin Style
=====================

[](#wordpress-admin-style)

[![FOSSA Status](https://camo.githubusercontent.com/eee3b49abda4528e57aeb29c556ad724f14c80a101f3fe1a1cf3be452ea431da/68747470733a2f2f6170702e666f7373612e696f2f6170692f70726f6a656374732f6769742532426769746875622e636f6d2532466275656c746765253246776f726470726573732d61646d696e2d7374796c652e7376673f747970653d736869656c64)](https://app.fossa.io/projects/git%2Bgithub.com%2Fbueltge%2Fwordpress-admin-style?ref=badge_shield)[![Latest Stable Version](https://camo.githubusercontent.com/6438545acfe904f72e7871e45ad779af0389902b74858a94cb590e3c67581178/68747470733a2f2f706f7365722e707567782e6f72672f6275656c7467652f776f726470726573732d61646d696e2d7374796c652f762f737461626c65)](https://packagist.org/packages/bueltge/wordpress-admin-style)

Shows the WordPress admin styles on one page to help you to develop WordPress compliant

- List markup and examples for '2 Column Page Layout', Headers, Header Icons, Buttons, Tables, Admin Notices, Alternative Colours, Pagination, Form Elements, Form Helper Functions, Tabs, Default Admin Color Schemes
- [WP Color Picker](https://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/)
- Helper Classes
- jQuery UI Examples
- [Dashicons](https://developer.wordpress.org/resource/dashicons/)
- [Genericons](http://genericons.com/)

Description
-----------

[](#description)

WordPress is developing fast - this also applies to the design of the backend. So it is important not to use your own styles in the admin area and use tags and classes of WordPress. This is the best way you can simplify your work as a developer, and you don't have to test the design with every update. Unfortunately, there are quite extensive opportunities in the backend to implement the requirements. Several different classes and HTML structures are used. To be able to look up something this simple, I have developed this small plugin, which tinkers in the development environment and quickly represents the necessary elements.

Also see the [post](https://wpengineer.com/2226/new-plugin-to-style-your-plugin-on-wordpress-admin-with-default-styles/)about the idea and also the comments for a discussion.

Screenshots & history
-------------------------

[](#screenshots--history)

[![Part of the Admin Style information in WordPress version 5.7](./assets/screenshot-8.png)](./assets/screenshot-8.png)

### Some notes for the differences in case of Icons

[](#some-notes-for-the-differences-in-case-of-icons)

#### What are Genericons?

[](#what-are-genericons)

​Genericons was a free, GPL-licensed icon font project by Automattic (the creators of WordPress.com and Jetpack). They were developed to provide simple, generic icons for blogs.

​Where they were found: They were very frequently used in the standard themes (like Twenty Thirteen, Twenty Fourteen, Twenty Fifteen, or Twenty Sixteen) and in the Jetpack plugin.

​The Misconception: Since these themes are shipped pre-installed with WordPress, it seemed to many users as if the icons were firmly anchored in the system. Technically, however, the files were located in the respective theme folder (/wp-content/themes/...) and not in the core system (/wp-includes/).

#### What is actually in Core?

[](#what-is-actually-in-core)

​The icons that are actually firmly integrated into the WordPress Core are called Dashicons.

​Introduction: They were introduced with WordPress 3.8 (in 2013) when the admin design was completely overhauled (the "MP6" update). ​Purpose: Dashicons are the official icon font for the WordPress Admin Dashboard (backend). Availability: Developers can use these icons in the frontend as well, but they are primarily part of the wp-includes files.

#### Summery for the usage in the admin area

[](#summery-for-the-usage-in-the-admin-area)

Use the Dashicons, because they are active in development, maintenance and inside the core.

### Screenshots

[](#screenshots)

The plugin is still active in usage and development since an early WordPress version, so you should see it on the screenshots from the different versions below.

1. [Admin Style in WordPress 3.1](/assets/screenshot-1.png)
2. [Admin Style in WordPress 3.4](/assets/screenshot-2.png)
3. [Admin Style in WordPress 3.6-alpha](/assets/screenshot-3.png)
4. [Admin Style in WordPress MP6 Design](/assets/screenshot-4.png)
5. [Dashicons in WordPress MP6 Design](/assets/screenshot-5.png)
6. [Genericons in WordPress 3.9-alpha](/assets/screenshot-6.png)
7. [Admin Style in WordPress 5.3](/assets/screenshot-7.png)

Installing
----------

[](#installing)

### Manual

[](#manual)

1. Download the plugin as a [ZIP file](https://github.com/bueltge/WordPress-Admin-Style/archive/master.zip) from GitHub.
2. In your WordPress admin click *Plugin -> Add New -> Upload Plugin*.
3. Upload the ZIP file.
4. Activate the plugin.

### Via Composer

[](#via-composer)

The plugin is available as [Composer package](https://packagist.org/packages/bueltge/wordpress-admin-style) and can be installed via Composer from the root of your WordPress installation.

`composer require bueltge/wordpress-admin-style`

If you have changed the default directory structure or just want the plugin to a specific location, you can create a project from the Composer package.

`composer create-project bueltge/wordpress-admin-style `

### Via Git

[](#via-git)

1. Go to your Must Use folder `cd path`
2. `git init .`
3. `git remote add origin https://github.com/bueltge/wordpress-admin-style.git`
4. `git fetch origin`
5. `git checkout master`
6. Check in the network plugin page, if it works

### Automatic Udates

[](#automatic-udates)

The plugin supports the [GitHub Updater plugin](https://github.com/afragen/github-updater) for WordPress. The plugin enables automatic updates from this GitHub Repository. You will find all information about the how and why at the [plugin wiki page](https://github.com/afragen/github-updater/wiki).

Other Notes
-----------

[](#other-notes)

### Bugs, technical hints or contribute

[](#bugs-technical-hints-or-contribute)

Please give me feedback, contribute and file technical bugs on this [GitHub Repo](https://github.com/bueltge/WordPress-Admin-Style), use Issues.

### License

[](#license)

Good news, this plugin is free for everyone! Since it's released under the [GPLv2+](./LICENSE), You can use it free of charge on your personal or commercial blog. But if you enjoy this plugin, you can thank me and leave a [small donation](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6069955 "Paypal Donate link")for the time I've spent writing and supporting this plugin. And I really don't want to know how many hours of my life this plugin has already eaten ;)

### Contact & Feedback

[](#contact--feedback)

The plugin is designed and developed by me ([Frank Bültge](https://bueltge.de))

Please let me know if you like the plugin, or you hate it or whatever ... Please fork it, add an issue for ideas and bugs.

### Disclaimer

[](#disclaimer)

I'm German, and my English might be gruesome here and there. So please be patient with me and let me know of typos or grammatical farts. Thanks

###  Health Score

51

—

FairBetter than 96% of packages

Maintenance48

Moderate activity, may be stable

Popularity47

Moderate usage in the ecosystem

Community33

Small or concentrated contributor base

Maturity66

Established project with proven stability

 Bus Factor1

Top contributor holds 86.8% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~212 days

Recently: every ~404 days

Total

16

Last Release

878d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/0fa321f6c73e14c16d4aea0276673ce1e5d001e49062e32f3b8dc91f0ed10c1e?d=identicon)[bueltge](/maintainers/bueltge)

---

Top Contributors

[![bueltge](https://avatars.githubusercontent.com/u/133425?v=4)](https://github.com/bueltge "bueltge (210 commits)")[![brasofilo](https://avatars.githubusercontent.com/u/1542052?v=4)](https://github.com/brasofilo "brasofilo (10 commits)")[![PierreLebedel](https://avatars.githubusercontent.com/u/3717168?v=4)](https://github.com/PierreLebedel "PierreLebedel (6 commits)")[![stefanpejcic](https://avatars.githubusercontent.com/u/6408320?v=4)](https://github.com/stefanpejcic "stefanpejcic (3 commits)")[![TalAter](https://avatars.githubusercontent.com/u/926653?v=4)](https://github.com/TalAter "TalAter (3 commits)")[![wormeyman](https://avatars.githubusercontent.com/u/1795016?v=4)](https://github.com/wormeyman "wormeyman (2 commits)")[![ocean90](https://avatars.githubusercontent.com/u/617637?v=4)](https://github.com/ocean90 "ocean90 (1 commits)")[![tivnet](https://avatars.githubusercontent.com/u/1696330?v=4)](https://github.com/tivnet "tivnet (1 commits)")[![wren-hearn](https://avatars.githubusercontent.com/u/3364400?v=4)](https://github.com/wren-hearn "wren-hearn (1 commits)")[![fossabot](https://avatars.githubusercontent.com/u/29791463?v=4)](https://github.com/fossabot "fossabot (1 commits)")[![glueckpress](https://avatars.githubusercontent.com/u/308422?v=4)](https://github.com/glueckpress "glueckpress (1 commits)")[![jbradach](https://avatars.githubusercontent.com/u/5265369?v=4)](https://github.com/jbradach "jbradach (1 commits)")[![julien731](https://avatars.githubusercontent.com/u/1441024?v=4)](https://github.com/julien731 "julien731 (1 commits)")[![lriaudel](https://avatars.githubusercontent.com/u/4172532?v=4)](https://github.com/lriaudel "lriaudel (1 commits)")

---

Tags

dashiconsdesign-patternsgenericonslayoutstyleguidewordpresswordpress-mp6

###  Code Quality

Code StylePHP\_CodeSniffer

### Embed Badge

![Health badge](/badges/bueltge-wordpress-admin-style/health.svg)

```
[![Health](https://phpackages.com/badges/bueltge-wordpress-admin-style/health.svg)](https://phpackages.com/packages/bueltge-wordpress-admin-style)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)