0

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?

1

Nevermind, the last option was actually working, but in my own CSS code I found that I was overriding it. I cleaned up my CSS and it's working with the function I posted above. I also found an alternative method using wp_add_inline_style() which got me to look at my CSS code in more depth. Example code below:

function wpdocs_styles_method() {
    wp_enqueue_style(
        'custom-um-style',
        plugin_dir_path(__FILE__) . 'includes/plugins/ultimate-member/ultimate-member.css'
    );
        $color = get_option('eri_um_account_menu_bg'); //E.g. #FF0000
        $custom_css = "
                .um-account-side li {
                        background: {$color} !important;
                }";
        wp_add_inline_style( 'custom-um-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_styles_method' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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