How do I disable custom css on frontend with Wordpress?

Question

I currently have a custom CSS file specified in Settings > Resource URLS. In this CSS file I override some civicrm.css styles to make the CiviCRM admin screens look a little more like the Wordpress admin area. However, I would like to disable this file when viewing frontend pages e.g. contribution pages.

I've tried the basic usage of the Wordpress wp_dequeue_script option but I can't find what the handle is for this file, so this doesn't work.

Note: I have successfully disabled the standard civicrm.css on my front end pages with this code in functions.php suggested by another user:

function rs_remove_civicrm_styles() {

  global $civicrm_root;

  if (empty($civicrm_root)) {
   return; 
  }

  $civicrm_css = CRM_Core_Resources::singleton()->getUrl('civicrm', 'css/civicrm.css', TRUE);
  CRM_Core_Region::instance('html-header')->update($civicrm_css, array('disabled' => TRUE));

}

But I'm not sure same method can be used for the custom css file?

Answer 1

It might be simpler to just tweak the css to apply only to the admin pages using body.wp-admin (there may be more specific CiviCRM or WP classes you can use).

Answer 2

Just to clarify, the block of code to drop into your functions.php to disable civiCRM CSS on the front-end only looks like this:

// Remove the CiviCRM styles from front-end displays.
function my_remove_civicrm_styles() {
    if (!is_admin()) {
        global $civicrm_root;
        if (empty($civicrm_root)) {
            return;
        }
        $civicrm_css = CRM_Core_Resources::singleton()->getUrl('civicrm', 'css/civicrm.css', TRUE); CRM_Core_Region::instance('html-header')->update($civicrm_css, array('disabled' => TRUE));
    }
}
add_action( 'wp_print_styles', 'my_remove_civicrm_styles', 100 );

Answer 3

Just an improvement for @jeff-van-loben-sels's answer (which saved my day). I've just added a condition on CRM_Core_Resources to prevent a fatal error.

function my_remove_civi_style() {
  if (!is_admin()) {
    global $civicrm_root;
    if (!class_exists('CRM_Core_Resources') || empty($civicrm_root)){
        return;
    }
    $civicrm_css = CRM_Core_Resources::singleton()->getUrl('civicrm', 'css/civicrm.css', TRUE); CRM_Core_Region::instance('html-header')->update($civicrm_css, array('disabled' => TRUE));
  }
}
add_action( 'wp_print_styles', 'my_remove_civi_style', 100 );

Answer 4

CiviCRM Admin Utilities version 0.4.1 introduces options on the plugin's Settings screen to disable (on the front-end of your website):

• the default CiviCRM stylesheet
• the CiviCRM menu stylesheet

And, when the Shoreditch extension is enabled, you can also disable:

• the Shoreditch custom stylesheet
• the Shoreditch Bootstrap stylesheet

For reference, the following code will disable any custom stylesheet defined in CiviCRM when not in WordPress admin:

add_action( 'wp_head', 'my_disable_resources', 9 );
function my_disable_resources() {

    // front-end only please
    if ( is_admin() ) return;

    // bail if CiviCRM isn't present and inited
    if ( ! function_exists( 'civi_wp' ) ) return;
    if ( ! civi_wp()->initialize() ) return;

    // get CiviCRM config
    $config = CRM_Core_Config::singleton();

    // bail if there's no custom CSS file
    if ( empty( $config->customCSSURL ) ) return;

    // get registered URL
    $url = CRM_Core_Resources::singleton()->addCacheCode( $config->customCSSURL );

    // get registration data from region
    $registration = CRM_Core_Region::instance('html-header')->get( $url );

    // bail if not registered
    if ( empty ( $registration ) ) return;

    // set to disabled
    CRM_Core_Region::instance('html-header')->update( $url, array( 'disabled' => TRUE ) );

}