Add Unique Custom Styles to One WordPress Page or Post

One of the nice things about using WordPress is that all the pages and posts can be styled consistently. But sometimes I’m asked to make a particular page or post have custom or unique styles.

So let’s suppose you’re creating a sales page, and you want the headings and the buttons to be a green color instead of the blue on the rest of the site. This is how to use WordPress body and post classes to add the special styles.

About Body and Post Classes

Each page or post or custom post type in WordPress has a unique post ID. This ID is used as part of the class that is added to the body tag and to the post or article tag.

• The body tag applies to the entire page or post, including sidebars and footers.
• The post class applies just to the main content, the content that is in the editor.

We’re going to use that unique ID to style that one page or post.

If you’re using a Genesis child theme, you can add your own body or post class to use for styling. More on that later.

How to Find the Post or Page ID

Method 1:

You can add a plugin, such as Reveal IDs. You can easily see the IDs in the last column in your WordPress Admin when you click on Pages > All Pages or Posts > All Posts. If you are working on a new post or page, you will need to “Save Draft” before you can see the ID.

Method 2:

• Click to Edit your post or page.
• You can also Add New > Post or Page, give it a title, and then “Save Draft”.
• In your browser URL bar at the top of this edit screen, you will see something like this where the id for this post is 447:
  …/wp-admin/post.php?post=447&action=edit

So now we have our post ID of 447.

About WordPress Body and Post Classes

WordPress will give the post above a body class of “postid-447”. The post class will be post-447.
If you have a page, and you see post=624 in the url bar, WordPress will add a body class of page-id-624 (notice the extra -). The post class for this page will be post-624.

You can see the classes added if you View Source for your page or post or if you use a tool, such as Firebug or Chrome Web Developer Tools.

Add Styles to style.css or Custom CSS Editor

If your style.css has styles for h4 with a blue color and size of 24px, the CSS will look like this:

h4 {
     color: #046ca1;
     size: 24px;
}

Now suppose your sales page has an ID of post=624. And you want to make the font larger and the color a green.
If you want to make every h4 heading on that page green and larger, you would style it using the body class of .page-id-624. If you only want the content area to have larger, green h4 headings, you would use .post-624, which is what I’ll use.

You can add the following to the bottom of your style.css (or just before the @media section begins) or in Appearance > Customize > Additional CSS.

.post-624 h4 {
     color: #77a13b;
     size: 28px;
}

Notice that a class of .post-624“was added before the h4.

And suppose your website buttons are blue; this is in your theme style.css:

button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button {
	background-color: #046ca1;
	border-radius: 2px;
	color: #fff;
	cursor: pointer;
	padding: 16px 20px;
	width: auto;
}

Now suppose you want to change them to green on your sales page (.post-624). You would add this to your style.css or Additional CSS:

.post-624 button,
.post-624 input[type="button"],
.post-624 input[type="reset"],
.post-624 input[type="submit"],
.post-624 .button {
	background-color: #77a13b;
}

Since we only want to change the button color, that is all we need for the CSS for this page.

Genesis Only Body and Post Classes

Genesis child themes have a “Layout Settings” section on the post or page editor, near the bottom of the screen.

The Custom Body Class and Custom Post Class fields can be used to add a class name of your choice to either of these fields to help you style your pages and posts.

• The Custom Post Class applies only to the content in the editor or content area; it will not affect the sidebars or footer.
• The Custom Body Class will affect the styles on the entire page, including the sidebars and footer.

These Custom Classes are especially useful because you can add the same class to additional pages, and they will use the styles that you already added. You don’t need to keep adding the post-123 or post-231 classes to your style.css. You can style once and use it again.

Add my-special-sales Post Class

Let’s say you want to add a custom post class to all your sales pages; you should choose a unique name. So you add .my-special-sales, to the Custom Post Class field.
Then you would add the styles to style.css, like this:

.my-special-sales h4 {
     color: #77a13b;
     size: 28px;
}
.my-special-sales button,
.my-special-sales input[type="button"],
.my-special-sales input[type="reset"],
.my-special-sales input[type="submit"],
.my-special-sales .button {
	background-color: #77a13b;
}

Now you can add styles to that one (or more!) special post or page to make it different from the rest of your website.