Wordpress custom CSS for specific page not loading

Question

I am trying to change some css for a specific wordpress page. It should be that I can just add .page-id-# before the new css rule. It seems simple but I just can't get it to work. I've tried different selectors, adding !important, trying different browser, checking the id, trying different pages etc but the custom css never loads.

Eg. In the code I've tried below the text on page 2 should be blue rather than red but the custom css doesn't load and so it stays red. Am I missing something obvious?

Page 1 -------------------------------

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />

    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />

    <?php
    wp_head();
    ?>
  </head>


  <body>

  
    <div class="change_colour">Hello</div>
    <div>
    <a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>

  </body>

</html>

Page 2-----------------------------

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />

    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />

    <?php
    wp_head();
    ?>



  </head>



  <body>

  
    <div class="change_colour">Hello</div>
    

  </body>

</html>

CSS------------------------

/*
Theme Name: Testing
Text Domain: Testing
Version: 1.0
Decription: 
Tags: 
Author: Jonny

*/


.change_colour {
    color: red;
}

.page-id-2 .change_colour {
    color: blue;
}

.page-id-2 .change_color 1) you are calling a CLASS page-id-2 not an ID as specified in your question .. And 2) the class name is not spelled correctly in the css .. As your div element uses .change_colour and in your css it is spelled .change_color — Zak
– Zak, Commented Feb 14, 2022 at 23:38
Sorry, tired mistakes. I've changed the spelling and it still doesn't work. By ID I meant the page ID, but all the help I've read says that it is called as a class eg. ".page-id-2" — Jolly Oli
– Jolly Oli, Commented Feb 14, 2022 at 23:47
Your code should work as desired, at least from what you posted in your question. Check the exact spelling of the classes with the inspector tools, and also if the page-id class is really added to the body tag. — Johannes
– Johannes, Commented Feb 15, 2022 at 0:02
Thank you, yes it was that I wasn't adding the page-id class to body — Jolly Oli
– Jolly Oli, Commented Feb 15, 2022 at 7:30

Aman · Accepted Answer · 2022-02-15 04:45:54Z

2

You have to add <?php body_class(); ?> inside your opening body tag then you have to inspect the page and check the body tag for your .page-id-** class and then write CSS as per the class you get in the body tag.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="XAMPP is an easy to install Apache distribution containing MariaDB, PHP and Perl." />
    <meta name="keywords" content="xampp, apache, php, perl, mariadb, open source distribution" />
    <link href="wp-content/themes/testing/style.css" rel="stylesheet" type="text/css" />
    <?php
    wp_head();
    ?>
  </head>
  <body <?php body_class(); ?> >
    <div class="change_colour">Hello</div>
    <div>
    <a href="http://localhost:8080/testing/?page_id=2">Page link</a></div>
  </body>
</html>

answered Feb 15, 2022 at 4:45

Aman

1115 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jolly Oli Over a year ago

Thank you, I've tried this but it still gives me the same page-id that I'm already using.. Edit: wait it works! Thanks! I didn't know to add the page-id class to the body

Collectives™ on Stack Overflow

Wordpress custom CSS for specific page not loading

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related