How to Change CSS Colors from Custom Plugin Settings Page


I have a custom WordPress plugin with a variety of settings that I use across multiple websites. I also use a few of the same 3rd party plugins across all of those pages. I would like to be able to stylize them the same way, but with different colors. While I could add CSS to every site, it is difficult for some of our non-techy admins to go through the CSS and change the hex codes on the correct classes. I am trying to figure out the best way to do this. Here is what I’ve looked into so far:

  • I understand that I could change classes with PHP, but I can’t change the classes on 3rd party plugins this way.
  • Doing it with JS is annoying to watch the page load with default colors and the switch after a second.
  • Tried turning a CSS file into a PHP file with a CSS type header, but it doesn’t seem to work unless I also update the htaccess file. I don’t want to do that for every site, and I see plugins changing other plugin colors all the time, so I know it’s possible without changing the htaccess file.
  • I tried adding style via PHP inside and outside of a function, but I get errors if it’s outside of a function, and with it inside of a function nothing happens:
add_action( 'init', 'getCssOptionsUM' );
function getCssOptionsUM(){
   // ACCOUNT PAGE: Menu Background Color
   if (get_option('eri_um_account_menu_bg') != '') {
       echo '<style>.um-account-side li { background: '.get_option('eri_um_account_menu_bg').' !important; }</style>';
   // ACCOUNT PAGE: Menu Background Hover Color & Text Hover Color
   if (get_option('eri_um_account_menuh_bg') != '') {
       echo '<style>.um-account-side li:hover > a, .um-account-side li:hover > a .um-account-icontip {background: '.get_option('eri_um_account_menuh_bg').' !important; }</style>';
   if (get_option('eri_um_account_menuh_txt') != '') {
       echo '<style>.um-account-side li:hover > a, .um-account-side li:hover > a .um-account-icontip { color: '.get_option('eri_um_account_menuh_txt').' !important; }</style>';

By the way, I am sure that the options page is saving the data.

Any suggestions?

Mr Gandy 2 months 0 Answers 13 views 0

Leave an answer