prevent front end theme from injecting css into wp-admin

I've created a custom child theme of parent theme Cordillera.

This is my child theme's header.php (<head>):

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="<?php bloginfo( 'charset' ); ?>" />
    <?php wp_head();?>
<?php
global $enable_home_page;
$banner = "";
$home_banner_type = cordillera_options_array("home_banner_type",1);
$enable_home_page = cordillera_options_array("enable_home_page");
 if( is_front_page() ){
      $class      = "homepage";
      $banner     = cordillera_get_banner($home_banner_type);
     } 
     else
     {
      $class      = "sitepage";
     }

?>
<link href='http://fonts.googleapis.com/css?family=Waiting+for+the+Sunrise' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<?php if(!(is_front_page())) { ?>
<!-- non-front-page CSS -->
<style>
    html {
      background-color: transparent;
      background: url('<?php echo get_stylesheet_directory_uri(); ?>/images/bg-product.jpg') no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
<!-- END non-front-page CSS -->
</style>
<?php } ?>
<?php if(is_page(6)) { ?>
<!-- shop page CSS -->
<style>
    .blog-main {
      background-color: transparent !important;
    }
</style>
<!-- shop page CSS -->
<?php } ?>
</head>

I haven't included a link to my child theme's style.css in this file, instead using:

add_action( 'wp_enqueue_scripts', function() {
    wp_register_style( 'childstyle', get_stylesheet_uri());
    wp_enqueue_style( 'childstyle', get_stylesheet_uri());
});

in my child theme's functions.php.

However, when logged into Wordpress admin, and viewing WooCommerce pages, some of the admin tool bar links are being colored by my child theme's style.css.

enter image description here

How can I prevent this? Thanks.

Answers 2

  • Restructure your CSS files and remove !important rules from your .css files and use proper markup (classes, IDs and etc.).

    e.g.

    a, .entry-summary a, .entry-content a {
      color: #06F !important;
      font-weight: 400;
    }
    

    Judging from the test WS which was found with site: search in Google using the URL in your Facebook profile (Temper Temper).

    Edit 1: Although !important rules can be handy from time to time, usually they broke the structure especially if they are not used with proper and detailed planning.


  • What I'd try to do is applying !important to wp-admin native styles. But that would be costly because I would need full control of core files, and I would lose all the styles when upgrading to newer version of wordpress.

    If I don't want to mess with native wordpress code and do it specifically with the theme, I'd try to have unique classes for the links and all the theme's conflicting elements with admin area. Like, if I wrap my whole theme in <div id="viewport"> and then in my theme file I do #viewport a{color: yellow !important;} I guess it would work.

    That's all I can think of, may be there would be better way just to prioritize execution of the CSS files by using a custom filter.


Related Questions