How to Style Each WordPress Post Differently

Have you wanted every post has differently? I’m writing from a supporter so I received many requires to customize every post. In this tutorial, require some basic knowledge about CSS and HTML

They are pretty simple, I will guide clearly so you don’t worry about that. After you practice tutorial, I make sure you will edit any thing in your website easily, not only style posts.
Let ‘s discover them!

Styling post through CSS
Screenshot_8
Following are the CSS classes added by default based on what page a user is viewing.

Core function of wordpress has class  post_class(), you can use .post_class() with a class to put CSS for it.

Example, you want to change color and background-color post has .post-2761 in this code

<article id=”post-2761″ class=”clearfix post-2761 post type-post status-publish format-video hentry category-uncategorized post_format-post-format-video” 

With basic and short CSS, you can put CSS in style. css with this path: your-folder/theme-name/wp-content/style.css

Result after you change:

Screenshot_9

The post class function

When someone developer a wordpress website, you can find class in post is single.php file. Depending on your theme, you can find in <archive> tag in single.php

But in our theme – theme of G5 plus, it is in content-single.php:

Or you can edit this code:

With many classes, please define them then you put a array in post_class function

That’s all, hopefully this article helped you know how to style each WordPress post differently. If you have any further questions for us, don’t hesitate to put it up in the comments. See you again in orther tutorials!

 

Leave a Reply

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