• Skip to primary navigation
  • Skip to main content
  • Skip to footer
Amethyst Website Design logo

Amethyst Website Design

Affordable WordPress Website Design for Small Business

  • Home
  • About
  • Services
  • Praise
  • Portfolio
  • Blog
  • Contact »

WordPress Tutorials CSS Styles, Themes

Add Unique Custom Styles to One WordPress Page or Post

February 10, 2015 Updated on December 2, 2020 Marcy Diaz

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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.

Share this post:

Share on TwitterShare on FacebookShare on PinterestShare on LinkedInShare on Email

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

Tell me about your website project for a personalized solution!

Contact Marcy »

___

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

___

About Marcy

Marcy Diaz

I'm Marcy Díaz, the owner of Amethyst Website Design, a small business located in Phoenix, Arizona (in Ahwatukee Foothills). I help people, like you, grow your business with an affordable WordPress website design. Sign up for my blog and website tips that help you manage your own website.

Reader Interactions

Comments

  1. Marcus Tibesar says

    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!

    Reply
    • Marcy Diaz says

      Hi, Marcus,
      You made my day! Thank you!

      Reply
  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

    Reply
    • 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.

      Reply
      • 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!!

        Reply
  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!

    Reply
    • Marcy Diaz says

      You’re welcome, Allen! I’m glad this post helped.

      Reply
      • Allen says

        Hi,Marcy
        The method 2 to find page or post’s id seems doesn’t work for me.
        There is no “ID option” when I open my screen option .

        Reply
        • Allen says

          Sorry I made a mistake.
          I see the IDs after I install the plugin!

          Thanks!

          Reply
  4. ana says

    Thank you very much! Saved me :)

    Reply

Leave a Reply Cancel reply

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

 

Footer

Meet Marcy

Marcy Diaz, Amethyst Website DesignAmethyst Website Design is a small business owned by Marcy Díaz. I help people, like you, with your website by creating an affordable WordPress website using Genesis themes to fit your business and budget. I especially love working with new and small business owners, and can help you with the online part of your business.
Read More »

Let’s Connect!

  • Facebook
  • Twitter
  • Pinterest
  • Linked In
  • GitHub

Contact Info

Amethyst Website Design

Email: Contact Marcy
Phone: 602.759.0501

PO Box 94782
Phoenix AZ 85070
Located in Ahwatukee Foothills

member of local first az
  • Sitemap
  • Cookie Policy
  • Terms and Conditions
  • Privacy Policy

© 2021   Amethyst Website Design   ◆   Log in

Using WordPress and the Genesis Framework

This site uses cookies for the best browsing experience. By continuing to use this site, you accept our Cookie Policy »OK, got it!