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.

add unique styles to only one post or page

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:
post id using reveal ids plugin

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
view post id in browser url bar


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.

view source html on page or post

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 layout settings with custom 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.

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

10 responses to “Add Unique Custom Styles to One WordPress Page or Post”

  1. Marcy you just taught me how to fish. One of the most educational articles I’ve read and understood. I will use this I’m sure when creating sites henceforth. You are a skilled teacher of WordPress and in presenting and breaking down complex processes making them simple. Thank you!

  2. Katie says:

    Most helpful tutorials, many thanks!

    Is it possible to turn a white background page into a green one for a ‘special report’? This is a for a page I must add not a post.

    The only thing I have against pages is there is no categorie option and no one can comment, I only allow comments on special posts.

    Thanks again.
    K

    • Marcy Diaz says:

      You’re welcome, Katey. You would use the body class. For a page, it looks like page-id-123, where 123 is your page number.
      Then you can try something like this:

      .page-id-123 {
          background-color: #006600;
      }

      You would need to choose your green color.

      • Kate says:

        Hey Marcy, thanks,

        I can do some CSS.

        I find ‘pages’ so boring. I tried colors on categories and they work but not like I wanted…sort of got a double subject line in my post titles.

        For example I write about Asia on one blog so green was great.

        I gave up. lol

        thanks again Marcy!!

  3. Allen says:

    Thanks Marcy,
    It’s really helpful for me who need mass css custom for specific post.
    And I don’t want to set odd “names” for each post’s css code.
    The post help me a lot!

  4. ana says:

    Thank you very much! Saved me :)

Leave a Reply

Your email address will not be published. Required fields are marked *