What makes WordPress utterly gripping is the way it provides its users an ability to customize posts and pages to revamp the appeal of their website. WordPress' customization propensity can be taken further and recognized well when it comes to styling a specific page or post to meet your website needs.
In this tutorial, we are going to discuss about how to give a particular post its own unique style using WordPress Body and post classes. The tutorial is easy to follow and will help you to accomplish your task.
So, let's start!
Understanding About WordPress Body and Post Classes
Each WordPress post and page is provided with its own unique ID. This ID attribute is used to identify different pages and it is added to the <body> element.
- The body tag (body_tag) is presented on almost every part of your page, such as header, footer, sidebar etc.
- On the contrary, the post class (post_class) function is applied to the index.php, single.php or any other area that contains post or content of the website.
I will use this unique ID to add styles to our targeted page or post.
Genesis child theme users can add their own body and post class to modify the page.
Locating the post or page ID
There are two ways to go about it. We will discuss about each of them in detail:
1st Method
This method uses a plugin known as Reveal IDs , which shows IDs of WordPress pages, posts, or categories. Once the plugin is installed and activated, go to Pages >> All Pages or Posts >> All Posts. After this, you can see all the IDs in the last column of your WordPress dashboard. Forget not to Save draft if you are working on a new page or post.
2nd Method
- Select the Edit option on your post and page
- You can also go to Add New > Post or Page, create a relevant title, and Save Draft
- As you click on the Edit option, you'll notice something like this on the top of the browser URL bar.
- …/wp-admin/post.php?post=447&action=edit
Here, the post ID is 447.
Playing Around WordPress Body and Post Classes
Now, WordPress will provide the above post with a body class of postid=447. So, post= 447 will be the post class.
Consider a situation where you have a WordPress Page and Post=64 is displayed at the top of the URL bar. In such a scenario, WordPress will add a body class to the page page-id-624. Now, the post class for this page is post-624.
Now, View Source your page and you can see that classes have been added to your page.
Style.css or Custom CSS Editor
Let's say you have a header h4 with a size around 24px and styled in Blue. This is how your CSS will look like.
h4 {
color: #046ca1;
size: 24px;
}
Assume the page you wish to style has a post ID= 624. And you want to increase the size of the font of h4 element little bit and also style it in green instead of blue.
We can achieve this purpose using the body class of .page-id-624. Further, .post- 624 will be used if in case you only want the content area to have larger heading styled in green color.
For this, open your style.css file and insert the below mentioned line to it.
.post-624 h4 {
color: #77a13b;
size: 28px;
}
From the above code, it's clear that a class of .post-624 has been added before h4.
You can also extend the process by styling buttons on the page you want to customize. This is how your theme.css file looks.
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;
}
You can go on to style them by adding the following code to your style.css file or Custom CSS Editor.
.post-624 button,
.post-624 input[type="button"],
.post-624 input[type="reset"],
.post-624 input[type="submit"],
.post-624 .button {
background-color: #77a13b;
}
Notice we changed the color of button.
To Wrap Up
See, it wasn't that hard! Styling WordPress posts or pages is an exciting process and can be achieved easily if a definite procedure is followed. Be sure to bookmark this page for any future reference.
Juana
