How To Have Custom CSS for a Page In WordPress?

Have you ever wanted certain page on your WordPress site to look different, i.e. use a different css on for that page? Here is how you do it!

Identify the page id

Navigate to Pages in wp-admin and hover over the page title, in the address link at the bottom of the page you will see a URL that looks like this – https://technovechno.com/wp-admin/post.php?post=1507&action=edit. From this URL look at the number after post=. That is your page id.

Trick to identify page id in WordPress

Trick to identify page id in WordPress

Before the custom CSS

This is how my page looks prior to the custom CSS switch, note a logo is appearing on center top. We will write some custom css to make that logo disappear.

WordPress page before custom css

WordPress page before custom css

Writing custom CSS specific to our post & page

Head over to Appearance -> Customizing -> Additional CSS. Here you can specify the custom css as shown below.

Note the .page-id-[page-id] added before the css class name. In the below example the site logo will be hidden for page id 1507.

For the purpose of this example we are giving a display:none to hide the logo. You can write any css you wish that specific page to show.

1
2
3
4
/*Custom css for page 1507*/
.page-id-1507 .blog-logo img{
    display:none;}
Code snippet for custom css by page in WordPress

Code snippet for custom css by page in WordPress

After the custom css

You will see the logo has now disappeared, custom css we wrote for our test page worked!

WordPress page reflecting custom css changes

WordPress page reflecting custom css changes

A personal technical diary… To the point… Precise

Previous

How Did I Fix My Add This Button Plugin Load Time Issue In WordPress?

Next

Free WordPress Plugins Everyone Should be Aware of

6 Comments

  1. Adrian

    Very simple to do if you know where and how to find “.blog-logo img” . That can be more difficult than actually writing the css.

    To explain the process you really need to explain the whole process and not assume the reader would know where you found the “.blog-logo img”.

    In reality, I suspect anyone who knew how to find that would also probably know how to write a basic CSS command as well.

    • I truly appreciate your feed back. I see your point and fully agree. I think I need to write a separate post on how to inspect HTML on the fly using tools like Inspect that come with chrome and link that post as a pre requisite here. Again thank you for your feed back it is very helpful.

  2. *An interesting discussion is worth comment. I think that you should write more on this topic, it might not be a taboo subject but generally people are not enough to speak on such topics. To the next. Cheers

    • Thank you!, please keep sending in your suggestions for next topics you would like me to write on, I will make every effort to research and come up with tutorials on same.

  3. *An impressive share, I just given this onto a colleague who was doing a little analysis on this. And he in fact bought me breakfast because I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading more on this topic. If possible, as you become expertise, would you mind updating your blog with more details? It is highly helpful for me. Big thumb up for this blog post!

Leave a Reply

Home | Contact Us | Terms and Conditions | Theme By Anders Norén