4

I'd like to use some colors from the wordpress admin theme to build my back-end plugin's theme, based on Bootstrap-3 & SASS/LESS.

I think I saw a few functions to get the colors of the admin theme but I am not sure its the right way to go. I am aware there might be 3th party admin themes but I'd be already happy to get the standard-themes covered.

Anyone knows how to do it? thanks. ps: a javascript solution is ok too.

update: I can't rely on Wordpress specific markup since my app is also used outside of WP. All i want is build my plugin's theme (Bootstrap 3-4) using the Wordpress's admin theme's CSS variables (if such exists). So if anyone knows how to build a variables.less/scss file for the Wordpress admin themes, then I am done I guess.

Improve this question

3 Answers 3

Reset to default
3

Building admin interfaces in WordPress is quite ad hoc. Which is historical reason for many of those interface looking nothing like WP admin surrounding them.

In general it works in terms of markup, rather than colors. You don't code in terms of "black" or "red", but in semantic terms like "primary" or "notification".

There are are some plugins/guides out there that help figure out markup (for example WP Admin Pattern Library) but they aren't really complete/official/whatever.

So in general the process loosely works as following:

  1. Find a part of native WP admin with elements you need.
  2. Ripoff and reuse HTML markup of those elements.
  3. Fine tune whatever is missing with your own CSS.
  4. Keep an eye out for changes in markup with new WP releases (it likes to fiddle and keep admin pretty every couple years).
Improve this answer
2
  • you got me, sold! thanks the for detailed answer again Rarst! i just wish Wordpress would use something like in Bootstrap or others: one file with all style variables...easy to use on the long ;-)
    – xamiro
    Commented Dec 13, 2015 at 20:17
  • after a while fiddling, I figured out that will ruin my app's markup. None of my widgets/views uses any of the wordpress code and less even: none need to know anything about wordpress internals except the colors and maybe also some paddings or fonts. I think its easier to stick to something like variables.less. All what i need to do is extracting wordpress CSS variables and create a variables.less/scss file and build my app theme with that, per admin theme. What you think?
    – xamiro
    Commented Dec 17, 2015 at 14:48
0

After long digging in 3rd party admin themes and the Wordpress source code (wp-admin/css), the only reliable way to extract something usable like a variables.less/sass file from the latest Worpdress code seems to be in doing it the hard way:

  1. parse the files from wp-admin/css with an CSS-AST generator (see http://iamdustan.com/reworkcss_ast_explorer/#/lExnKWzBFZ)
  2. then transfer the selectors of interest ('.wp-ui-text-icon',....) into the variables.less/sass (in Node.JS).
  3. As soon you've that file, you're ready to integrate it in your theme

(as soon I got something running, I will post it here; it's quite a painful job but worth the shot).

Improve this answer
0

Many years later, CSS variables are available, and it's pretty easy to extract the currently active admin color scheme to a set of variables that can then be used by a plugin's stylesheet: https://wordpress.stackexchange.com/a/369713/181870

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.