MyPage is a personalized page based on your interests.The page is customized to help you to find content that matters you the most.


I'm not curious

A Beginner's Guide on Styling WordPress Pages and Posts

Published on 04 May 15
635
0
0

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.



































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

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.

This blog is listed under Open Source and Development & Implementations Community

Related Posts:
Post a Comment

Please notify me the replies via email.

Important:
  • We hope the conversations that take place on MyTechLogy.com will be constructive and thought-provoking.
  • To ensure the quality of the discussion, our moderators may review/edit the comments for clarity and relevance.
  • Comments that are promotional, mean-spirited, or off-topic may be deleted per the moderators' judgment.
You may also be interested in
Awards & Accolades for MyTechLogy
Winner of
REDHERRING
Top 100 Asia
Finalist at SiTF Awards 2014 under the category Best Social & Community Product
Finalist at HR Vendor of the Year 2015 Awards under the category Best Learning Management System
Finalist at HR Vendor of the Year 2015 Awards under the category Best Talent Management Software
Hidden Image Url

Back to Top