How To Use Custom CSS on Specific Pages in WordPress
In this article I’ll be showing you how to use custom CSS on specific pages in WordPress. If you’ve ever wanted to apply styling to a specific unique page but not been sure how to before, look no further!
How to target specific pages
WordPress actually makes it quite easy for us to style specific pages (isn’t it awesome?) by adding a unique page specific class to the <body> of every page.
To target and apply styles to specific pages, you first need to locate the page specific class in the <body> of the page you are looking to style.
<body> tags you say?
Don’t worry, I’ve provided a simple video below showing you exactly what I mean.
As you can see from the video, there’s a unique page-id class generated in the body. Don’t be confused by the id bit of the class (I was at first I’ll admit), it’s a class not an #id.
How to output your CSS styles
For those of you new to WordPress or CSS and who want to use custom CSS on specific WordPress pages, for your styling to take effect you will need to add your CSS code to the styles.css file accessible via your WordPress backend, generally by following this path:
Appearance > Editor > Styles.css
Depending on the Theme you are using, you may have a Custom CSS tab built into the theme, which does the same thing for you and outputs your styles within your Styes.css file, but allows you to input your CSS in an editor within a Theme tab.
Applying styling using the unique page class
In the video above I showed you how to find the specific page-id class using our WordPress Websites page as an example, which you need to use custom CSS for specific pages on WordPress
In the video it appears that the page-id class for this page is:
.page-id-2211So how would I apply styles to this particular page?
In the same way that I’d apply styling normally, using the page-id-class as my ‘element’ or ‘target’.
For instance, if I wanted to make the title on that page monstrously large, I would use the below CSS:
.page-id-2211 .vcex-heading-inner.clr{ font-size: 100px; }Monster title didn’t look great surprisingly.
Styling stuff page-wide
Styling an element page-wide
If you want to apply styles to all the <p> tags on a particular page for example, the code would look like this:
.page-id-2211 p { font-size: 24px; }Styling multiple elements page-wide
If you want to apply a set of styles to multiple tags on a particular page, it would look like this:
.page-id-2211 h1, h2, h3, h4, p, img { margin-top:20px; }Styling multiple pages with the same CSS
Let’s say that you want to style multiple unique WordPress pages with the same CSS. You could write multiple lines of code that would be inefficient and not time effective, like below:
page-id-2741 h1, h2, h3, h4, p, img { margin-top: 20px; }.page-id-2211 h1, h2, h3, h4, p, img { margin-top: 20px; }
Page-id-2741 I found out was the page-id class for my WordPress Pro page.
Writing out the same code or styles for every single page could get time consuming, fear not though, there’s a more efficient way of writing the CSS to target multiple pages, in one line of code.
Styling multiple pages in one line
I’ve rewritten the above CSS to target multipe pages using one line of code below:
.page-id-2211 h1, h2, h3, h4, p, img, .page-id-2741 h1, h2, h3, h4, p, img { margin-top: 20px; }And a simpler piece of styling:
.page-id-2741 p, .page-id-2211 p { color: red; }As you can see from my images below, this line of code changed the paragraph text red on both my WordPress Websites and WordPress Pro pages. I did change it back after, unfortunately the red text wasn’t for me.
Styling the blog page
To style your Blog page with custom CSS on WordPress, i.e the page your blog posts are displayed on, you could use the following code:
.blog h1 { font-size: 60px; }If this doesn’t work, it could be because your blog page isn’t set as the default post page in your WordPress reading settings.
If your CSS isn’t displaying, use the same page-id method to grab the page-id of your actual blog page.
Styling a specific post
Styling a specific post is just as easy as styling a specific page. Use exactly the same method, but instead of a page-id, you will be looking for a unique post-id for the post you want to style.
Below I’ve provided an example of how you would style a specific blog post.
.postid-4474 p { font-size: 24px; }post-id-4475 is the unique post-id class for my blog post Why Your Website Is Sabotaging Your Sales.
If I were to save this code in my custom css tab, or in the .styles css file for my WordPress theme, it would be output onto the Why Your Website Is Sabotating Your sales blog post.
Hopefully you found this post How To Use Custom CSS on Specific Pages in WordPress useful. If there’s anything you’d like to see expanded upon let me know, or if you need help with a WordPress project, email me at — hello@squareinternet.co
Originally published at squareinternet.co.
