Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I have activated child theme and would need to completely disable the child theme css on certain pages, leaving only the parent theme css.

How can this be done?

share|improve this question

1 Answer 1

up vote 1 down vote accepted

There are two methods to accomplish what you what need to do.

METHOD 1

The first method is to create a separate stylesheet from your child's main style.css, and then move all your css into that stylesheets. For this example, lets call this stylesheet custom-style.css.

As said, copy all the css that will be specific to only certain pages to this new stylesheet.

You can now enqueue this new stylesheet using wp_enqueue_style() conditionally using the is_page() conditional tag, only for the pages that you need. So open up your child functions.php and add the following in there

function enqueue_my_style() {
  if( is_page( SEE CODEX FOR EXAMPLES)) {
    wp_enqueue_style( 'my-style', get_stylesheet_directory_uri().'/custom-style.css' );
  }
 }
 add_action( 'wp_enqueue_scripts', 'enqueue_my_style' );  

METHOD 2

Default body_class() makes a few css selector available by default to target specific pages using css. Here are these selectors

  • .rtl {}
  • .home {}
  • .blog {}
  • .archive {}
  • .date {}
  • .search {}
  • .paged {}
  • .attachment {}
  • .error404 {}
  • .single postid-(id) {}
  • .attachmentid-(id) {}
  • .attachment-(mime-type) {}
  • .author {}
  • .author-(user_nicename) {}
  • .category {}
  • .category-(slug) {}
  • .tag {}
  • .tag-(slug) {}
  • .page-parent {}
  • .page-child parent-pageid-(id) {}
  • .page-template page-template-(template file name) {}
  • .search-results {}
  • .search-no-results {}
  • .logged-in {}
  • .paged-(page number) {}
  • .single-paged-(page number) {}
  • .page-paged-(page number) {}
  • .category-paged-(page number) {}
  • .tag-paged-(page number) {}
  • .date-paged-(page number) {}
  • .author-paged-(page number) {}
  • .search-paged-(page number) {}

When applying styles to specific elements, you can use these selectors to target specific elements for specific pages only, for instance

.home H1 {}

will only target the H1 element on the homepage

share|improve this answer
    
Thansk, I went with the first option, works great. –  user1049961 May 28 at 11:28

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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