The best ways to Style Each WordPress Post In Different Ways

If you have actually surfed the web enough you have actually possibly seen that some sites design each post in different ways. For example, some websites make use of various shades for every category, or others may use a totally different style for all the posts. Are you interested how this is feasible? Well, we will certainly reveal you in this article and you will see just how simple it in fact is.

If you ever before wanted to discover how to design each WordPress blog posts differently, then you’re in the appropriate place. In this write-up, we will show you how to design each WordPress blog post differently.

Note: This tutorial requires you to include customized CSS in WordPress You will certainly additionally need to have the ability to make use of the Inspect tools. Some fundamental CSS and HTML understanding is needed.

Styling Individual Posts in WordPress

WordPress adds default CSS courses to different elements on your website. A common compliant WordPress theme must have the code called for by WordPress to add CSS courses for body, articles, web pages, widgets, food selections, as well as much more.

A core WordPress function called post_class() is used by themes to tell WordPress where to include those default CSS classes for blog posts.

If you see your site as well as make use of the Inspect device in your web browser, after that you will certainly be able to see those classes added for every blog post.

Complying with are the CSS courses included by default based on just what web page an individual is seeing

. post-id
. message
. attachment
. sticky
. hentry (hAtom microformat web pages)
. category-ID
. category-name
. tag-name
. style- format-name
. type-
. has-post-thumbnail
. post-password-required
. post-password-protected

An example outcome would certainly resemble this:.

<article id=”post-412″ class=”post-412 post type-post status-publish format-standard hentry category-news”>

You could style each WordPress article in a different way making use of the respective CSS classes.

As an example, if you wanted to design a private post, after that you can make use of the post-id class in your custom CSS.

.post-412 {
background-color: #FF0303;

Do not forget to transform the message ID to match your own.


Allow’s take a look at one more example.

This time around we will certainly design all posts submitted under a particular group called information.

We could do this by including the complying with custom CSS to our theme”.

.category-news {
font-size: 18px;
font-style: italic;

This CSS will impact all articles submitted under information classification.

The Blog post Class Function

Theme developers utilize the post_class function to tell WordPress where to add the blog post courses. Normally it is in the <article> tag.

The message class function not just tons the default WordPress produced CSS courses, it likewise allows you to add your very own classes.

Relying on your theme, you’ll discover the post_class feature in your single.php data or in the content theme files. Usually, the code will certainly look something like this:.

<article id=”post-<?php the_ID(); ?>” <?php post_class(); ?>>

You can add your own customized CSS course with a feature like this:.

<article id=”post-<?php the_ID(); ?>” <?php post_class(‘longform-article’); ?>>

The post_class will print out respective default CSS courses along with your custom-made CSS class.

If you intend to add multiple CSS classes, after that you can specify them as a variety and afterwards call them in the post_class function.

$custom_classes = array(
<article id=”post-<?php the_ID(); ?>” <?php post_class( $custom_classes ); ?>>

Style Posts In different ways Based on Writers

The default CSS classes produced by the_posts operate does not consist of writer name as a CSS class.

If you wish to personalize the style of each blog post based upon writer, after that you will need to initial include the author name as a CSS class.

You can do this using the complying with fragment:.

<?php $author = get_the_author_meta(‘user_nicename’); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class( $author ); ?>>

This code will add the user’s nicename as a CSS class. Nicename is an URL friendly name made use of by WordPress. It does not have spaces, and also all characters remain in lowercase which makes it excellent to use as a CSS class.

The above code will provide you an outcome such as this:.

<article id=”post-412″ class=”peter post-412 post type-post status-publish format-standard hentry category-news”>

Now you can use.peter in your customized CSS to style all blog posts by this specific writer to look various.

.peter {
border:1px solid #CCC;

Style Messages Based on Popularity making using Comment Counter

You might have seen websites with preferred posts widgets which are occasionally based upon comment matters. In this instance, we will show you ways to design blog posts in different ways using the remark matter.

Initially, we have to obtain the remark matter and also connect a class with it.

To get the remark count, you’ll have to add the complying with code in your style files. This code goes inside the WordPress loop, so you can include it just before the <article> tag as well.

$postid = get_the_ID();
$total_comment_count = wp_count_comments($postid);
$my_comment_count = $total_comment_count->approved;
if ($my_comment_count <10) {
$my_comment_count = ‘new’;
} elseif ($my_comment_count >= 10 && $my_comment_count <20) {
$my_comment_count = ’emerging’;
} elseif ($my_comment_count >= 20) {
$my_comment_count = ‘popular’;

This code checks comment count for the message being presented and assigns them a worth based on the count. As an example, blog posts with much less compared to 10 remarks obtain a class called new, much less than 20 are described as emerging, and also anything over 20 comments is prominent.

Next, you have to add the remark count CSS class to the post_class function.

<article id=”post-<?php the_ID(); ?>” <?php post_class( $my_comment_count ); ?>>

This will certainly include new, arising, and prominent CSS classes to all articles based upon the number of remarks each message has.

You could add personalized CSS to style articles based upon appeal:.

.new {border: 1px solid #FFFF00;}
.emerging {border: 1px dashed #FF9933;}
.popular {border: 1px dashed #CC0000;}

We are simply including boundaries, you could add any CSS guidelines you desire.

Style Posts Based upon Personalized Fields

Hardcoding CSS courses in your theme documents restrictions you to just those specific CSS classes. Suppose you wished to determine which CSS course to add to a short article as you are composing it?

With custom-made areas, you can add CSS courses on the fly.

First you need to include a custom-made field to a blog post, to make sure that you could check it out. Modify a blog post as well as scroll to custom-made areas area.


Add post-class as the customized area name, and also anything you want to use as CSS course in the worth area.

Don’t forget to click on the ‘Add custom field‘ button to save it and then save your blog post.

Next, modify your theme files to show your personalized area as the blog post class.

<?php $custom_values = get_post_meta($post->ID, ‘post-class’); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class( $custom_values ); ?>>

It will certainly result the following HTML:.

<article id=”post-412″ class=”trending post-412 post type-post status-publish format-standard hentry category-uncategorized”>

You can now include personalized CSS for the post_class you added using custom-field.


Custom-fields could have numerous worths, so you can include numerous CSS classes making use of the very same name.

There are many more methods to style WordPress messages individually. As your abilities grow, you’ll keep finding brand-new means to design blog posts using various problems.

We hope this write-up assisted you learn the best ways to style each WordPress blog post differently. Hire WordPress development company that has all the high qualities to obtain up and also make the website running stupendously.

If you liked this post, after that please subscribe to our YouTube Channel for WordPress video clip tutorials. You could additionally discover us on Twitter and Facebook.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s