A Handy Guide on Adding Custom Styles to A Single WordPress Page or Post

0

WordPress makes the process of styling website pages and posts a hassle free task. In fact, you can style both the pages and posts in a consistent manner. But, what if you need to add some custom styles to your web pages or posts on your WordPress site?

Put it simply, let’s say, you want to create a promotional (i.e. sales) page for your WordPress site containing large-size headings and a different color button compared to the other pages on your site, as shown in the screen shot below:

Now in order to add special styles such as the one shown above or any other unique styles to a WordPress page or post, you can use the WordPress body class. In this post, I’ll be discussing about how using the body class, you can add custom unique styles to your website pages and posts. But, before proceeding any further it is important to understand about WordPress body class.

Body Class in WordPress – An Overview

When you’ll look at a page or post in WordPress installation, you will notice that each of them contains a unique post ID. Using this ID available within the class – added to the body tag – pages and posts can be styled using CSS. We’ll be using the unique ID of one page or post to style them. But, you’ll first need to know how you can find the page or post ID. You can achieve this objective using the following two methods:

#Method 1: The first method requires using a simple plugin such as Reveal ID. As the name implies, this plugin help in revealing the IDs of a WordPress page/post. Thanks to this plugin, you can view the IDs displayed in the last column of your WordPress admin dashboard. For doing so, you need to navigate to Pages → All Pages or Posts → All Posts.

Note: In case you’re creating a new page or post, you will have to first “Save Draft”, and only then you’ll be able to see the ID.

#Method 2: The second method helps in finding the ID of a page or post manually. For this purpose, simply click to edit the page or post whose ID you want to find. Next, go to Add New → Post or Page, and assign a suitable title to it and “Save draft”. And then, at the top of your post edit screen in the browser URL, you’ll see that the id of the page will be 447, as shown in the screen shot below:

Once you’ve figured out the unique ID of the post, WordPress will assign the post above the body class having “postid= 447”.

In case, you’ve a page having “post=445” in the URL bar, then the WordPress body class will contain “page-id-445″. Keep in mind that an extra “-” is used to define the ID of a page when compared to the ID of a post. So, now the post class of the page will be “post-445”.

You can view the body class added to your WordPress page or post, by viewing the source code using a tool, such as Firebug or others.

Adding Unique Styles to CSS or Custom CSS Editor

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

[code lang=”css”]

h4 {

color: #046ca1;

size: 24px;

}

[/code]

 

Let’s assume that your sales page contains an ID of post=445 and you would like to make the font of your page large in size. Plus, you may need to change the color of the button to yellow. In order to make every heading of each page large in size and have yellow color button, you need to style that page. For this, you’ll need to use a body class of page-id-445 as shown the code below (that needs to be added to the bottom of your stylesheet):

[code lang=”css”]

.post-445 h4 {

color: #77a13b;

size: 24px;

}

[/code]

Note: Make sure to add the body class of “.post-445″ before h4.

Let us suppose that other than the sales page rest of your website pages contain blue buttons (you can view the source code in your theme style.css):

[code lang=”css”]

button,

input[type="button"],

input[type="reset"],

input[type="submit"],

.button {

background-color: #046ca1;

border-radius: 2px;

color: #fff;

cursor: pointer;

padding: 14px 20px;

width: auto;

}

[/code]

Now for changing the “blue” color to “yellow” on your sales page (.post-445), simply add “.post-445” just before button as follows:

[code lang=”css”]

.post-445 button,

.post-445 input[type="button"],

.post-445 input[type="reset"],

.post-445 input[type="submit"],

.post-445 .button {

background-color: #ffff00;

}

[/code]

Summing Up!

No matter whether you’re running a small-size or large WordPress site, at some point of time, you may want to add custom unique styles to your website pages or posts. The best way to do so is to use the body class in WordPress. This class is applied within the HTML <body> element and helps to apply unique styles to different sections in a WordPress site. There are two methods discussed above, using which new body classes can be added within a WordPress site.

So, if you need to add some custom styles in your page or post, then reading this post will hopefully help you understand how you achieve this objective.