Customizing the appearance of specific pages or custom post types can enhance your website's visual appeal and user experience. Adding custom CSS code allows you to target and style individual elements uniquely.
In this article, we will guide you through the process of adding custom CSS code to a specific page or custom post type in WordPress.
Using CSS selectors, custom CSS can be applied globally to the entire website or specifically to particular pages or post types. To target individual elements on a specific Post, Page, or Custom post type, you need to find out its unique CSS class, which WordPress applies to each Post, Page, or Custom Post type.
Apply CSS code to a particular page or post
Find the Post or Page's ID
Go to WordPress Dashboard → Pages → All Pages
Hover over the Edit button for the page you want to target
At the bottom of your browser, you will see a link with the page's ID
Take note of that unique ID
Notes:
The Page's or Post's ID can also be seen in the Browser Address bar when the page or post is edited in the backend.
The unique CSS Class for a page is
.page-id-numberThe unique CSS Class for a post is
.postid-numberThe common CSS class for All Posts is
.single-postThe common CSS Class for All Pages is
.page
Write the custom CSS code
Based on that unique ID, you can write custom CSS code. For example, if you want to target all the links inside a Page with the ID 32, this will be the CSS code that can be used:
.page-id-32 a {
color: red;
}
The CSS code will target all links (<a>) on the page with ID 32 and set their text color to red.
Apply CSS code for a particular post type
The CSS code can also be applied to different custom post types, such as projects or products.
Find the custom post type's ID for which you want to target different elements
Write your custom CSS code using the selector of
.postid-number- Where is the number of the actual post ID?
Example:
.postid-258388 h1 {
font-size: 48px;
}Select all the H1 elements on the custom post with the ID 258388 and set the font size to 48px.
Apply CSS code for all particular post types
You can also write CSS code to apply elements that only exist on specific post types. For example, instead of writing individual CSS code, like in the example above, you can use the single-{post-name} selector, where the {post-name} is the actual name of the custom post type.
Example:
.single-project h1 {
font-size: 48px;
}This example CSS code will set the font size to 48px for all H1 elements on a single Project page.
The CSS classes for common post types:
Page -
.pagePost -
.single-postProject -
.single-projectProduct -
.single-product