CODEWITHSUNDEEP
csswordpress
fattyres.co.uk
fattyres.co.uk

Reputation: 45

How to exclude multiple Wordpress pages from custom CSS

I've written some custom CSS that places an image like so:

.marker-cluster
{
   content: url(/wp-content/uploads/2020/09/mtb_multiicon.png); 
}

However there are some page I'd like to exclude this from. I can exclude a page like this:

body:not(.page-id-3032) .marker-cluster
{
   content: url(/wp-content/uploads/2020/09/mtb_multiicon.png); 
}

This works fine, but there are 10 pages in total across the site that I'd like to exclude and adding an extra not tag breaks the CSS. I've tried:

body:not(.page-id-3032) body:not(.page-id-3918) .marker-cluster
{
   content: url(/wp-content/uploads/2020/09/mtb_multiicon.png); 
}

and

body:not(.page-id-3032 .page-id-3918) .marker-cluster
{
   content: url(/wp-content/uploads/2020/09/mtb_multiicon.png); 
}

Both of these cause the CSS to stop working on all pages.

Upvotes: 0

Views: 192

Answers (3)

Rakesh Roy
Rakesh Roy

Reputation: 970

Hi as I see you want it to do it in CSS way but then you have to write lots of CSS and maintaining the CSS may be time-consuming.

So you can do is add a body class to those pages which you want to exclude.

How To add body class in wordpress

add_filter( 'body_class','add_exclude_body_class' );
function add_exclude_body_class( $classes ) {

    global $post;
    $post_id = $post->ID;
    $exclude_ids = [1,2,3,4]; // just add your post ids here
    if(in_array($post_id, $exclude_ids )){
       $classes[] = 'exluded-page'; // your exclude class
    }
    return $classes; 
}

Add Css

body:not(.exluded-page) .marker-cluster
{
   content: url(/wp-content/uploads/2020/09/mtb_multiicon.png); 
}

Now You don't have to write CSS again for that. Thanks.

Upvotes: 1

fattyres.co.uk
fattyres.co.uk

Reputation: 45

I've got it now. The correct syntax is:

body:not(.page-id-3032):not(page-id-3918) .marker-cluster
{
   content: url(/wp-content/uploads/2020/09/mtb_multiicon.png); 
}

Upvotes: 0

Sohil Chamadia
Sohil Chamadia

Reputation: 426

wordpress provide a method called is_page($slug_of_page). Use that method to apply css on specific page.Below i have mention a demo.

<?php 
    if ( is_page($slug_of_page) ) { 
        // include your stylesheet path over here. 
    } 
?>

Upvotes: 0

Related Questions